HTML tbody Tag

HTML tbody: Main Tips

• HTML tbody tags are used to turn a set of table rows into a table.
• A tbody element must contain at least one <tr> element.
• This element is used together with <thead> and <tfoot> tags.
• The table layout will not be affected by <tfoot>, <tbody>, <thead> elements. Style it using CSS.

Using the tbody Tag

HTML tbody tags define the data rows it contains as a table:

<table>
 <tbody>
  <tr>
    <td>Long Island</td>
    <td>45</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Geeky stuff</td>
    <td>85</td>
    <td>90</td>
  </tr>
  <tr>
    <td>StayAtHomeMart</td>
    <td>25</td>
    <td>30</td>
  </tr>
  <tr>
    <td>BestBuy</td>
    <td>60</td>
    <td>10</td>
  </tr>
 </tbody>
</table>

If the table includes a <thead> element, <tbody> has to be placed after it.

All table rows except footers and headers must be contained in a tbody element. You cannot have <tr> elements that are descendants of the <table> but aren't wrapped in tbody tags.

Note: you can use multiple tbody elements in a table to divide rows into sections. However, they must be consecutive.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Default CSS Settings

The <tbody> element will be displayed with these default values by most browsers:

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

Deprecated tbody Tag Attributes

There were four tag attributes you could use with HTML tbody tags. However, they have been deprecated in HTML4.01 and removed completely in HTML5. Get to know them, but don't use them in your codes.

align defined the alignment of the content inside the <tbody> element:

<tbody align="right">

Note: instead of align, use CSS text-align property.

char set the alignment of the content inside the <tbody> element to a character:

<tbody align="char" char=".">

charoff specified the number of characters to offset the content from the character defined by char:

<tbody align="char" char="." charoff="2">

valign vertically aligned the <tbody> element content:

<tbody valign="bottom">

Note: instead of valign, use CSS vertical-align property.

Browser support

Chrome

1+

Edge

All

Firefox

1+

IE

All

Opera

All

Safari

All

Mobile browser support

Chrome

All

Firefox

4+

Opera

All

Safari

All