Code has been added to clipboard!

HTML tbody Tag

Reading time 2 min
Published Jun 29, 2017
Updated Oct 11, 2019

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:

Example
<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.

Udacity
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Default CSS Settings

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

Example
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:

Example
<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:

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

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

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

valign vertically aligned the <tbody> element content:

Example
<tbody valign="bottom">

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

Browser support

Browser image
Chrome
1+
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 27/02/2021
3176 People Used
Only 97 Left
Rating
5.0