| | |
Fixed width tables require careful handling, and are dependant on very strict coding practices. The rigidity of these practices is due to the algorithms used by most browsers to draw tables. Remember that HTML has changed a very great deal over the years, and that most web browsers were built using code written in the early 1990's, when HTML was quite different than it is now. The browsers are changing slowly, but for the forseeable future we must use modern, standards-compliant coding practices in combination with unusually restrictive syntax requirements in order to achieve consistent, reliable results.
Here is a very simple fixed width table:
<table width="250" border="1"> <tr> <th>Pets</th> <th>Colors</th> </tr> <tr> <td>Cats</td> <td>Red</td> </tr> <tr> <td>Dogs</td> <td>Blue</td> </tr> </table>
Displayed:
| Pets | Colors |
|---|---|
| Cats | Red |
| Dogs | Blue |
As you can see, this table is 250 pixels wide. The HEIGHT attribute is not usually set for real world tables, to allow the table to expand or contract to fit the available content.
Fixed width tables, when BORDER="0", are demonstrably and actually the width they proclaim; they are the only constructions in HTML, besides images, which deliver precise sizes.
Individual table cells, sadly, can NOT be set to precise sizes using the WIDTH attribute of the TH or TD tags. Individual table cells may only be reliably sized using GIFs, not the WIDTH attribute. The WIDTH attribute of the TH and TD tags produces results which may or MAY NOT be approximately the size requested; they are not accurate.
To achieve accurate and consistent table cell widths, tables must have most of their built-in spacing taken out. BORDER, CELLPADDING, and CELLSPACING must all be set to "0", i.e. <table . Spacing between columns of cells, then, must be created with table cells between the main columns; these "spacer" columns of cells must be filled with some sort of "spacer" GIFs.
Observe the following example. I have removed all spacing between my cells, and the space between the lines of text is compressed to the vanishing point.
Example:
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>First column of text. First column of text. First column of text. First column of text.</p>
</td>
<td>
<p>Second column of text. Second column of text. Second column of text. Second column of text. Second column of text.</p>
</td>
<td>
<p>Third column of text. Third column of text. Third column of text. Third column of text.</p>
</td>
</tr>
</table>
Displayed:
|
First column of text. First column of text. First column of text. First column of text. |
Second column of text. Second column of text. Second column of text. Second column of text. Second column of text. Second column of text. |
Third column of text. Third column of text. Third column of text. Third column of text. |
In order to add space between the columns of text, additional cells must be added. Because ALL table cells MUST contain real content, either text or graphics, I will insert transparent "spacer" GIFs into the "spacer" table cells (I'll talk more about "spacer" GIFs in a moment).
Example:
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>First column of text. First column of text. First column of text. First column of text. First column of text.</p>
</td>
<td><img src="./graphics/spacerTrans.gif" width="15" height="15" /></td>
<td>
<p>Second column of text. Second column of text. Second column of text. Second column of text. Second column of text. Second column of text.</p>
</td>
<td><img src="./graphics/spacerTrans.gif" width="15" height="15" /></td>
<td>
<p>Third column of text. Third column of text. Third column of text. Third column of text. Third column of text.</p>
</td>
</tr>
</table>
Displayed:
|
First column of text. First column of text. First column of text. First column of text. First column of text. |
|
Second column of text. Second column of text. Second column of text. Second column of text. Second column of text. Second column of text. |
|
Third column of text. Third column of text. Third column of text. Third column of text. Third column of text. |
This table still looks rather odd. Since all table cells are VALIGN="middle" by default, we need to reset the VALIGN attribute for the main content cells to "top" before we can move on.
Example:
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<p>First column of text. First column of text. First column of text. First column of text. First column of text.</p>
</td>
<td><img src="./graphics/spacerTrans.gif" width="15" height="15" /></td>
<td valign="top">
<p>Second column of text. Second column of text. Second column of text. Second column of text. Second column of text. Second column of text.</p>
</td>
<td><img src="./graphics/spacerTrans.gif" width="15" height="15" /></td>
<td valign="top">
<p>Third column of text. Third column of text. Third column of text. Third column of text. Third column of text.</p>
</td>
</tr>
</table>
Displayed:
|
First column of text. First column of text. First column of text. First column of text. First column of text. |
|
Second column of text. Second column of text. Second column of text. Second column of text. Second column of text. Second column of text. |
|
Third column of text. Third column of text. Third column of text. Third column of text. Third column of text. |
I would like to take a moment to point out an important detail concerning these code samples. Notice how the TD tags open and close on the left for the cells containing text, and how they open and close on the same line for the cells containing spacer GIFs? This detail is surprisingly important, and must not be overlooked. Any additional white space (whether carriage return, space character, tab, or whatever) may potentially distend a cell slightly (on some browsers); cells which are being sized to a particular width with a spacer GIF can't afford to be distended by even as much as one or two pixels, let alone one or two space characters!
In fact, table rows which are comprised solely of cells which contain only GIFs must have every tag between the opening and closing TR tags live on the same line.
Example:
<table border="0" cellpadding="0" cellspacing="0"> <tr><td><img src="./graphics/spacerTrans.gif" width="15" height="25" /></td><td><img src="./graphics/spacerTrans.gif" width="100" height="25" /></td></tr> </table>
This syntax is necessary in order to force both Netscape Communicator and Internet Explorer to behave consistently; otherwise, erratic spacing will result between rows, and sometimes even between cells in the row.
Here is the official line on coding style: Do NOT indent TABLE, TR, TH, or TD tags. Although this is a very common practice and officially sanctioned by HTML4 and XHTML standards, the currently supported browsers do not fully support indented TABLE-family tags. Always code table tags in one of the following ways: 1) TR opening and closing at the left, TD/TH opening and closing on individual lines; 2) TR, TH, and TD all opening and closing to the left; 3) All tags for a given row on ONE line (used ONLY for rows with graphics-only content, to ensure maximum cross-browser/cross-platform compatability).
Examples:
1) <table> <tr> <td>Content 1</td> <td>Content 2</td> </tr> </table> 2) <table> <tr> <td> Content 1 </td> <td> Content 2 </td> </tr> </table> 3) <table width="100" border="0" cellspacing="0" cellpadding="0"> <tr><td><img src="./graphics/spacerWhite.gif" width="50" height="50" /></td><td><img src="./graphics/spacerWhite.gif" width="50" height="50" /></td></tr> </table>
So far, I have discussed the creation of columns of text using a table, but I have not yet discussed how to create precisely sized columns (i.e. columns of a specified width). As mentioned earlier, precisely sized columns CANNOT be created using the WIDTH attribute of the TH or TD tag (which creates only APPROXIMATELY-sized, not PRECISELY-sized, cells).
The only way to create precisely sized cells/columns in a table is by setting the sizes of all of the cells/columns in the FIRST row of the table, using ONLY GRAPHICS. EVERY column MUST be represented in the FIRST row (do NOT use COLSPAN in the first row!), and each cell of that first row MUST contain a graphic which is exactly the width of the column. Collectively, all the widths of the graphics in the first row, when added together, MUST equal the WIDTH attribute of the TABLE EXACTLY!
Students always ask me whether the SECOND (or any other) row is acceptable for setting the widths of the columns; the answer is NO, it won't work properly unless you set everything in the FIRST row. And you MUST use ALL GRAPHICS in the first row, no text!
Example:
<table width="400" border="0" cellpadding="0" cellspacing="0">
<!-- Set sizes of all columns in the first row -->
<tr><td><img
<!-- Now, we may have content in the second row -->
<tr>
<td valign="top">
<p>This is the first column of text. It is only a first column of text.</p>
</td>
<td><img src="./graphics/spacerTrans.gif" width="15" height="5" /></td>
<td valign="top">
<p>This is a second column of text. It is much longer than the first column of text. It is almost interesting to read.</p>
</td>
<td><img src="./graphics/spacerTrans.gif" width="15" height="5" /></td>
<td valign="top">
<p>The third column of text is not much more interesting than the first column of text.</p>
</td>
</tr>
</table>
Displayed:
| | | | |
|
This is the first column of text. It is only a first column of text. |
|
This is a second column of text. It is much longer than the first column of text. It is almost interesting to read. |
|
The third column of text is not much more interesting than the first column of text. |
Remember: table cells MUST contain content, either regular graphics (GIF or JPEG), spacer GIFs, or text; spaces, carriage returns, non-breaking space characters ( ), tabs, and other such elements are considered white space and are NOT considered valid content according to the standards. Table cells which do not contain valid content render irregularly from browser to browser, or not at all.
A spacer GIF is a 3 pixel by 3 pixel GIF which is the same color as the background color of your web page. Realistically, only three colors of spacer GIFs are used: white, black, and transparent (the transparent spacer is used with all background colors and designs except white and black).
Because spacer GIFs are a flat color (or transparent), they may be resized safely in the IMG tag using the WIDTH and HEIGHT attributes.
<img src="./graphics/spacerWhite.gif" width="125" height="15" />
Note: Do NOT use 1 pixel by 1 pixel spacer GIFs, as these are not properly recognized by the web browsers; 3 pixel by 3 pixel GIFs are a safe spacer GIF size. Note: I have included a complete set of spacer GIFs (black, white, and transparent) in your class materials for this module.
Pages containing real-world tables often have BODY tags set to display content directly against the edge of the browser window (without the browser-generated white space around the margins of the web page, as this space is inconsistent from browser to browser). To remove the browser-generated space around the content of a web page, the following four attributes of the BODY tag must be set equal to "0": MARGINHEIGHT and MARGINWIDTH (for Netscape Communicator), and LEFTMARGIN and TOPMARGIN (for Internet Explorer).
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
Removing the margin from a web page is useful if we have graphical content which we would like to have rest against the edge of the browser window, as in this example.
If we take our text-based table from the previous section above, however, and place it immediately below the graphical table from the preceding example, the results are less than satisfactory; this example shows what I mean. Although the spacer GIF row at the top of the table prevents the columns of text from slamming into the top of the header table, notice how the text in the left column runs into the left side of the browser window.
This problem can be avoided by creating an extra column on the left side of the text-based table which generates a gutter, as demonstrated in this example.
Placing multiple tables into a web page, one atop the other (as seen in the examples above), is a very common practice; it allows for tables with different numbers of columns (or different widths of columns) to appear easily on the same page.
Sometimes, complex elements within a column of a table are created using an additional TABLE or set of TABLEs nested within the cell; we'll look into nesting tables within table cells at greater length in a later section.
You may nest as many sibling tables as you like inside of a parent table cell. It is important to note, however, that you must NEVER nest tables more than one level deep (i.e. no grandchild or great-grandchild nested tables). In other words, don't try to nest a table inside of one of your nested table's cells; that is forbidden. Nesting tables more than one level deep creates printing and display difficulties that you will want to avoid.
Because real-world tables can become very complex and lengthy, make certain to use HTML comments to mark the beginning and ending of important areas where content is likely to be inserted or change regularly. This will help yourself and others find the correct insertion point for content quickly and easily in the hundreds or thousands of lines of your HTML code.
Example (abbreviated):
<td valign="top"> <!-- Begin Main Area --> <p>Content here...</p> <!-- End Main Area --> </td>
Example (abbreviated):
<!-- Begin Article One --> <table width="500" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Some content...</td> </tr> </table> <!-- End Article One -->
Never use tables to hold printable content, especially if they have been modified with CSS; you'll get very irregular printed results. Create printable pages with vanilla HTML, no TABLES! Better yet, if you have the time and inclination, create printable and downloadable Adobe Acrobat (PDF) files, which are the standard for web-based documentation, as well as being very consistent in appearance cross-platform (much more so than HTML pages).
Never put content in a cell which would make that cell BIGGER than your defined column width; you'll get very irregular results if you do.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.