HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
An HTML table with a <thead>, <tbody>, and a <tfoot> element
The <tbody>
tag is used to group the body content in an HTML table.
The <tbody>
element is used in conjunction with the <thead> and
<tfoot> elements to specify each part of a table (body, header, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
<tbody>
element must have one or more
<tr> tags inside.
The <tbody>
tag must be used in the following context: As a child of a
<table> element, after any
<caption>, <colgroup>, and
<thead> elements.
<tbody>
, and <tfoot>
elements will not affect the layout of the table by default. However, you can
use CSS to style these elements (see example below)!
Element | |||||
---|---|---|---|---|---|
<tbody> | Yes | Yes | Yes | Yes | Yes |
The <tbody>
tag also supports the Global Attributes in HTML.
The <tbody>
tag also supports the Event Attributes in HTML.
Style <thead>, <tbody>, and <tfoot> with CSS:
<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
How to align content inside <tbody> (with CSS):
<table style="width:100%">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody style="text-align:right">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
How to vertical align content inside <tbody> (with CSS):
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody style="vertical-align:bottom">
<tr
style="height:100px">
<td>January</td>
<td>$100</td>
</tr>
<tr
style="height:100px">
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Most browsers will display the <tbody>
element with the following default values:
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}