Tablas HTML

 

 

 

Tablas html 1

 

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 tableetiqueta:

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 tretiqueta, y eso es lo único que podemos agregar a un tableelemento:

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 thetiqueta:

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 tdetiquetas, dentro de los demás trelementos:

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 colspanatributo: Fotos Porno y actrices porno

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 rowspanatributo:

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 thetiqueta dentro de la primera tretiqueta de la tabla.

Puede agregar una thetiqueta como el primer elemento dentro de una trque no sea el primero trde 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 tretiquetas 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 captionetiqueta que describa su contenido. Esa etiqueta debe colocarse inmediatamente después de la tableetiqueta 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:

  1. La etiqueta HTML `iframe`
  2. Cómo cargar una imagen en un lienzo HTML
  3. Cómo utilizar insertAdjacentHTML
  4. 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

 

Tablas html 1
Tablas html 1

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

 

 

Update cookies preferences