What good is TBODY?

Hello.

I have been hardcoding HTML tables for years, and have never used TBODY.

I have seen TBODY used in many tables:

  <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
      <TBODY>
        <TR>
            <TD>
               Cell Stuff goes here
            </TD>
        </TR>
      </TBODY>
   </TABLE>

What good is TBODY, and should I use it?

Thanks!
LVL 16
hankknightAsked:
Who is Participating?
 
servicegroupConnect With a Mentor Commented:
I generally use TBODY for formatting purpose, If you just have a simple table, tbody is useless.

copy and paste this into a html page, note the formatting is different for header and "tbody"

<TABLE RULES=GROUPS FRAME=BOX>

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH>  <TH>Manager</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/11/2000</TD> <TD>Kelsey</TD>  </TR>
<TR> <TD>Tuesday</TD>   <TD>09/12/2000</TD> <TD>Lindsey</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/13/2000</TD> <TD>Randy</TD>   </TR>
<TR> <TD>Thursday</TD>  <TD>09/14/2000</TD> <TD>Susan</TD>   </TR>
<TR> <TD>Friday</TD>    <TD>09/15/2000</TD> <TD>Randy</TD>   </TR>
<TR> <TD>Saturday</TD>  <TD>09/16/2000</TD> <TD>Lindsey</TD> </TR>
<TR> <TD>Sunday</TD>    <TD>09/17/2000</TD> <TD>Susan</TD>   </TR>
</TBODY>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/18/2000</TD> <TD>Melody</TD>     </TR>
<TR> <TD>Tuesday</TD>   <TD>09/19/2000</TD> <TD>Christiane</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/20/2000</TD> <TD>Symphony</TD>   </TR>
<TR> <TD>Thursday</TD>  <TD>09/21/2000</TD> <TD>Starflower</TD> </TR>
<TR> <TD>Friday</TD>    <TD>09/22/2000</TD> <TD>Miko</TD>       </TR>
<TR> <TD>Saturday</TD>  <TD>09/23/2000</TD> <TD>Cleo</TD>       </TR>
<TR> <TD>Sunday</TD>    <TD>09/24/2000</TD> <TD>Alyx</TD>       </TR>
</TBODY>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/25/2000</TD> <TD>Dancing Star</TD> </TR>
<TR> <TD>Tuesday</TD>   <TD>09/26/2000</TD> <TD>Dawn</TD>         </TR>
<TR> <TD>Wednesday</TD> <TD>09/27/2000</TD> <TD>Josh</TD>         </TR>
<TR> <TD>Thursday</TD>  <TD>09/28/2000</TD> <TD>Ryan</TD>         </TR>
<TR> <TD>Friday</TD>    <TD>09/29/2000</TD> <TD>Mary Kay</TD>     </TR>
<TR> <TD>Saturday</TD>  <TD>09/30/2000</TD> <TD>Hallie</TD>       </TR>
<TR> <TD>Sunday</TD>    <TD>10/01/2000</TD> <TD>Paul</TD>         </TR>
</TBODY>

</TABLE>
0
 
servicegroupCommented:
Also, you can put multiple TBODY sections with in one table for different types of formatting, such as color, font size, etc.
0
 
raj3060Connect With a Mentor Commented:
You can have <thead> that is header of your table, <tfoot> that is footer of the table, and <tbody> is the body. You can define them in any order but they will go where they belong.
Read more on this:
http://www.felgall.com/htmlt41.htm

http://www.htmlhelp.com/reference/html40/tables/tbody.html

-Raj
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
dakydConnect With a Mentor Commented:
Really, it's a better way of organizing your data if you have clear-cut "sections" in your table.  The advantages to doing it this way come when you want to do different things to each section.  Like servicegroup wrote, you can format each tbody section differently without having to write a class on each of your elements.  It also comes in handy if you're writing scripts - for example, the simple javascript function I wrote to alert the addresses.  If you didn't separate your table into tbody's, you'd have to either hard code row numbers for each row into your script, or else iterate through all of the rows to find the right address to alert.  As it is, it's a simple 2-line script because you've got your HTML organized nicely.  Anyhow, hope that helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
#Personal {
  font-weight: bold;
  font-size: 10px;
  color: red;
}

#Business {
  color: green;
  font-size: 16px;
}
</style>
<script type="text/javascript">
function Addy(id)
{
  var tbody = document.getElementById(id);
  alert(tbody.rows[1].cells[1].innerHTML);
}
</script>
</head>

<body>
<table>
  <tbody id="Personal">
    <tr>
      <th colspan="2">Personal Information</th>
    </tr>
    <tr>
      <td>Address</td>
      <td>1234 56th Ave.</td>
    </tr>
    <tr>
      <td>Phone Number</td>
      <td>123 456 7890</td>
    </tr>
    <tr>
      <td>Fax</td>
      <td>123 456 7891</td>
    </tr>
  </tbody>

  <tbody id="Business">
    <tr>
      <th colspan="2">Business Information</th>
    </tr>
    <tr>
      <td>Address</td>
      <td>7890 12th Ave.</td>
    </tr>
    <tr>
      <td>Phone Number</td>
      <td>234 567 8901</td>
    </tr>
    <tr>
      <td>Fax</td>
      <td>234 567 8902</td>
    </tr>
  </tbody>
</table>

<p><input type="button" value="Alert Personal Address" onclick="Addy('Personal'); return false;" /></p>
<p><input type="button" value="Alert Business Address" onclick="Addy('Business'); return false;" /></p>
</body>
</html>
0
 
servicegroupCommented:
http://www.htmlcodetutorial.com/tables/_THEAD.html

This site doesn't have any annoying pop up's, Also is a really good reference for HTML stuff
0
 
mmarksburyConnect With a Mentor Commented:
Why use TBODY when you can create CSS style classes and assign those classes to your table elements?  Otherwise, if you make a font or color change, you'll have to update each and every TBODY reference when you could just update one class reference in your style sheet.  I too never used it, and didnt really start seeing it until I had already switched to using CSS for all my table formatting.

Good luck.
0
 
RoonaanConnect With a Mentor Commented:
Re: mmarksbury
In your eagerness you forgot that when you would like to make global changes to all the tbody element you would just use
tbody tr td {color:red;}

It sounds like you are against tbody without ever having used them properly. Which offcourse is okay, if you would have had proper arguments.

-r-
0
 
kumvjuecConnect With a Mentor Commented:
*********************
The <tbody> tag divides the table into one of three horizontally oriented parts. <thead> and <tfoot> are the other two. <colgroup> divides the table vertically. The greatest possible use of this tag is when a table is presented that transcends printed page bounaries. The <tbody> tag will allow the browser to reprint the table heading on each page. The <tfoot> tag provides the same for the table footer.

This is not the only use of <tbody>, If a browser recognizes the tag, it will also allow the "rules=" attribute to draw rules between the <thead>, <tfoot> and the <tbody> groups.
*********************

See http://www.webxpertz.net/forums/archive/index.php/t-22209.html
0
 
servicegroupCommented:
hankknight,

Are you looking for something very specific about tbody?
0
 
PaulPositionCommented:
Kumjuec should get the points :p
TBODY is used when laying out TABLES, not when laying out in a broad sense. That is, if you're going to show tabular data, you might as well do it right and using THEAD, TBODY and TFOOT will allow for easier printing. It's also one more element in a hierarchy which helps styling with CSS (whenever you can use the tree instead of specifying classes or ids is good) as Roonan said.
0
 
hankknightAuthor Commented:
Thank you--  you have all been very helpful.

I am not looking for anything specific, I just wanted to know what, if anything, it was useful for.

It sounds like TBODY is most useful when used with stylesheets and JavaScript.  And it could save me some time formating my tables.

I will leave my old web pages that don't already use TBODY alone.  But in the future I will use TBODY in my web pages.

Cheers

0
 
kumvjuecCommented:
It is usually helpful when you deal with tables which are large in width and length.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.