Contenido del Curso
HTML Definitivo
2. Tags y Atributos
HTML Definitivo
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.html
index.css
index.js
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.
¿Todo estuvo claro?
Contenido del Curso
HTML Definitivo
2. Tags y Atributos
HTML Definitivo
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.html
index.css
index.js
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.
¿Todo estuvo claro?
