|
HTML Tip:
Easy Table Formatting
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Formatting table cells takes a lot of time and effort. Since they don't inherit formatting, you have to include specific font and background color information inside each cell. This quickly gets tiring and frustrating. Use the TBODY attribute to format groups of rows in a table with a single line of code. It eliminates a lot of extra HTML code that bloats your file size and causes coding errors.
Conventional Table Formatting
Suppose you were to format a table with 2 columns and 3 rows without using TBODY. In the top row you want the following format:
- Yellow background color
- Verdana font
- Purple font color
- Text centered inside each cell
|
The bottom rows are the same, but without the yellow background.
It looks like this:
|
1st Cell
|
2nd Cell
|
|
2nd row
|
2nd row
|
|
3nd row
|
3nd row
|
And is coded like this:
<TABLE border="1" cellpadding="3" cellspacing="0" width="300">
<tr>
<td width="50%" align="center" bgcolor="yellow">
<font face="verdana" color="purple">1st Cell</font>
</td>
<td width="50%" align="center" bgcolor="yellow">
<font face="verdana" color="purple">2nd Cell</font>
</td>
</tr>
<tr>
<td width="33%" align="center">
<font face="verdana" color="purple">2nd row</font>
</td>
<td width="50%" align="center">
<font face="verdana" color="purple">2nd row</font>
</td>
</tr>
<tr>
<td width="50%" align="center">
<font face="verdana" color="purple">3nd row</font>
</td>
<td width="50%" align="center">
<font face="verdana" color="purple">3nd row</font>
</td>
</tr>
</TABLE> |
That's an awful lot of text for such a small table. You can quickly get the same effect by including STYLE attributes in the TBODY tag.
How To Format With TBODY
Use TBODY to format a single row or groups of rows inside your tables. Place the TBODY tag immediately before the opening TR that you want to format and be sure to close it outside the closing /TR tag. Your tables can contain multiple TBODY statements.
Here's an example:
| 1st Cell |
2nd Cell |
| 2nd row |
2nd row |
| 3rd row |
3rd row |
You get the same table format with a lot less code:
<TABLE border="1" cellpadding="3" cellspacing="0" width="300">
<tbody align="center" style="font-family:verdana; color:purple; background-color:yellow">
<tr>
<td width="50%">1st Cell</td>
<td width="50%">2nd Cell</td>
</tr>
</tbody>
<tbody align="center" style="font-family:verdana; color:purple">
<tr>
<td width="50%">2nd row</td>
<td width="50%">2nd row</td>
</tr>
<tr>
<td width="50%">3rd row</td>
<td width="50%">3rd row</td>
</tr>
</tbody>
</table> |
This may not seem like a big deal with a 3-row table, but think of the time and effort it saves when you're dealing with larger tables! You can also use THEAD to create a table header cell and TFOOT for a footer cell, but browser support isn't as complete. You can usually achieve the same effects with TBODY.
TBODY Saves Time And Effort
There are a lot of benefits to this technique:
- Smaller page size: Pages load more quickly.
- Fewer nesting errors: Avoid nesting errors that break your page display.
- Less code to write: A small amount of code is quicker to write and easier to debug.
- Easier maintenance: Change a few lines of HTML code and update the whole table format.
|
Note that you're including the formatting information using the STYLE attribute, so brush up on Cascading Style Sheet (CSS) specifications to make sure that you're using the proper syntax. Explorer is pretty forgiving, but a single CSS syntax error will cause Netscape to ignore the whole attribute.
Browser Support
Inconsistent browser support is always a concern when you're coding Web pages. Internet Explorer supports TBODY fully. Netscape 6.0 supports the majority of attributes, but WebTV and Netscape 3 and 4 ignore the TBODY tag entirely.
You won't get error messages in these other browsers, but you will lose all your table formatting: that loss may affect your page layout in unexpected ways. Work around the problem by including conventional formatting information for specific rows that really need a background color or other emphasis. Often though, a lot of the table formatting information included as a matter of course is really expendable. You be the judge.
Although TBODY degrades gracefully, some browser display problems can actually break your pages. Be sure to test them on all the major browsers and browser versions. Don't have time? Let NetMechanic's Browser Photo do the work for you. We'll take an actual snapshot of your Web page in 14 different browser version and operating system configurations.
|
