Contenido del Curso
HTML Definitivo
HTML Definitivo
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?
¡Gracias por tus comentarios!
