Solved

What good is TBODY?

Posted on 2004-10-18
12
1,139 Views
Last Modified: 2012-05-05
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!
0
Comment
Question by:hankknight
12 Comments
 
LVL 3

Accepted Solution

by:
servicegroup earned 100 total points
ID: 12341298
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
 
LVL 3

Expert Comment

by:servicegroup
ID: 12341316
Also, you can put multiple TBODY sections with in one table for different types of formatting, such as color, font size, etc.
0
 
LVL 11

Assisted Solution

by:raj3060
raj3060 earned 50 total points
ID: 12341493
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
 
LVL 19

Assisted Solution

by:dakyd
dakyd earned 50 total points
ID: 12341521
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
 
LVL 3

Expert Comment

by:servicegroup
ID: 12341523
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
 
LVL 7

Assisted Solution

by:mmarksbury
mmarksbury earned 50 total points
ID: 12342970
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 49

Assisted Solution

by:Roonaan
Roonaan earned 50 total points
ID: 12345725
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
 
LVL 3

Assisted Solution

by:kumvjuec
kumvjuec earned 75 total points
ID: 12345854
*********************
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
 
LVL 3

Expert Comment

by:servicegroup
ID: 12346748
hankknight,

Are you looking for something very specific about tbody?
0
 
LVL 3

Expert Comment

by:PaulPosition
ID: 12348379
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
 
LVL 16

Author Comment

by:hankknight
ID: 12349398
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
 
LVL 3

Expert Comment

by:kumvjuec
ID: 12349462
It is usually helpful when you deal with tables which are large in width and length.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now