Categories
Learn HTML

HTML: tbody tag

HTML: <tbody> tag

In this series of learning HTML, we will teach you how to use HTML tbody tag with proper syntax and lots of examples. Let’s start on the HTML tbody tag.

 

Description of HTML tbody tag

The HTML tbody tag is used to group a set of table rows (tr tags) together into a table body. The tbody tag is optional in HTML but is commonly used to organize and structure tables for improved readability and accessibility.

Here’s an example of how to use the tbody tag in HTML:

<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>32</td>
<td>Male</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>45</td>
<td>Female</td>
</tr>
</tbody>
</table>

In this example, the tbody tag is used to group the two data rows together into a table body. The thead tag is used to define the table header, which contains the column headings. When rendered in a web browser, it might look something like this:

Name Age Gender
John Doe 32 Male
Jane Smith 45 Female

 

Note that the tbody tag is not required, but using it can make the HTML code easier to read and understand. The tbody tag can also be used in conjunction with the thead and tfoot tags to create more complex table structures.

 

Syntax of HTML tbody tag

The HTML <tbody> tag is used to group the body content in an HTML table. The syntax of the <tbody> tag is as follows:

<table>
<thead>
<!-- Table header content -->
</thead>
<tbody>
<!-- Table body content -->
</tbody>
</table>

Here, the <tbody> tag is used to group the body content of the table, which typically contains one or more rows (<tr>) of cells (<td>). The <thead> tag is used to group the header content of the table.

The <tbody> tag is optional, and is not required for the table to function properly. However, using the <tbody> tag can help to improve the readability and maintainability of the code by clearly separating the header and body content.

Example:

<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product A</td>
<td>$10.00</td>
</tr>
<tr>
<td>Product B</td>
<td>$12.50</td>
</tr>
<tr>
<td>Product C</td>
<td>$8.99</td>
</tr>
</tbody>
</table>

In this example, the <tbody> tag is used to group the body content of the table, which contains three rows of product information. The table also includes a header row (<thead>) that labels the columns.

Global Attributes

The <tbody> tag is used to group the body content in a table, and it does not have any global attributes specified in HTML5. However, it can use the following attributes:

  • align: Specifies the horizontal alignment of the content within the <tbody> element. This attribute is deprecated in HTML5 and should be avoided.
  • bgcolor: Specifies the background color of the <tbody> element. This attribute is also deprecated in HTML5 and should be avoided.
  • char: Specifies the character to be used for aligning the content within the <tbody> element.
  • charoff: Specifies the number of characters the content should be aligned from the specified character.
  • class: Specifies one or more class names for the element, which can be used to style the content with CSS.
  • dir: Specifies the direction of the text within the element. Possible values are “ltr” (left-to-right) or “rtl” (right-to-left).
  • id: Specifies a unique identifier for the element, which can be used to refer to it from JavaScript or CSS.
  • lang: Specifies the language of the element’s content.
  • style: Specifies inline CSS styles for the element.
  • title: Specifies additional information about the element, which can be displayed as a tooltip when the mouse hovers over it.
  • valign: Specifies the vertical alignment of the content within the <tbody> element. Possible values are “top”, “middle”, “bottom”, or “baseline”.

It’s worth noting that most of these attributes are inherited from the HTML global attributes, which can be used on any HTML element.

Event Attributes

The <tbody> tag is not typically associated with any specific event attributes in HTML. However, it can still use the following event attributes that are available to all HTML elements:

  • onblur: An event that occurs when the element loses focus.
  • onclick: An event that occurs when the element is clicked.
  • ondblclick: An event that occurs when the element is double-clicked.
  • onfocus: An event that occurs when the element receives focus.
  • onkeydown: An event that occurs when a key is pressed down while the element has focus.
  • onkeypress: An event that occurs when a key is pressed while the element has focus.
  • onkeyup: An event that occurs when a key is released while the element has focus.
  • onload: An event that occurs when the element has finished loading.
  • onmousedown: An event that occurs when the mouse button is pressed down while the pointer is over the element.
  • onmousemove: An event that occurs when the mouse pointer is moved over the element.
  • onmouseout: An event that occurs when the mouse pointer moves out of the element.
  • onmouseover: An event that occurs when the mouse pointer moves over the element.
  • onmouseup: An event that occurs when the mouse button is released while the pointer is over the element.
  • onreset: An event that occurs when the form is reset.
  • onsubmit: An event that occurs when the form is submitted.

It’s important to note that using inline event attributes like this can make your HTML code harder to read and maintain, so it’s generally recommended to use JavaScript event listeners instead.

 

Other Attributes

In addition to the global and event attributes, the <tbody> tag can also use the following attributes that are specific to the <tbody> tag and other related tags:

  • align: Specifies the horizontal alignment of the content within the <tbody> element. This attribute is deprecated in HTML5 and should be avoided.
  • bgcolor: Specifies the background color of the <tbody> element. This attribute is also deprecated in HTML5 and should be avoided.
  • char: Specifies the character to be used for aligning the content within the <tbody> element.
  • charoff: Specifies the number of characters the content should be aligned from the specified character.
  • valign: Specifies the vertical alignment of the content within the <tbody> element. Possible values are “top”, “middle”, “bottom”, or “baseline”.
  • span: Specifies the number of columns that a cell should span within the <tbody> element. This attribute is used within the <td> and <th> tags, which are contained within the <tr> tags within the <tbody> element.

It’s worth noting that the <tbody> tag is often used as a container for the <tr> tags that define the rows of a table. In most cases, the attributes of the individual <td> and <th> tags within each row are more important than the attributes of the <tbody> tag itself.

Notes on HTML tbody tag

Here are some important notes to keep in mind when working with the <tbody> tag in HTML:

  1. The <tbody> tag is used to group the body content in a table. It’s important to remember that the <tbody> tag is not required in an HTML table, but it’s commonly used to separate the table header (<thead>) and the table footer (<tfoot>) from the main body content of the table.
  2. The <tbody> tag should contain one or more <tr> tags, which define the rows of the table.
  3. The <tbody> tag can use the same global and event attributes as any other HTML element. In addition, it has some specific attributes related to the alignment and span of cells within the table.
  4. It’s important to note that the <tbody> tag should not be used to style the appearance of the table. Instead, CSS should be used to apply styles to the various elements of the table, including the <tbody> tag.
  5. While the <tbody> tag is not required in an HTML table, it’s good practice to use it to group the main body content of the table. This makes the table structure clearer and easier to read, especially for people who use screen readers or other assistive technologies to access web content.
  6. The <tbody> tag is often generated automatically by web development frameworks or content management systems, so it’s important to understand how it works and how it can be styled with CSS.

Browser Compatibility

The HTML tbody tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML tbody tag

We will discuss the HTML tbody tag below, with some examples of how to use the tbody tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

HTML5 Document

Here’s an example of how to use the <tbody> tag in an HTML5 document:

<!DOCTYPE html>
<html>
<head>
<title>Example Table</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
</body>
</html>

In this example, we define an HTML5 document with a simple table that has a header row (<thead>) and a body (<tbody>). The table has three columns and two rows. We also include some CSS styles to give the table and its cells some basic formatting, including borders and padding.

Note that we use the <thead> tag to define the table header row, and the <tbody> tag to group the two body rows. This helps to separate the different parts of the table and makes it easier to read and understand the structure of the table.

We also use the standard HTML table elements, including <tr> (table row), <th> (table header cell), and <td> (table data cell), to define the content of the table.

Overall, this example demonstrates how the <tbody> tag can be used to group the main body content of an HTML table, making it easier to read and understand the table structure.

HTML 4.01 Transitional Document

here’s an example of how to use the <tbody> tag in an HTML 4.01 Transitional document:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example Table</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
</body>
</html>

In this example, we define an HTML 4.01 Transitional document with a simple table that has a header row (<thead>) and a body (<tbody>). The table has three columns and two rows. We also include some CSS styles to give the table and its cells some basic formatting, including borders and padding.

Note that we use the <thead> tag to define the table header row, and the <tbody> tag to group the two body rows. This helps to separate the different parts of the table and makes it easier to read and understand the structure of the table.

We also use the standard HTML table elements, including <tr> (table row), <th> (table header cell), and <td> (table data cell), to define the content of the table.

Overall, this example demonstrates how the <tbody> tag can be used to group the main body content of an HTML table in an HTML 4.01 Transitional document.

 

XHTML 1.0 Transitional Document

Here’s an example of how to use the <tbody> tag in an XHTML 1.0 Transitional document:

First, let’s understand what the tbody tag does. It is used to group a set of table rows (<tr> elements) together as a body. This can be helpful for styling the table or applying functionality to the entire group of rows.

Here’s an example of how to use the tbody tag in an XHTML 1.0 Transitional document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Table</title>
</head>
<body>

<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
</table>

</body>
</html>

In this example, we have a simple table with three columns and three rows. We have used the thead tag to group the header row and the tfoot tag to group the footer row. The tbody tag is used to group the three rows in the body of the table.

By grouping the rows in the tbody tag, you can easily apply styles or functionality to the entire group of rows. For example, you could use CSS to alternate the background color of the rows or apply a hover effect when a user hovers over any row in the tbody.

XHTML 1.0 Strict Document

Here’s an example of how to use the <tbody> tag in an XHTML 1.0 Strict document:

First, let’s understand what the tbody tag does. It is used to group a set of table rows (<tr> elements) together as a body. This can be helpful for styling the table or applying functionality to the entire group of rows.

Here’s an example of how to use the tbody tag in an XHTML 1.0 Strict document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Table</title>
</head>
<body>

<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
</table>

</body>
</html>

In this example, we have a simple table with three columns and three rows. We have used the thead tag to group the header row and the tfoot tag to group the footer row. The tbody tag is used to group the three rows in the body of the table.

By grouping the rows in the tbody tag, you can easily apply styles or functionality to the entire group of rows. For example, you could use CSS to alternate the background color of the rows or apply a hover effect when a user hovers over any row in the tbody.

 

XHTML 1.1 Document

Here’s an example of how to use the <tbody> tag in an XHTML 1.1 Document:

First, let’s understand what the tbody tag does. It is used to group a set of table rows (<tr> elements) together as a body. This can be helpful for styling the table or applying functionality to the entire group of rows.

Here’s an example of how to use the tbody tag in an XHTML 1.1 document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Table</title>
</head>
<body>

<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
</table>

</body>
</html>

In this example, we have a simple table with three columns and three rows. We have used the thead tag to group the header row and the tfoot tag to group the footer row. The tbody tag is used to group the three rows in the body of the table.

By grouping the rows in the tbody tag, you can easily apply styles or functionality to the entire group of rows. For example, you could use CSS to alternate the background color of the rows or apply a hover effect when a user hovers over any row in the tbody.