Etiqueta HTML <tbody>
La etiqueta <tbody> define el contenido del cuerpo de una tabla HTML. Se usa junto con <thead> y <tfoot>. Ver ejemplos.
La etiqueta <tbody> define el contenido del cuerpo (un conjunto de filas) de una tabla HTML, creando un bloque semántico separado dentro de ella. Se utiliza junto con las etiquetas <thead> y <tfoot>, que especifican el encabezado y el pie de la tabla respectivamente. Juntos, estos tres elementos agrupan una tabla en su encabezado, cuerpo y pie, lo que hace que el marcado sea más fácil de leer, más fácil de aplicar estilos y accesible para la tecnología asistiva.
La etiqueta <tbody> debe usarse como elemento hijo de <table>, después de <caption> y <colgroup> (si los hay) y después del elemento <thead>. En HTML5, el elemento <tfoot> puede aparecer antes o después del elemento <tbody> — ambas opciones son válidas, y <tfoot> siempre se renderiza en la parte inferior independientemente de su posición en el código fuente.
Por qué <tbody> es importante
Incluso si nunca escribes una etiqueta <tbody>, el navegador crea una por ti. Cuando colocas filas <tr> directamente dentro de una <table>, el analizador las envuelve automáticamente en un <tbody> implícito. Esto tiene consecuencias prácticas:
- Selectores CSS. Debido al
<tbody>implícito, un selector descendiente comotable > tbody > trcoincide con las filas incluso cuando no escribiste la etiqueta, mientras quetable > trno coincide con nada. Conocer esto evita confusos errores de «mi selector no funciona». - Agrupación de filas. Una tabla puede contener múltiples elementos
<tbody>, lo que permite dividir una tabla larga en secciones lógicas (por ejemplo, por año o categoría) que se pueden aplicar estilos y desplazar de forma independiente. - Scripting con DOM. Cada
<table>expone una coleccióntBodiesen JavaScript (table.tBodies[0]), lo que te da acceso directo a cada grupo del cuerpo sin recorrer los nodos hijos. - Impresión. Cuando una tabla larga abarca varias páginas impresas, los navegadores repiten
<thead>y<tfoot>en cada página mientras el contenido de<tbody>fluye de página en página.
Los elementos <thead>, <tbody> y <tfoot> no afectan el diseño de la tabla de forma predeterminada. 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 página en página.
En caso de usar <tbody>, no se pueden tener elementos <tr> (filas de tabla) que sean hijos del elemento <table> pero que no estén incluidos dentro de <tbody>. Si se usan filas que no son de encabezado ni de pie, deben estar dentro del elemento <tbody>.
Se puede usar más de un elemento <tbody> en cada tabla, siempre que sean todos sucesivos. Esto separará las filas de tablas grandes en secciones y permitirá aplicar formato a cada una por separado.
Sintaxis
La etiqueta <tbody> va en pares. El contenido se escribe entre las etiquetas de apertura (<tbody>) y cierre (</tbody>).
Etiqueta HTML <tbody>
<table>
<thead> ... </thead>
<tfoot> ... </tfoot>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>Ejemplo de la etiqueta HTML <tbody>:
Etiqueta HTML <tbody>
<!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>:
Etiqueta HTML <tbody>
<!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>Ejemplo de múltiples elementos <tbody>
Puedes usar varios elementos <tbody> en una tabla para agrupar filas en secciones separadas. Aquí, cada trimestre es su propio grupo del cuerpo, y cada grupo tiene su propio color de fondo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 60%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
text-align: left;
}
thead {
background-color: #1c87c9;
color: #fff;
}
tbody:nth-of-type(odd) {
background-color: #f3ebeb;
}
tbody:nth-of-type(even) {
background-color: #e3f0fb;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tbody>
<tr>
<td>March</td>
<td>750</td>
</tr>
<tr>
<td>April</td>
<td>1200</td>
</tr>
</tbody>
</table>
</body>
</html>Accesibilidad
Los elementos <tbody>, <thead> y <tfoot> ayudan a los lectores de pantalla a transmitir la estructura de una tabla. Para la tabla más accesible, combínalos con celdas de encabezado que usen el atributo scope, para que la tecnología asistiva pueda anunciar a qué encabezado pertenece una celda de datos:
<table>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>500</td>
</tr>
</tbody>
</table>Usa scope="col" para encabezados de columna (normalmente dentro de <thead>) y scope="row" para encabezados de fila dentro del cuerpo.
Atributos
| Atributo | Valores | Descripción |
|---|---|---|
| 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 que el contenido dentro del elemento <tbody> se alineará desde el carácter especificado por el atributo char. 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 Eventos.
Reemplazos CSS para los atributos obsoletos
Los atributos de presentación mencionados anteriormente están obsoletos en HTML5. En su lugar, usa CSS:
| Atributo antiguo | Usa este CSS en su lugar |
|---|---|
align="center" | text-align: center; |
valign="top" | vertical-align: top; |
bgcolor="#eee" | background-color: #eee; |
Cómo aplicar estilos a una etiqueta HTML <tbody>
Apunta al elemento <tbody> directamente en tu hoja de estilos para dar al cuerpo de la tabla su propio fondo, bordes y alineación de celdas:
tbody {
background-color: #f3ebeb;
border: 2px solid #1c87c9;
}
tbody td {
text-align: center;
vertical-align: top;
}
/* Zebra-stripe the body rows */
tbody tr:nth-of-type(even) {
background-color: #e3f0fb;
}Consulta dar estilos a tablas con CSS para más técnicas.