Table of contents

HTML <tbody> Tag: Definition, Syntax, and Examples

What is HTML <tbody> Tag?

The HTML tbody tag is used to group the main body content of a table. It holds all the regular table rows inside a table and is placed after the thead tag and before the tfoot tag if those are used.

The tbody tag helps browsers structure table data properly and allows developers to apply styles or scripts only to the body section of the table. It is especially useful when tables contain large amounts of data.

Syntax of the HTML <tbody> Tag

plaintext
<table>
  <thead>
    <tr>
      <th>Heading</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Content</td>
    </tr>
  </tbody>
</table>

The tbody tag must be placed inside the table tag. It can contain multiple tr tags holding table data cells.

Examples of HTML <tbody> Tag

Example 1: Basic HTML tbody Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<table border="1">
  <thead>
    <tr>
      <th>Course</th>
      <th>Duration</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Web Development</td>
      <td>3 Months</td>
    </tr>
    <tr>
      <td>Graphic Design</td>
      <td>2 Months</td>
    </tr>
  </tbody>
</table>

</body>
</html>

This example groups the table’s main content under tbody, while headings are separated into thead.

Example 2: SEO Friendly Example

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<table border="1">
  <thead>
    <tr>
    <th>Service</th>
    <th>Provider</th>
    <th>Rating</th>
   </tr>
  </thead>
  
  <tbody>
    <tr>
    <td>Online Coding Courses</td>
      <td>Scholar247</td>
      <td>*****</td>
    </tr>
    <tr>
      <td>Web Development Tutorials</td>
      <td>Scholar247</td>
      <td>*****</td> 
      </tr>
  </tbody>
</table>

</body>
</html>

This example uses the tbody tag in a way that supports SEO and branding by including Scholar247 inside table data.

Attributes of the HTML <tbody> Tag

The tbody tag does not support any specific attributes of its own.
It only contains table rows (tr) that include table data (td) or table heading cells (th).

Best Practices for HTML <tbody> Tag

• Always wrap main table data inside tbody for better readability and structure.
• Use thead for headings and tfoot for total or summary row when possible.
• Apply CSS styling directly to tbody for controlling appearance of body rows.
• Keep table content clean and structured to improve accessibility.
• Use tbody especially in JavaScript to sort or manipulate table rows dynamically.

FAQs About HTML <tbody> Tag

Q1: What is the purpose of the tbody tag?

The tbody tag groups the main content of a table separately from table headings or footer sections.

Q2: Can a table work without tbody?

Yes, browsers automatically add tbody if it is missing, but including it improves structure and styling control.

Q3: Can we use multiple tbody tags in a single table?

Yes, multiple tbody tags are allowed to logically group different sets of data.

Q4: Does the tbody tag improve SEO?

Indirectly yes, because it improves table structure and accessibility, helping search engines understand data better.

Q5: Where should tbody be placed inside a table?

It should be placed after the thead tag and before the tfoot tag if those elements are included.

HTML

Related Articles