Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Tablas | Medios y Tablas
HTML Definitivo
course content

Contenido del Curso

HTML Definitivo

HTML Definitivo

1. Desarrollo Web
2. Tags y Atributos
3. Estructura del Documento
4. Medios y Tablas
5. Formularios

bookTablas

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.

html

index

css

index

js

index

copy

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?
¿Cuál es el elemento HTML utilizado para definir una tabla en una página web?

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

Selecciona la respuesta correcta

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

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

Selecciona la respuesta correcta

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

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

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 8
some-alt