More on tables and Web page layout
In response to a question about Web page tables and Dreamweaver, I drafted an explanation of the differences between table borders, padding and spacing. It took so much time that evolved into this free "lecture" about what Dreamweaver does behind the scenes. "Tables" are an imprecise way to layout a page, because they (like all of HTML) were originally intended to define the "structure" of a document, not its looks.
The latest browsers support Styles and StyleSheets (or Cascading Style Sheets - CSS), a more orderly way to handle page design issues, and the browser programmers are gradually getting out the bugs in the way Styles are interpreted. Once you have the basics, Styles would be a good next thing to learn from sources like WebMonkey and CNet. However, the older HTML techniques of font codes and tables are still the quickest way to get your pages started, so that's all you really need for now.
Here's my explanation of basic table codes, and the sometimes confusing codes for Table Borders, Cell Spacing and Cell Padding. Each <table> has at least one horizontal row <tr> and one cell <td>. (Why "td"? I think the original idea was that, like a spreadsheet, each cell contained a chunk of "data", so the letter D was used for "data cell." Calling it "<tc>" for "cell" would have been clearer, but "td" is what we've got.)
You can allow the table width and height to shape themselves to fit the content you put in the table, or you can set a specific table size -- either in pixels or in percentage of the browser window. If my page design doesn't require a specific size table, I generally set the width to 90% of the browser window and let the contents and the size of the reader's browser window determine the table height.
You also can set the alignment of the table on the page, the background color (or image) and border color. Those are all optional. (See the "caution" "tableglitch" note at the end of this message.)Table Borders, Cell Spacing and Cell Padding
EVERY table starts with <table -- which can be followed by a series of "attributes" or "properties," including border, cellspacing and cellpadding, all measured in pixels (1/72 of an inch) For example, here's a simple four-cell box:
<table border=5 cellspacing=5 cellpadding=10>
<tr>
<td>HELLO</td> <td>WORLD</td>
</tr>
<tr>
<td>HOW ARE</td> <td>YOU?</td>
</tr>
</table>Important: If you start with <table> by itself, "border" is set to zero, BUT you get 2 pixels of cellspacing, and 1 pixel of cellpadding automatically. If you want a seamless table, such as one holding images that meet edge to edge, you must set both cellspacing and cellpadding to 0. If you don't, the automatic spacing and padding will hold the two images apart.
- The border is the outer edge of the table. IF you put just the word "border" inside the table code, you get a narrow, but visible, border; if you specify a border number, that sets its width in pixels.
- Cellspacing is the thickness of the INNER borders between cells, whether they are visible or not.
- Cellpadding is the space between the cells' borders and any text or image inside the cells.
If you have borders turned off, cellspacing and cellpadding do roughly
I hope that helped... For more on HTML and Dreamweaver, try the tutorials at Webmonkey and CNet.
the same thing--keep the text or image in one cell from bumping into the text or image in another.
The eye seems to like a little space between type and any border lines around the type, or between two columns of type -- like margins on a printed page. When I use a table to organize text I usually put in some padding -- the amount depending on the size and shape of the type I'm using. (Start with 8 pixels and see how it looks.)
Caution: Some table codes are NOT interpreted identically by all browsers, including the codes that let you use background colors and background images with table cells. See my tableglitch page for a simple example. It shows the HTML code and the Netscape and Explorer displays for the same page.
Getting a page to look exactly the same on both browsers can be time-consuming, frustrating, and often isn't worth the effort. For most purposes, there's nothing wrong with settling for a page design that looks good on all browsers, even if the two versions are a little different. (In addition to the Netscape-Explorer differences, there also may be Mac-Windows differences. It's best to test on both browsers and both kinds of computer.)