<h2 id="Summary">Summary</h2>
<p>The <em>HTML Table Body Element</em> <span style="background-color: rgba(212, 221, 228, 0.14902);">(<tbody>)</span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);"> </span><span style="line-height: 1.5;">defines one or more rows as the body of its </span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">parent {{ HTMLElement("table") }} element </span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">when no </span><span style="line-height: 1.5;">{{ HTMLElement("tr") }} elements are children of the parent.</span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);"> </span><span style="line-height: 1.5;"> In conjunction with a preceding </span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">{{ HTMLElement("tfoot") }} and </span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">{{ HTMLElement("thead") }} element, </span><span style="line-height: 1.5;">(<tbody>) </span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">provides</span><span style="line-height: 1.5;"> additional semantic information for devices such as printers and displays. Of the parent table's child elements,</span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);"> (<tbody) will represent the content, if longer than a page, that will most likely differ for each page printed. The </span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">{{ HTMLElement("tfoot") }} and </span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">{{ HTMLElement("thead") }} elements' content will be consistent for each page printed</span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">. For displays, (<tbody>) will enable separate scrolling from t</span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">he </span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">{{ HTMLElement("tfoot") }}, </span><span style="line-height: 1.5; background-color: rgba(212, 221, 228, 0.14902);">{{ HTMLElement("thead") }} and </span><span style="background-color: rgba(212, 221, 228, 0.14902); line-height: 1.5;">{{ HTMLElement("caption") }}</span><span style="background-color: rgba(212, 221, 228, 0.14902); line-height: 1.5;"> elements of the same parent </span><span style="background-color: rgba(212, 221, 228, 0.14902); line-height: 1.5;">{{ HTMLElement("table") }} element.</span></p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
<tbody>
<tr>
<td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td>
<td>None.</td>
</tr>
<tr>
<td>Permitted content</td>
<td>Zero or more {{ HTMLElement("tr") }} elements.</td>
</tr>
<tr>
<td>Tag omission</td>
<td>The {{ HTMLElement("tbody") }} element is not a required child element for a parent {{ HTMLElement("table") }} element<span style="line-height: 1.5;"> to graphically render</span><span style="line-height: 1.5;">. However, it must not be present, if its parent {{ HTMLElement("table") }} element</span><span style="line-height: 1.5;"> has a {{ HTMLElement("tr") }} element as a child.</span></td>
</tr>
<tr>
<td>Permitted parent elements</td>
<td>Within the required parent {{ HTMLElement("table") }} element, t<span style="line-height: 1.5;">he {{ HTMLElement("tbody") }} element can be added after a {{ HTMLElement("caption") }}, {{HTMLElement("colgroup") }}, {{ HTMLElement("thead") }} and a </span>{{ HTMLElement("tfoot") }} element<span style="line-height: 1.5;">.</span></td>
</tr>
<tr>
<td>Normative document</td>
<td><a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tbody-element" rel="external nofollow" target="_blank" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tbody-element">HTML5, section 4.9.5</a> (<a class="external" href="https://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.3" title="https://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.3">HTML4.01, section 11.2.3</a>)</td>
</tr>
</tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<dl>
<dt>
{{ htmlattrdef("align") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline(4.01) }}, {{ obsolete_inline() }} in {{ HTMLVersionInline(5) }}</dt>
<dd>
This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:
<ul>
<li><span style="font-family: Courier New;">left</span>, aligning the content to the left of the cell</li>
<li><span style="font-family: Courier New;">center</span>, centering the content in the cell</li>
<li><span style="font-family: Courier New;">right</span>, aligning the content to the right of the cell</li>
<li><span style="font-family: Courier New;">justify</span>, inserting spaces into the textual content so that the content is justified in the cell</li>
<li><span style="font-family: Courier New;">char</span>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "tbody") }} and {{ htmlattrxref("charoff", "tbody") }} attributes.</li>
</ul>
<p>If this attribute is not set, the <span style="font-family: Courier New;">left</span> value is assumed.</p>
<div class="note">
<strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard.
<ul>
<li>To achieve the same effect as the <span style="font-family: Courier New;">left</span>, <span style="font-family: Courier New;">center</span>, <span style="font-family: Courier New;">right</span> or <span style="font-family: Courier New;">justify</span> values, use the CSS {{ cssxref("text-align") }} property on it.</li>
<li>To achieve the same effect as the <span style="font-family: Courier New;">char</span> value, in CSS3, you can use the value of the {{ htmlattrxref("char", "tbody") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</li>
</ul>
</div>
</dd>
</dl>
<dl>
<dt>
{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}</dt>
<dd>
This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a class="external" href="https://www.w3.org/Graphics/Color/sRGB" title="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used:
<table align="center" border="0" cellpadding="0" cellspacing="10" summary="Table of color names and their sRGB values" width="80%">
<tbody>
<tr>
<td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">black</span> = "#000000"</td>
<td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">green</span> = "#008000"</td>
</tr>
<tr>
<td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">silver</span> = "#C0C0C0"</td>
<td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">lime</span> = "#00FF00"</td>
</tr>
<tr>
<td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">gray</span> = "#808080"</td>
<td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">olive</span> = "#808000"</td>
</tr>
<tr>
<td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">white</span> = "#FFFFFF"</td>
<td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">yellow</span> = "#FFFF00"</td>
</tr>
<tr>
<td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">maroon</span> = "#800000"</td>
<td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">navy</span> = "#000080"</td>
</tr>
<tr>
<td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">red</span> = "#FF0000"</td>
<td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">blue</span> = "#0000FF"</td>
</tr>
<tr>
<td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">purple</span> = "#800080"</td>
<td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">teal</span> = "#008080"</td>
</tr>
<tr>
<td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">fuchsia</span> = "#FF00FF"</td>
<td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><span style="font-family: Courier New;">aqua</span> = "#00FFFF"</td>
</tr>
</tbody>
</table>
<div class="note">
<strong>Usage note: </strong>Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the {{ HTMLElement("tbody") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.</div>
</dd>
</dl>
<dl>
<dt>
{{ htmlattrdef("char") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline(4.01) }}, {{ obsolete_inline() }} in {{ HTMLVersionInline(5) }}</dt>
<dd>
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 {{ htmlattrxref("align", "tbody") }} is not set to <span style="font-family: Courier New;">char</span>, this attribute is ignored.
<div class="note">
<strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{ htmlattrxref("char", "tbody") }}, in CSS3, you can use the character set using the {{ htmlattrxref("char", "tbody") }} attribute as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</div>
</dd>
</dl>
<dl>
<dt>
{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline(4.01) }}, {{ obsolete_inline() }} in {{ HTMLVersionInline(5) }}</dt>
<dd>
This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute.
<div class="note">
<strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div>
</dd>
</dl>
<dl>
<dt>
{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline(4.01) }}, {{ obsolete_inline() }} in {{ HTMLVersionInline(5) }}</dt>
<dd>
This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:
<ul>
<li><span style="font-family: Courier New;">baseline</span>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29" title="https://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <span style="font-family: Courier New;">bottom</span>.</li>
<li><span style="font-family: Courier New;">bottom</span>, which will put the text as close to the bottom of the cell as it is possible;</li>
<li><span style="font-family: Courier New;">middle</span>, which will center the text in the cell;</li>
<li>and <span style="font-family: Courier New;">top</span>, which will put the text as close to the top of the cell as it is possible.</li>
</ul>
<div class="note">
<strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{ cssxref("vertical-align") }} property on it.</div>
</dd>
</dl>
<h2 id="DOM_interface">DOM interface</h2>
<p>This element implements the <code><a href="/en-US/docs/Web/API/HTMLTableSectionElement" title="Documentation for HTMLTableSectionElement">HTMLTableSectionElement</a></code> interface.</p>
<h2 id="Examples">Examples</h2>
<p>Please see the {{ HTMLElement("table") }} page for examples on <code><tbody></code>.</p>
<h2 id="Compatibility">Compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1.0") }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td><code>align/valign</code> attribute</td>
<td>1.0</td>
<td>{{ CompatNo() }} {{ bug(915) }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td><code>char/charoff</code> attribute</td>
<td>1.0</td>
<td>{{ CompatNo() }} {{ bug(2212) }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td><code>bgcolor</code> attribute {{ Non-standard_inline() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td><code>align/valign</code> attribute</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatNo() }} {{ bug(915) }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td><code>char/charoff</code> attribute</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatNo() }} {{ bug(2212) }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td><code>bgcolor</code> attribute {{ Non-standard_inline() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("table") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }};</li>
<li>CSS properties and pseudo-classes that may be specially useful to style the <span style="font-family: Courier New;"><tbody></span> element:
<ul>
<li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li>
<li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.</li>
</ul>
</li>
</ul>
<p>{{HTMLRef}}</p>