Etiqueta <th> HTML

Definición y uso

<th> La etiqueta define la celda de título en la tabla HTML.

Hay dos tipos de celdas en las tablas HTML:

  • Celda de título - contiene información de título (usando <th> creación de elementos)
  • Celda de datos - contiene datos (usando <td> creación de elementos)

Por defecto,<th> El texto dentro de los elementos es negrita y centrado.

Por defecto, el texto dentro de los elementos <td> es común y alineado a la izquierda.

Vea también:

Tutorial de HTML:Tabla HTML

Manual de referencia del DOM HTML:Objeto TableHeader

Tutorial de CSS:Configuración de estilos de formulario

Ejemplo

Ejemplo 1

Una tabla HTML simple que contiene tres filas, dos celdas de título y cuatro celdas de datos:

<table>
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Junio</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Prueba por ti mismo

Ejemplo 2

¿Cómo alinear? <th> del contenido (usando CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Meses</th>
    <th style="text-align:left">Ahorros</th>
  </tr>
  <tr>
    <td>Junio</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Prueba por ti mismo

Ejemplo 3

¿Cómo agregar un color de fondo a la celda de título de la tabla (usando CSS)?

<table>
  <tr>
    <th style="background-color:#FF0000">Meses</th>
    <th style="background-color:#00FF00">Ahorros</th>
  </tr>
  <tr>
    <td>Junio</td>
    <td>￥3400</td>
  </tr>
 </table>

Prueba por ti mismo

Ejemplo 4

¿Cómo configurar la altura de la celda de título de la tabla (usando CSS)?

<table>
  <tr>
    <th style="height:100px">Mes</th>
    <th style="height:100px">Ahorros</th>
  </tr>
  <tr>
    <td>Junio</td>
    <td>￥3400</td>
  </tr>
</table>

Prueba por ti mismo

Ejemplo 5

Cómo especificar que no se salte de línea en la celda de encabezado de tabla (usando CSS):

<table>
  <tr>
    <th>Mes</th>
    <th style="white-space:nowrap">Dinero ahorrado para el nuevo coche</th>
  </tr>
  <tr>
    <td>Junio</td>
    <td>￥3400</td>
  </tr>
</table>

Prueba por ti mismo

Ejemplo 6

Cómo alinear verticalmente <th> del contenido (usando CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Mes</th>
    <th style="vertical-align:bottom">Ahorros</th>
  </tr>
  <tr>
    <td>Junio</td>
    <td>￥3400</td>
  </tr>
</table>

Prueba por ti mismo

Ejemplo 7

Cómo establecer el ancho de la celda de encabezado de tabla (usando CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Mes</th>
    <th style="width:30%">Ahorros</th>
  </tr>
  <tr>
    <td>Junio</td>
    <td>￥3400</td>
  </tr>
</table>

Prueba por ti mismo

Ejemplo 8

Cómo crear un encabezado de tabla:

<table>
  <tr>
    <th>Nombre</th>
    <th>Correo electrónico</th>
    <th>Teléfono</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Prueba por ti mismo

Ejemplo 9

Cómo crear una tabla con encabezado:

<table>
  <caption>Ahorros mensuales</caption>
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Junio</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Prueba por ti mismo

Ejemplo 10

Cómo definir celdas de tabla que cruzan múltiples filas o columnas:

<table>
  <tr>
    <th>Nombre</th>
    <th>Correo electrónico</th>
    <th colspan="2">Teléfono</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Prueba por ti mismo

Atributo

Atributo Valor Descripción
abbr Texto Se establece la versión abreviada del contenido de la celda de título.
colspan Número Se establece el número de columnas que debe cruzar la celda de título.
headers header_id Se establece una o más celdas de título relacionadas con la celda.
rowspan Número Se establece el número de filas que debe cruzar la celda de título.
scope
  • col
  • colgroup
  • row
  • rowgroup
 ¿Es la celda de encabezado una cabecera de columna, una cabecera de fila o una cabecera de un grupo de columnas o filas?

Atributos globales

<th> La etiqueta también admite Atributos globales en HTML.

Atributos de evento

<th> La etiqueta también admite Atributos de evento en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <th> Elemento:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte