Encabezado de Tabla HTML

Introducción

En HTML, las tablas se utilizan para mostrar datos en filas y columnas. La etiqueta <thead> se utiliza para definir la fila de encabezado de una tabla. La fila de encabezado suele utilizarse para etiquetar el contenido de las columnas siguientes y contener etiquetas descriptivas.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Crea una tabla

Crea un archivo index.html y dile a tu editor de texto que lo abra. Aquí es donde escribirás tu código HTML.

Crea una tabla usando la etiqueta <table>.

<table>
  <!-- content goes here -->
</table>

Agrega un encabezado de tabla

Agrega una etiqueta <thead> para definir la fila de encabezado de la tabla. Dentro de la etiqueta <thead>, agrega tus filas de encabezado de tabla usando la etiqueta <th>.

<table>
  <thead>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
      <th>Encabezado 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- contenido de la tabla va aquí -->
  </tbody>
</table>

Inserta contenido en la tabla

Agrega contenido a la tabla usando la etiqueta <tbody> y las etiquetas anidadas <tr> y <td>.

<table>
  <thead>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
      <th>Encabezado 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Contenido 1</td>
      <td>Contenido 2</td>
      <td>Contenido 3</td>
    </tr>
    <tr>
      <td>Contenido 4</td>
      <td>Contenido 5</td>
      <td>Contenido 6</td>
    </tr>
  </tbody>
</table>

Dar estilo al encabezado de la tabla

Utiliza CSS para estilizar la etiqueta <thead>. A continuación, se muestra un ejemplo de cómo cambiar el color de fondo del encabezado a gris:

<style>
  thead {
    background-color: gray;
  }
</style>

Resumen

La etiqueta <thead> se utiliza para definir la fila de encabezado de una tabla. Es otro elemento hijo de la etiqueta <table> y va antes de las etiquetas <tbody> y <tfoot>. Con CSS, puedes dar estilo al encabezado de la tabla para que sea más atractivo visualmente.