Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
search engine submission service.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


search engine listing.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

HTML Tip:
Easy Table Formatting

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
May 2001
(Part 2)
Vol. 4, No. 10
 • HTML Tip
 • Design Tip
 • Promotion Tip
  

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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.