Etiqueta HTML <th>
La etiqueta <th> especifica una celda de encabezado en una tabla HTML. Debe usarse como elemento hijo de <tr>, que, a su vez, se coloca dentro de la etiqueta <table>. Para definir una celda de datos estándar, se usa la etiqueta <td>.
La etiqueta <th> puede contener texto, imágenes, formularios, enlaces o cualquier otro elemento HTML que pueda usarse en el cuerpo de un documento HTML. El tamaño de la tabla se ajusta automáticamente según el tamaño de su contenido.
En las tablas HTML, los datos se organizan verticalmente en columnas. Si quieres mostrar la primera fila de la tabla como etiquetas o encabezados, debes usar elementos <th> en lugar de elementos <td> para esa fila. De forma predeterminada, el contenido de la etiqueta <th> aparece en negrita y centrado. Para cambiar su apariencia, puedes usar estilos de CSS. Los encabezados de tabla también pueden estilizarse fácilmente de forma independiente del resto del contenido de la tabla.
Ten en cuenta que todas las filas de una tabla deben tener el mismo número de celdas. Si una fila tiene menos celdas, el navegador renderiza implícitamente las celdas faltantes. Estas celdas implícitas heredan los estilos de borde de la tabla. Si necesitas indicar que otras celdas no contienen datos, crea celdas vacías donde sea necesario. Si las celdas implícitas aparecen consecutivamente, pueden renderizarse como una sola celda combinada.
Sintaxis
La etiqueta <th> viene en pares. El contenido se escribe entre las etiquetas de apertura (<th>) y cierre (</th>).
Etiqueta HTML <th>
<table>
<tr>
<th>...</th>
</tr>
</table>Ejemplo de la etiqueta HTML <th>:
Mes y fecha — Ejemplo de la etiqueta HTML <th> — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>Resultado
En este ejemplo, nuestros encabezados son "Month" y "Date", que definimos usando etiquetas <th>. Colocamos ambas etiquetas dentro de un elemento <tr>.
El atributo colspan se usa generalmente con la etiqueta <th> para permitir que el contenido abarque varias columnas. Veámoslo en acción.
Ejemplo de la etiqueta HTML <th> con el atributo colspan:
Ejemplo con un atributo colspan — Etiqueta HTML <th> — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: #1c87c9;
color: #ffffff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>Jun</td>
<td>18.07.2014</td>
</tr>
</table>
</body>
</html>En este ejemplo, el valor del atributo colspan es "2". Significa que una celda de encabezado debe abarcar dos columnas.
Atributos
Nota: atributos como align, bgcolor, valign, width, height y otros están obsoletos en HTML5. En su lugar, usa CSS para dar estilo.
| Atributo | Valor | Descripción |
|---|---|---|
| abbr | text | Define una versión abreviada del contenido en una celda de encabezado, o un texto alternativo. Algunos agentes de usuario, como los lectores de voz, pueden presentar esta descripción antes del contenido en sí. |
| align | left right center | Alinea el contenido en una celda de encabezado. No compatible en HTML 5. |
| axis | category_name | Categoriza las celdas que tienen contenido similar. No compatible en HTML 5. |
| background | background | Establece el fondo en una celda. No compatible en HTML 5. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Define el color de fondo de una celda. No compatible en HTML 5. |
| bordercolor | bordercolor | Establece el color de un borde. No compatible en HTML 5. |
| char | character | Alinea el contenido en una celda de encabezado con un carácter. Solo se usa si el atributo es align="char". No compatible en HTML 5. |
| charoff | number | Establece el número de caracteres desde el carácter especificado por el atributo char al que se alineará el contenido. Solo se usa si el atributo es align="char". No compatible en HTML 5. |
| colspan | number | Define el número de columnas que debe abarcar una celda. El valor del atributo debe ser un entero positivo. El valor predeterminado es 1. |
| headers | header_id | Especifica una lista separada por espacios de celdas de encabezado que contienen información sobre esta celda. El valor debe corresponder al id de la celda de encabezado (establecido mediante el atributo id). |
| height | % pixels | Establece la altura de una celda. No compatible en HTML 5. |
| nowrap | nowrap | Especifica que el contenido dentro de una celda no debe ajustarse. No compatible en HTML 5. |
| rowspan | number | Especifica el número de filas que debe abarcar una celda. El valor del atributo debe ser un entero positivo. El valor predeterminado es 1. No se recomienda usar valores superiores a 65534, ya que se reducirán a 65534. |
| scope | col colgroup row rowgroup auto | Define las celdas a las que se relaciona el elemento de encabezado (definido en <th>). Esencial para la accesibilidad de las tablas. |
| sorted | reversed number reversed number number reversed | Define la dirección de ordenación de una columna. No compatible en HTML 5. |
| valign | top middle bottom baseline | Especifica la alineación vertical del contenido dentro de una celda. No compatible en HTML 5. |
| width | % pixels | Establece el ancho de una celda. No compatible en HTML 5. |
La etiqueta <th> también admite los atributos globales y los atributos de evento.
Cómo dar estilo a una etiqueta HTML <th>
th {
background-color: #f2f2f2;
color: #333;
padding: 8px;
border: 1px solid #ccc;
}Práctica
What is the purpose of the HTML <th> tag?