Tablas

Las tablas son útiles para presentar relaciones complejas organizando el contenido en celdas. Son especialmente eficaces para mostrar datos tabulares como horarios de transporte, calendarios, compensaciones salariales, resultados de partidos, transacciones financieras, menús de restaurantes, listas de precios y otra información que encaja de forma natural en un formato de tabla, similar a Google Sheets.

Para crear tablas en HTML, utilizamos los siguientes elementos principales:

<table> - define una tabla en una página web;
<tr> - define una fila dentro de la tabla;
<th> - define una celda de encabezado dentro de una fila. Las celdas de encabezado suelen estar en negrita y centradas;
<td> - define una celda de datos estándar dentro de una fila.

Veamos los pasos para crear una tabla para un menú:

Paso 1: Configurar la estructura HTML

Empieza por crear la estructura HTML básica para tu página:

Paso 2: Definir la tabla

Dentro del elemento <body>, añade la tag <table> para definir la tabla:

Paso 3: Añadir un título a la tabla (opcional)

Si queremos dar un título a la tabla, podemos utilizar la tag <caption>:

Paso 4: Crear encabezados de tabla

A continuación, añadimos los encabezados (headers) de la tabla dentro del elemento <thead>. Cada cabecera se define utilizando la tag <th>:

Paso 5: Rellenar la tabla con datos

Utilizamos el elemento <tbody> para encerrar las filas de la tabla y las tags <td> para definir las celdas que contienen los datos:

Código completo del sitio web:

Por favor, dedique un momento a examinar detenidamente todos los elementos para asegurarse de que su relación es evidente.

index

Nota

Por defecto, las tablas HTML no tienen un estilo visual específico. Para personalizar el aspecto de la tabla, podemos añadir estilos CSS en un archivo CSS independiente o dentro de una tag <style> en la sección <head> del archivo HTML.

1. ¿Cuál es el elemento HTML utilizado para definir una tabla en una página web?

2. ¿Qué elemento HTML se utiliza para definir una fila dentro de una tabla?

3. ¿Para qué sirve el elemento `<th>` en una tabla HTML?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 4. Capítulo 7