7.1 Etiqueta <caption>
Las etiquetas <caption>, <thead>, <tbody> y <tfoot> se utilizan
para mejorar la estructuración y la marcada semántica de las tablas en HTML. Ayudan a organizar los datos, haciendo las tablas
más comprensibles y accesibles tanto para los usuarios como para los motores de búsqueda.
Etiqueta <caption>
La etiqueta <caption> se utiliza para añadir un título a la tabla. Ayuda a describir el contenido de la tabla y la hace
más comprensible para los usuarios y accesible para los motores de búsqueda.
Sintaxis:
<table>
<caption>Título de la tabla</caption>
<!-- Contenido de la tabla -->
</table>
Ejemplo:
<table>
<caption>Título de la tabla</caption>
<tr>
<th>Nombre</th>
<th>Calificación</th>
</tr>
<tr>
<td>Iván</td>
<td>90</td>
</tr>
<tr>
<td>María</td>
<td>85</td>
</tr>
</table>
7.2 Etiqueta <thead>
La etiqueta <thead> se utiliza para agrupar las filas del encabezado de la tabla. Ayuda a separar lógicamente
el encabezado de la tabla de su contenido principal.
Sintaxis:
<table>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
</thead>
<!-- Contenido de la tabla -->
</table>
Ejemplo:
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Calificación</th>
</tr>
</thead>
<tbody>
<tr>
<td>Iván</td>
<td>90</td>
</tr>
<tr>
<td>María</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 Etiqueta <tbody>
La etiqueta <tbody> se utiliza para agrupar la parte principal del contenido de la tabla. Ayuda a separar
el contenido principal del encabezado y el «pie» de la tabla.
Sintaxis:
<table>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
</thead>
<tbody>
<!-- Contenido de la tabla -->
</tbody>
</table>
Ejemplo:
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Calificación</th>
</tr>
</thead>
<tbody>
<tr>
<td>Iván</td>
<td>90</td>
</tr>
<tr>
<td>María</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 Etiqueta <tfoot>
La etiqueta <tfoot> se utiliza para agrupar las filas del «pie» (parte inferior) de la tabla. Normalmente contiene
información resumida o de conclusión.
Sintaxis:
<table>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
</thead>
<tbody>
<!-- Contenido de la tabla -->
</tbody>
<tfoot>
<tr>
<td>Resultado 1</td>
<td>Resultado 2</td>
</tr>
</tfoot>
</table>
Ejemplo completo:
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Calificación</th>
</tr>
</thead>
<tbody>
<tr>
<td>Iván</td>
<td>90</td>
</tr>
<tr>
<td>María</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Calificación promedio</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
Recordar esto es realmente fácil:
Explicación de la estructura de la tabla
<table>: contenedor externo para toda la tabla<caption>: título de la tabla que ayuda a describir su contenido<thead>: agrupa las filas de encabezados de la tabla<tbody>: agrupa el contenido principal de la tabla<tfoot>: agrupa las filas del pie de la tabla
Reforzamos el material
Vamos a crear una tabla con todas las etiquetas estudiadas y estilizarla.
<table>
<caption>Resultados del examen</caption>
<thead>
<tr>
<th>Nombre</th>
<th>Calificación</th>
</tr>
</thead>
<tbody>
<tr>
<td>Iván</td>
<td>91</td>
</tr>
<tr>
<td>María</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Calificación promedio</td>
<td>91.33</td>
</tr>
</tfoot>
</table>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION