?
Solved

What good is TBODY?

Posted on 2004-10-18
12
Medium Priority
?
1,155 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
12 Comments
 
LVL 3

Accepted Solution

by:
servicegroup earned 400 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 200 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 19

Assisted Solution

by:dakyd
dakyd earned 200 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 200 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
 
LVL 49

Assisted Solution

by:Roonaan
Roonaan earned 200 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 300 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

762 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