Etiqueta HTML `<thead>`

La etiqueta <thead> define la cabecera de una tabla HTML. Esta etiqueta se utiliza junto con las etiquetas <tbody> y <tfoot>, que especifican el cuerpo y el pie de la tabla, respectivamente.

La etiqueta <thead> debe usarse como hija del elemento <table>, después de los elementos <caption> y <colgroup>, y antes de los elementos <tfoot>, <tbody> y <tr>. (Solo se puede usar una etiqueta <thead> dentro de <table>).

Ten en cuenta que la etiqueta <tfoot> debe colocarse antes de <tbody>, para que el navegador pueda renderizar correctamente el pie de la tabla.

peligro
La etiqueta <thead> debe contener al menos un elemento <tr>.

éxito
Los elementos <thead>, <tbody> y <tfoot> no afectan el diseño de la tabla por defecto. Utiliza propiedades CSS para personalizar la apariencia de la tabla.

Sintaxis

La etiqueta <thead> se utiliza en pares. El contenido se escribe entre las etiquetas de apertura (<thead>) y cierre (</thead>).

Etiqueta HTML <thead>

html

<table>
  <thead>
    <tr>
      <th> ... </th>
    </tr>
  </thead>
  <tfoot> ... </tfoot>
  <tbody> ... </tbody>
</table>

Ejemplo de la etiqueta HTML `<thead>`:

Etiqueta HTML <thead>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Resultado

ejemplo de thead

Atributos

Atributo	Valores	Descripción
align	right left center justify char	Especifica la alineación del contenido dentro de un elemento `<thead>`. No soportado en HTML5
bgcolor	bgcolor	Establece el color de fondo de las filas dentro de un elemento `<thead>`. No soportado en HTML5
char	character	Especifica la alineación del contenido dentro de un elemento `<thead>` respecto a un carácter. Solo se utiliza cuando el atributo es align="char". No soportado en HTML5.
charoff	number	Especifica el número de caracteres que el contenido dentro del elemento `<thead>` se alineará desde el carácter especificado por el atributo char. Solo se utiliza cuando el atributo es align="char". No soportado en HTML5.
valign	top bottom middle baseline	Especifica una alineación vertical del contenido dentro de un elemento `<thead>`. No soportado en HTML5.

La etiqueta <thead> admite los Atributos Globales y los Atributos de Eventos.

Cómo dar estilo a una etiqueta HTML <thead>

css

thead {
  background-color: #f2f2f2;
  font-weight: bold;
}

Práctica

¿Cuál es la función de la etiqueta HTML <thead>?

Se utiliza para agrupar el contenido del pie de una tabla HTML.Se utiliza para agrupar el contenido de la cabecera de una tabla HTML.Se utiliza para definir una fila en una tabla HTML.Se utiliza para agrupar el contenido del cuerpo de una tabla HTML.Ayuda a mejorar la accesibilidad proporcionando información sobre la estructura de los datos de la tabla.

Etiqueta HTML <thead> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <thead>: ​

Resultado ​