HTML Table Body element
(
<tbody>
) encapsulates a set of table rows (
<tr>
elements), indicating that they comprise the body of the table (
<table>
).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<tbody>
element, along with its cousins
<thead>
and
<tfoot>
, provide useful semantic information that can be used when rendering for either screen or printer as well as for
accessibility
purposes.
| 内容类别 | None. |
|---|---|
| 准许内容 |
Zero or more
<tr>
元素。
|
| Tag omission |
<tbody>
element is not a required child element for a parent
<table>
element to graphically render. However, it must not be present, if its parent
<table>
element has a
<tr>
element as a child.
|
| Permitted parents |
Within the required parent
<table>
element, the
<tbody>
element can be added after a
<caption>
,
<colgroup>
，和
<thead>
元素。
|
| Implicit ARIA role |
rowgroup
|
| Permitted ARIA roles | 任何 |
| DOM 接口 |
HTMLTableSectionElement
|
此元素包括 全局属性 .
align
left
, aligning the content to the left of the cell
center
, centering the content in the cell
right
, aligning the content to the right of the cell
justify
, inserting spaces into the textual content so that the content is justified in the cell
char
, aligning the textual content on a special character with a minimal offset, defined by the
char
and
charoff
属性。
If this attribute is not set, the
left
value is assumed.
As this attribute is deprecated, use the CSS
text-align
特性代替。
text-align
property for the
align="char"
is not implemented in any browsers yet. See the
text-align
's browser compatibility section
为
<string>
值。
bgcolor
The background color of the table. It is a
6-digit hexadecimal RGB code
, prefixed by a '
#
'. One of the predefined
color kewords
can also be used.
As this attribute is deprecated, use the CSS
background-color
特性代替。
char
This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (
.
) when attempting to align numbers or monetary values. If
align
is not set to
char
, this attribute is ignored.
charoff
char
属性。
valign
baseline
, which will put the text as close to the bottom of the cell as it is possible, but align it on the
baseline
of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as
bottom
.
bottom
, which will put the text as close to the bottom of the cell as it is possible;
middle
, which will center the text in the cell;
top
, which will put the text as close to the top of the cell as it is possible.
As this attribute is deprecated, use the CSS
vertical-align
特性代替。
<thead>
block (to semantically identify header rows), the
<tbody>
block
must
come after it.
<tbody>
, you can't also have table rows (
<tr>
elements) which are direct children of the
<table>
but not included inside the
<tbody>
. All non-header and non-footer rows must be inside the
<tbody>
if one is used.
<thead>
and
<tfoot>
elements specify information that may be the same—or at least very similar—on every page of a multi-page table, while the
<tbody>
element's contents generally will differ from page to page.
<thead>
,
<tbody>
,
<tfoot>
，和
<caption>
blocks separately from one another for the same parent table.
<tbody>
per table as long as they are all consecutive. This lets you divide the rows in large tables into sections, each of which may be separately formatted if so desired.
Below are some examples showing the use of the
<tbody>
element. For more examples of this tag in use, see the examples for
<table>
.
In this relatively simple example, we create a table listing information about a group of students with a
<thead>
和
<tbody>
, with a number of rows in the body.
The table's HTML is shown here. Note that all of the body cells including information about students are contained within a single
<tbody>
元素。
<table>
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Major</th>
</tr>
</thead>
<tbody>
<tr>
<td>3741255</td>
<td>Jones, Martha</td>
<td>Computer Science</td>
</tr>
<tr>
<td>3971244</td>
<td>Nim, Victor</td>
<td>Russian Literature</td>
</tr>
<tr>
<td>4100332</td>
<td>Petrov, Alexandra</td>
<td>Astrophysics</td>
</tr>
</tbody>
</table>
The CSS to style our table is shown next.
table {
border: 2px solid #555;
border-collapse: collapse;
font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}
First, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using
border-collapse
to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between.
font
is used to establish an initial font for the table.
th, td {
border: 1px solid #bbb;
padding: 2px 8px 0;
text-align: left;
}
Then the style is set for the majority of the cells in the table, including all data cells but also those styles shared between our
<td>
and
<th>
cells. The cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using
text-align
thead > tr > th {
background-color: #cce;
font-size: 18px;
border-bottom: 2px solid #999;
}
Finally, header cells contained within the
<thead>
block are given additional styling. They use a darker
background-color
, a larger font size, and a thicker, darker bottom border than the other cell borders.
The resulting table looks like this:
You can create multiple sections within a table by using multiple
<tbody>
elements. Each may potentially have its own header row or rows; however,
there can be only one
<thead>
per table!
Because of that, you need to use a
<tr>
filled with
<th>
elements to create headers within each
<tbody>
. Let's see how that's done.
Let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.
First, the resulting table, so you know what we're building:
The revised HTML looks like this:
<table>
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">Computer Science</th>
</tr>
<tr>
<td>3741255</td>
<td>Jones, Martha</td>
</tr>
<tr>
<td>4077830</td>
<td>Pierce, Benjamin</td>
</tr>
<tr>
<td>5151701</td>
<td>Kirk, James</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2">Russian Literature</th>
</tr>
<tr>
<td>3971244</td>
<td>Nim, Victor</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2">Astrophysics</th>
</tr>
<tr>
<td>4100332</td>
<td>Petrov, Alexandra</td>
</tr>
<tr>
<td>8892377</td>
<td>Toyota, Hiroko</td>
</tr>
</tbody>
</table>
Notice that each major is placed in a separate
<tbody>
block, the first row of which contains a single
<th>
element with a
colspan
attribute that spans the entire width of the table. That heading lists the name of the major contained within the
<tbody>
.
Then each remaining row in each major's
<tbody>
consists of two cells: the first for the student's ID and the second for their name.
table {
border: 2px solid #555;
border-collapse: collapse;
font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}
th, td {
border: 1px solid #bbb;
padding: 2px 8px 0;
text-align: left;
}
thead > tr > th {
background-color: #cce;
font-size: 18px;
border-bottom: 2px solid #999;
}
Most of the CSS is unchanged. We do, however, add a slightly more subtle style for header cells contained directly within a
<tbody>
(as opposed to those which reside in a
<thead>
). This is used for the headers indicating each table section's corresponding major.
tbody > tr > th {
background-color: #dde;
border-bottom: 1.5px solid #bbb;
font-weight: normal;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'tbody element' in that specification. |
实时标准 | |
|
HTML5
The definition of 'tbody element' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
tbody
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
align
弃用
|
Chrome ? | Edge 完整支持 12 |
Firefox
不支持
No
注意事项
|
IE 完整支持 Yes | Opera ? | Safari ? | WebView Android ? | Chrome Android ? |
Firefox Android
不支持
No
注意事项
|
Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
bgcolor
弃用
|
Chrome ? | Edge ? | Firefox 不支持 No | IE 完整支持 Yes | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android 不支持 No | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
char
弃用
|
Chrome ? | Edge 完整支持 12 |
Firefox
不支持
No
注意事项
|
IE 完整支持 Yes | Opera ? | Safari ? | WebView Android ? | Chrome Android ? |
Firefox Android
不支持
No
注意事项
|
Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
charoff
弃用
|
Chrome ? | Edge 完整支持 12 |
Firefox
不支持
No
注意事项
|
IE 完整支持 Yes | Opera ? | Safari ? | WebView Android ? | Chrome Android ? |
Firefox Android
不支持
No
注意事项
|
Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
valign
弃用
|
Chrome ? | Edge 完整支持 12 |
Firefox
不支持
No
注意事项
|
IE 完整支持 Yes | Opera ? | Safari ? | WebView Android ? | Chrome Android ? |
Firefox Android
不支持
No
注意事项
|
Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
完整支持
不支持
兼容性未知
弃用。不要用于新网站。
见实现注意事项。
<tbody>
元素：
:nth-child
pseudo-class to set the alignment on the cells of the column;
text-align
property to align all cells content on the same character, like '.'.