Etiqueta HTML <tbody>
La etiqueta <tbody> define el contenido del cuerpo (un conjunto de filas) de una tabla HTML, creando en ella un bloque semántico separado. La etiqueta <tbody> se usa junto con las etiquetas <thead> y <tfoot>, que especifican, respectivamente, el encabezado y el pie de la tabla.
La etiqueta <tbody> debe usarse como elemento hijo de <table>, después de <caption>, <colgroup> (si lo hay) y los elementos <thead>. En HTML5, el elemento <tfoot> va antes o después del elemento <tbody>.
TIP
Los elementos <thead>, <tbody> y <tfoot> no afectan por defecto al diseño de la tabla. Usa propiedades CSS para personalizar el aspecto de la tabla.
Al imprimir un documento, los elementos <thead> y <tfoot> definirán la información que puede ser igual o muy similar en cada página de una tabla de varias páginas, mientras que el contenido de la etiqueta <tbody> variará de una página a otra.
En caso de usar <tbody>, no puedes tener elementos <tr> (filas de tabla) que sean hijos del elemento <table>, pero que no estén incluidos dentro de <tbody>. Si usas filas que no sean de encabezado ni de pie, deben estar dentro del elemento <tbody>.
Se pueden usar más de un elemento <tbody> en cada tabla, siempre que sean sucesivos. Esto separará las filas de tablas grandes en secciones y podrás formatear cada una por separado.
Sintaxis
La etiqueta <tbody> viene en pares. El contenido se escribe entre las etiquetas de apertura (<tbody>) y cierre (</tbody>).
HTML <tbody> Tag
<table>
<thead> ... </thead>
<tfoot> ... </tfoot>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>Ejemplo de la etiqueta HTML <tbody>:
HTML <tbody> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%; margin:30px auto; border-collapse:collapse;">
<thead style="background-color:#1c87c9; color:#fff;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot style="background-color:grey;">
<!-- <tfoot> is placed after <thead>, but is shown on the bottom of the table. -->
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
<tbody style="background-color:lightgrey;">
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
</table>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <tbody> con las etiquetas <thead> y <tfoot>:
HTML <tbody> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 60%;
margin: 30px auto;
border-collapse: collapse;
}
thead {
background-color: #8ebf42;
color: #fff;
}
tbody {
background-color: #f3ebeb;
}
tfoot {
background-color: #ccc7c7;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>1500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2500</td>
</tr>
</tfoot>
</table>
</body>
</html>Atributos
| Attribute | Values | Description |
|---|---|---|
| align | right left center justify char | Especifica la alineación del contenido dentro del elemento <tbody>. No compatible con HTML5 |
| bgcolor | bgcolor | Establece el color de fondo de las filas dentro del elemento <tbody>. No compatible con HTML5. |
| char | character | Especifica la alineación del contenido dentro del elemento <tbody> respecto a un carácter. Se usa solo cuando el atributo align="char". No compatible con HTML5. |
| charoff | number | Especifica el número de caracteres a partir del carácter indicado por el atributo char al que se alineará el contenido dentro del elemento <tbody>. Se usa solo cuando el atributo align="char". No compatible con HTML5. |
| valign | top bottom middle baseline | Especifica la alineación vertical del contenido dentro del elemento <tbody>. No compatible con HTML5. |
La etiqueta <tbody> también admite los atributos globales y los atributos de evento.
Cómo dar estilo a una etiqueta HTML <tbody>
{
"tag_name": "tbody"
}Práctica
¿Qué es cierto sobre la etiqueta HTML <tbody> según la información proporcionada en w3docs.com?