Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

What good is TBODY?

Posted on 2004-10-18
12
Medium Priority
?
1,158 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

636 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