files/en-us/web/html/reference/elements/tbody/index.md
The <tbody> HTML element encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the body of a table's (main) data.
{{InteractiveExample("HTML Demo: <tbody>", "tabbed-taller")}}
<table>
<caption>
Council budget (in £) 2018
</caption>
<thead>
<tr>
<th scope="col">Items</th>
<th scope="col">Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Donuts</th>
<td>3,000</td>
</tr>
<tr>
<th scope="row">Stationery</th>
<td>18,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Totals</th>
<td>21,000</td>
</tr>
</tfoot>
</table>
thead,
tfoot {
background-color: #2c5e77;
color: white;
}
tbody {
background-color: #e4f0f5;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
caption {
caption-side: bottom;
padding: 10px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
td {
text-align: center;
}
This element includes the global attributes.
The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.
align {{deprecated_inline}}
left, center, right, justify, and char. When supported, the char value aligns the textual content on the character defined in the char attribute and on offset defined by the charoff attribute. Use the {{cssxref("text-align")}} CSS property instead, as this attribute is deprecated.bgcolor {{deprecated_inline}}
#, or a color keyword. Other CSS {{cssxref("<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated.char {{deprecated_inline}}
.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored.charoff {{deprecated_inline}}
char attribute.valign {{deprecated_inline}}
baseline, bottom, middle, and top. Use the {{cssxref("vertical-align")}} CSS property instead, as this attribute is deprecated.<tbody> is placed after any {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, and {{HTMLElement("thead")}} elements.<tbody> element that encapsulates them. As a result, CSS selectors such as table > tr will not select these elements. See also the Not specifying a body example.<tbody> per table as long as they are all consecutive. This allows to divide the rows ({{HTMLElement("tr")}} elements) in large tables into sections, each of which may be separately formatted if so desired. If not marked up to be consecutive elements, browsers will correct this author error, ensuring any {{HTMLElement("thead")}} and {{HTMLElement("tfoot")}} elements are rendered as the first and last elements of the table, respectively.<tbody> element provides useful {{Glossary("semantics", "semantic")}} information and can be used when rendering for either screen or print. Specifying such table content groups also provides valuable contextual information for assistive technologies, including screen readers and search engines.<tbody> element's contents generally will differ from page to page.<tbody>, {{htmlelement("tfoot")}}, and {{HTMLElement("caption")}} blocks separately from one another for the same parent {{htmlelement("table")}}.See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices.
This example demonstrates that the browser automatically encapsulates {{HTMLElement("tr")}} elements within a <tbody> element if the rows are not nested within a table grouping element (<tbody>, <tfoot>, or <thead>) and are, as in this example, the direct children of the {{HTMLElement("table")}} element.
Here, a very basic table with some table rows ({{HTMLElement("tr")}} elements) containing data ({{HTMLElement("td")}} elements) about students is created.
<table>
<tr>
<td>3741255</td>
<td>Jones, Martha</td>
<td>Computer Science</td>
<td>240</td>
</tr>
<tr>
<td>3971244</td>
<td>Nim, Victor</td>
<td>Russian Literature</td>
<td>220</td>
</tr>
<tr>
<td>4100332</td>
<td>Petrov, Alexandra</td>
<td>Astrophysics</td>
<td>260</td>
</tr>
</table>
Note the CSS in the example, where a {{cssxref("background-color")}} is specified for the <tbody> element and the tbody is used as a part of an additional {{Glossary("css_selector", "CSS selector")}}. Alternatively, {{Glossary("developer_tools", "browser developer tools")}} can be used to check the presence of the <tbody> element in the {{Glossary("dom", "DOM")}}.
tbody {
background-color: #e4f0f5;
}
tbody > tr > td:last-of-type {
width: 60px;
text-align: center;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
{{EmbedLiveSample("Not_specifying_a_body", 650, 100)}}
This example extends and enhances the basic table from the previous example.
We introduce a table head ({{HTMLElement("thead")}} element) and explicitly use a <tbody> element to structure the table into {{Glossary("semantics", "semantic")}} sections. The table head contains the column headers ({{HTMLElement("th")}} elements). The <tbody> element represents the body section of the table, which contains a number of rows ({{HTMLElement("tr")}} elements) with the table's main data, which is the data of each student.
The use of such table content groups and {{Glossary("semantics", "semantic")}} markup is not only useful for visual presentation (via CSS styling) and contextual information for assistive technologies; moreover, the explicit use of the <tbody> element helps the browser to create the intended table structure, avoiding unwanted results.
<table>
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Major</th>
<th>Credits</th>
</tr>
</thead>
<tbody>
<tr>
<td>3741255</td>
<td>Jones, Martha</td>
<td>Computer Science</td>
<td>240</td>
</tr>
<tr>
<td>3971244</td>
<td>Nim, Victor</td>
<td>Russian Literature</td>
<td>220</td>
</tr>
<tr>
<td>4100332</td>
<td>Petrov, Alexandra</td>
<td>Astrophysics</td>
<td>260</td>
</tr>
</tbody>
</table>
The CSS is nearly unchanged from the previous example, except for some basic styling to highlight the table head so that the headers of the columns stand out from the data in the table body. As in the example above, the tbody type selector is used to style the body cells.
tbody {
background-color: #e4f0f5;
}
tbody > tr > td:last-of-type {
text-align: center;
}
thead {
border-bottom: 2px solid rgb(160 160 160);
background-color: #2c5e77;
color: white;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
{{EmbedLiveSample("Basic_body_structure", 650, 140)}}
This example extends and enhances the table from the example above even more by introducing multiple body sections.
Using multiple <tbody> elements allows creating row groupings within a table. Each table body can potentially have its own head row or rows; however, there may only be one {{HTMLElement("thead")}} element per table! Because of that, {{HTMLElement("tr")}} with {{HTMLElement("th")}} elements can be used to create headers within each <tbody>.
Building on the table in the previous basic example, more students are added and, instead of listing each student's major on each row, the students are grouped by major. Note that each major is enclosed within its own <tbody> block, with the first row ({{HTMLElement("tr")}} element) serving as the head of the block, displaying the major title within a {{HTMLElement("th")}} element that uses the colspan attribute to span the header across all three columns of the table. Each remaining row within each major's <tbody> represents one student.
<table>
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Credits</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3">Computer Science</th>
</tr>
<tr>
<td>3741255</td>
<td>Jones, Martha</td>
<td>240</td>
</tr>
<tr>
<td>4077830</td>
<td>Pierce, Benjamin</td>
<td>200</td>
</tr>
<tr>
<td>5151701</td>
<td>Kirk, James</td>
<td>230</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">Russian Literature</th>
</tr>
<tr>
<td>3971244</td>
<td>Nim, Victor</td>
<td>220</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">Astrophysics</th>
</tr>
<tr>
<td>4100332</td>
<td>Petrov, Alexandra</td>
<td>260</td>
</tr>
<tr>
<td>8892377</td>
<td>Toyota, Hiroko</td>
<td>240</td>
</tr>
</tbody>
</table>
Most of the CSS is unchanged. However, a slightly more subtle style is added for header cells contained directly within a <tbody> (as opposed to those that reside in the {{HTMLElement("thead")}}). This is used for the headers indicating each table section's corresponding major.
tbody > tr > th {
border-top: 2px solid rgb(160 160 160);
border-bottom: 1px solid rgb(140 140 140);
background-color: #e4f0f5;
font-weight: normal;
}
tbody {
background-color: whitesmoke;
}
thead {
background-color: #2c5e77;
color: white;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 6px 8px;
text-align: left;
}
tbody > tr > td:last-of-type {
text-align: center;
}
{{EmbedLiveSample("Multiple_bodies", 650, 300)}}
{{Specifications}}
{{Compat}}