Contenido del Curso

HTML Definitivo

1. Comprensión del Desarrollo Web

Bienvenido a HTML y al Desarrollo Web ¿Qué es Internet?¿Cómo Funciona Internet?Comprensión de Cómo Funcionan los Sitios Web Explicación del Desarrollo Frontend y Backend

2. Etiquetas y Atributos HTML

Comprensión de las Etiquetas HTML Trabajando con Atributos HTML Comprensión de las Etiquetas Dobles y Simples en HTML Marcado y Formato de Texto en HTML Desafío: Crea el Primer Párrafo de Tu Página Web Desafío: Crea una Página Web de Presentación Personal Desafío: Diseñar una Página Web de Exhibición de Películas Uso de Enlaces y Botones en HTML Desafío: Crear Enlaces a Sitios Web Populares Validación de Tu Código HTML Según las Mejores Prácticas

3. Estructura del Documento HTML

Los Secretos Detrás de Páginas Web Bien Estructuradas Comprensión de la Estructura del Documento HTML El Papel del Encabezado del Documento Gestión del Flujo y la Disposición del Documento Desafío: Estructura Correctamente un Documento HTML Uso de Herramientas de Desarrollador para Inspección y Depuración de HTML

4. Trabajando con Medios y Tablas

Agregar Imágenes en HTML Desafío: Trabajar con Imágenes Trabajar con Imágenes Clicables, Leyendas y Optimización Comprensión de Gráficos Vectoriales y Rasterizados Incrustación de Audio y Video para Contenido Multimedia Enriquecido Desafío: Incrustar Audio y Video en HTML Creación y Estructuración de Tablas en HTML Desafío: Diseñar una Tabla HTML Funcional

5. Formularios HTML y Entrada de Usuario

Introducción a los Formularios HTML Fundamentos de la Creación de Formularios en HTML Uso de Etiquetas para Mejorar la Accesibilidad de Formularios Mejora de Formularios con Atributos de Entrada Exploración de los Diferentes Tipos de Entrada en HTML Desafío: Crear Formulario con Campos de Entrada y Etiquetas Trabajando con el Elemento Textarea para Entrada de Varias Líneas Uso del elemento select para menús desplegables Uso del elemento datalist para sugerencias de entrada predefinidas Agrupación de Elementos de Formulario para una Mejor Estructura

Creación y Estructuración de Tablas en HTML

Las tablas son útiles para presentar relaciones complejas organizando el contenido en celdas. Son especialmente efectivas 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 se adapta de forma natural a un formato de tabla, similar a Google Sheets.

Para crear tablas en HTML, utiliza 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

Comienza creando la estructura básica de HTML para tu página:

html

Paso 2: Definir la tabla

Dentro del elemento <body>, agregar la etiqueta <table> para definir la tabla:

html

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

Para proporcionar un título a la tabla, se puede utilizar la etiqueta <caption>:

html

Paso 4: Crear encabezados de tabla

A continuación, agregar los encabezados de la tabla dentro del elemento <thead>. Cada encabezado se define utilizando la etiqueta <th>:

html

Paso 5: Rellenar la tabla con datos

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

html

Código completo

Dedica un momento a examinar todos los elementos detenidamente para asegurarte de que su relación sea evidente.

index.html

index.css

Nota

De forma predeterminada, las tablas HTML no tienen un estilo visual específico. Para personalizar la apariencia de la tabla, agregue estilos CSS en un archivo CSS separado o dentro de una etiqueta <style> en la sección <head> del archivo HTML.

Sin embargo, no es necesario profundizar en CSS en esta etapa, ya que el enfoque actual es únicamente en HTML.

Si desea ver cómo se ve la tabla sin ningún estilo CSS, puede eliminar la línea 4: <link rel="stylesheet" href="index.css" />, que importa los estilos CSS.

Si desea aprender más sobre CSS, considere tomar el curso Fundamentos de CSS.

1. ¿Qué elemento HTML se utiliza para definir una tabla en una página web?

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

3. ¿Cuál es el propósito del elemento `<th>` en una tabla HTML?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 4. Capítulo 7