Encabezado de una tabla

Los encabezados de tabla se definen con el elemento th. Cada elemento th representa una celda de tabla.

Ejm

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Encabezado vertical

Para usar la primera columna como encabezados de tabla, defina la primera celda de cada fila como un elemento th.

Ejm

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

Alinear encabezados

Por defecto los encabezados se sitúan en el centro de la celda. Para alinearlos de distinta manera se utiliza la propiedad CSS text-align.

Ejm

th {
  text-align: left;
}

Encabezados para múltiples columnas

Puede tener un encabezado que abarque dos o más columnas. Para ello se utiliza el atributo colspan dentro de la etiqueta <th>.

Ejm

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Título de la tabla

Para añadir un título a la tabla utilizamos la etiqueta <caption> de la siguiente manera.

Ejm

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>