Descubra los conceptos básicos para trabajar con tablas HTML
En los primeros días de la web, las tablas eran una parte muy importante a la hora de crear diseños.
Más tarde, fueron reemplazadas por CSS y sus capacidades de diseño, y hoy contamos con herramientas poderosas como CSS Flexbox y CSS Grid para crear diseños. ¡Las tablas ahora se usan solo para, adivinen qué, crear tablas!
La tableetiqueta
Defina una tabla utilizando la table
etiqueta:
table/table
Dentro de la tabla definiremos los datos. Razonamos en términos de filas, lo que significa que agregamos filas a una tabla (sin columnas). Definiremos columnas dentro de una fila.
Filas
Se agrega una fila usando la tr
etiqueta, y eso es lo único que podemos agregar a un table
elemento:
table tr/tr tr/tr tr/tr/table
Esta es una tabla con 3 filas.
La primera fila puede asumir el papel de encabezado.
Encabezados de columnas
El encabezado de la tabla contiene el nombre de una columna, normalmente en negro.
Piense en un documento de Excel o de Google Sheets. El A-B-C-D...
encabezado superior.
Definimos el encabezado usando la th
etiqueta:
table tr thColumn 1/th thColumn 2/th thColumn 3/th /tr tr/tr tr/tr/table
El contenido de la tabla
El contenido de la tabla se define mediante td
etiquetas, dentro de los demás tr
elementos:
table tr thColumn 1/th thColumn 2/th thColumn 3/th /tr tr tdRow 1 Column 1/td tdRow 1 Column 2/td tdRow 1 Column 3/td /tr tr tdRow 2 Column 1/td tdRow 2 Column 2/td tdRow 2 Column 3/td /tr/table
Así es como lo representan los navegadores, si no agrega ningún estilo CSS:
Añadiendo este CSS:
th, td { padding: 10px; border: 1px solid #333;}
hace que la mesa parezca más una mesa adecuada:
Abarcar columnas y filas
Una fila puede decidir abarcar 2 o más columnas, utilizando el colspan
atributo: Tostadora de pan
table tr thColumn 1/th thColumn 2/th thColumn 3/th /tr tr td colspan="2"Row 1 Columns 1-2/td tdRow 1 Column 3/td /tr tr td colspan="3"Row 2 Columns 1-3/td /tr/table
O puede abarcar 2 o más filas, utilizando el rowspan
atributo:
table tr thColumn 1/th thColumn 2/th thColumn 3/th /tr tr td colspan="2" rowspan="2"Rows 1-2 Columns 1-2/td tdRow 1 Column 3/td /tr tr tdRow 2 Column 3/td /tr/table
Encabezados de fila
Antes expliqué cómo puedes tener encabezados de columnas, usando la th
etiqueta dentro de la primera tr
etiqueta de la tabla.
Puede agregar una th
etiqueta como el primer elemento dentro de una tr
que no sea el primero tr
de la tabla, para tener encabezados de fila:
table tr th/th thColumn 2/th thColumn 3/th /tr tr thRow 1/th tdCol 2/td tdCol 3/td /tr tr thRow 2/th tdCol 2/td tdCol 3/td /tr/table
Más etiquetas para organizar la mesa
Puedes agregar 3 etiquetas más a una tabla para tenerla más organizada.
Esto es mejor cuando se utilizan tablas grandes y también para definir correctamente un encabezado y un pie de página.
Esas etiquetas son
thead
tbody
tfoot
Envuelven las tr
etiquetas para definir claramente las distintas secciones de la tabla. A continuación, se muestra un ejemplo de uso:
table thead tr th/th thColumn 2/th thColumn 3/th /tr /thead tbody tr thRow 1/th tdCol 2/td tdCol 3/td /tr tr thRow 2/th tdCol 2/td tdCol 3/td /tr /tbody tfoot tr td/td tdFooter of Col 1/td tdFooter of Col 2/td /tr /tfoot/table
Título de la tabla
Una tabla debe tener una caption
etiqueta que describa su contenido. Esa etiqueta debe colocarse inmediatamente después de la table
etiqueta de apertura:
table captionDogs age/caption tr thDog/th thAge/th /tr tr tdRoger/td td7/td /tr/table
Tips de HTML
Tal vez te puede interesar:
- La etiqueta HTML `iframe`
- Cómo cargar una imagen en un lienzo HTML
- Cómo utilizar insertAdjacentHTML
- Cómo cambiar la URL de una imagen HTML en modo oscuro
Tablas HTML
La tableetiquetaFilasEncabezados de columnasEl contenido de la tablaAbarcar columnas y filasEncabezados de filaMás etiquetas para organizar la mesaTal vez te
programar
es
https://aprendeprogramando.es/static/images/programar-tablas-html-2095-0.jpg
2024-11-01
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente