HTML Table Headers

---

Las tablas HTML pueden tener encabezados para cada columna o fila, o para muchas columnas/filas.

---

Encabezados

Los encabezados de una tabla se definen con los elementos th. Cada elemento th representa una celda de la tabla.

Ejemplo:

<!-- Elemento th -->
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>

---

Encabezados verticales

Para usar la primera columna como encabezado de una tabla, defina la primera celda de cada fila como un elemento th:

Ejemplo:

<!-- Primera fila como encabezado -->
<tr>
    <th>Encabezado 1</th>
    <td>Celda 1</td>
    <td>Celda 2</td>
</tr>
<tr>
    <th>Encabezado 2</th>
    <td>Celda 1</td>
    <td>Celda 2</td>
</tr>

---

Alinear encabezados

Por defecto, los encabezados de las tablas están en negrita y centrados:

Para alinear los encabezados de la tabla a la izquierda, usa la propiedad text-align:

Ejemplo:

/* Encabezado alineado a la izquierda*/
th {
    text-align: left;
}

---

Encabezado para varias columnas

Puedes tener un encabezado que abarque dos o más columnas.

Para hacer esto, usa el atributo colspan en el elemento th:

Ejemplo:

<!-- Colspan -->
<tr>
    <th colspan="2">Nombre</th>
    <th>Edad</th>
</tr>

✋En el artículo 30 aprenderemos más sobre colspan y rowspan.

---

Título de tabla

Puedes agregar un título que sirva como encabezado para toda la tabla.

Para agregar un título a una tabla, usa la etiqueta <caption>:

Ejemplo:

<!-- Caption -->
<tr>
    <caption>Titulo</caption>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
</tr>

Nota: la etiqueta <caption> debe insertarse inmediatamente después de la etiqueta <table>.

---

Resumen

Las tablas HTML pueden tener encabezados para cada columna o fila, abarcar dos o más columnas o filas, asignar un título a la tabla y alinear los encabezados, y mucho más.

---

Traducido con 💚 desde W3Schools.com