Dominando las celdas de encabezado de tabla HTML

Introducción

En HTML, la etiqueta <th> se utiliza para definir una celda como encabezado de un grupo de celdas. Hay dos tipos de celdas de tabla HTML: celda de encabezado y celda estándar. La celda de encabezado se utiliza como encabezado para el grupo de celdas y las celdas estándar contienen datos para una tabla.

Este laboratorio paso a paso te guiará a través de cómo crear una celda de encabezado en una tabla HTML utilizando la etiqueta <th> con breves explicaciones y fragmentos de código.

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/tbl_access("Table Accessibility") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70864{{"Celda de encabezado de tabla HTML"}} html/tables -.-> lab-70864{{"Celda de encabezado de tabla HTML"}} html/tbl_access -.-> lab-70864{{"Celda de encabezado de tabla HTML"}} html/custom_attr -.-> lab-70864{{"Celda de encabezado de tabla HTML"}} end

Creando una tabla HTML básica

En primer lugar, necesitamos crear una tabla utilizando HTML.

Para crear una tabla, debes utilizar la etiqueta <table>, con cada fila representada por la etiqueta <tr> y cada celda representada por la etiqueta <td>.

Por ejemplo, el siguiente código creará una tabla HTML simple con dos filas y dos columnas:

<table>
  <tr>
    <td>Fil 1, Columna 1</td>
    <td>Fil 1, Columna 2</td>
  </tr>
  <tr>
    <td>Fil 2, Columna 1</td>
    <td>Fil 2, Columna 2</td>
  </tr>
</table>

Creando una celda de encabezado

Para crear una celda de encabezado, debemos reemplazar la etiqueta <td> con la etiqueta <th> en la fila de la tabla donde queremos agregar una celda de encabezado.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Fil 1, Columna 1</td>
    <td>Fil 1, Columna 2</td>
  </tr>
  <tr>
    <td>Fil 2, Columna 1</td>
    <td>Fil 2, Columna 2</td>
  </tr>
</table>

Agregando atributos a la etiqueta `<th>`

La etiqueta <th> admite varios atributos para ayudar a formatear y estructurar la celda de encabezado.

Abbr: Se utiliza para definir la abreviatura corta del contenido de la celda.
Colspan: Especifica el número de columnas que abarca la celda.
Rowspan: Especifica el número de filas que abarca.
Scope: Especifica las celdas a las que se refiere la etiqueta de encabezado.
Header: Se utiliza para especificar una o más celdas de encabezado relacionadas con una celda.

Por ejemplo, el siguiente código creará una celda de encabezado con los atributos "abbr" y "colspan":

<table>
  <tr>
    <th abbr="Encabezado 1" colspan="2">Encabezado 1 &amp; Encabezado 2</th>
  </tr>
  <tr>
    <td>Fil 1, Columna 1</td>
    <td>Fil 1, Columna 2</td>
  </tr>
  <tr>
    <td>Fil 2, Columna 1</td>
    <td>Fil 2, Columna 2</td>
  </tr>
</table>

Resumen

En este laboratorio paso a paso, has aprendido cómo crear una celda de encabezado en una tabla HTML utilizando la etiqueta <th>. Los encabezados de tabla HTML son importantes para organizar los datos de manera estructurada. Utilizando la etiqueta th, puedes crear una celda de encabezado y controlar su formato y atributos.

Celda de encabezado de tabla HTML