Cómo crear tablas en HTML5

Cómo crear tablas en HTML5: variables ficticias

El contenedor de marcado primario para las tablas en HTML es el elemento de la tabla. Es decir, utiliza la etiqueta de apertura

para indicar el comienzo de una tabla, y agrega la etiqueta de cierre
para finalizarla.

Además, los bloques de construcción básicos para datos de tabla en HTML son los elementos de fila de tabla ( ) y datos de tabla ( ), cuando una tabla consiste en tantas filas como elementos (más cualquier fila de encabezado o pie de página) y tantas columnas como la cantidad máxima de elementos en cualquier fila de tabla dada.

Entre estas etiquetas de apertura y cierre, puede encontrar los siguientes elementos en este orden muy interesante y prescrito (en otras palabras, obligatorio):

  • Elementos cero o uno para definir un título para una tabla (si hay uno de esos elementos, o no hay subtítulos para la tabla si está ausente). Si se usa, un elemento debe seguir inmediatamente después de la etiqueta de apertura

    .

  • Elementos del grupo cero o de una columna ( ) para definir agrupaciones de columnas para la tabla (si hay uno de esos elementos, o no hay agrupaciones de columnas si el elemento está ausente). Debe aparecer después de cualquier elemento, si hay uno presente, y antes de cualquiera de los siguientes elementos de la tabla.

  • Elementos del encabezado de cero o una tabla ( ) para definir la sección de encabezado de una tabla (si hay uno de esos elementos, o ninguna sección de encabezado de tabla si el elemento está ausente). A menudo, una primera fila de encabezado de tabla abarca todo el ancho de la tabla para identificar todo, y la primera fila de encabezado va seguida de una segunda fila de encabezados individuales para cada columna de la tabla.

  • Cero o más elementos del cuerpo de la tabla (

  • ) para identificar el contenido real de la tabla. Una tabla puede tener múltiples elementos , por lo que es inusual en HTML porque una tabla puede tener solo una cabeza pero múltiples cuerpos.

  • Pie de página cero o uno de tabla ( ) para proporcionar información para el final de una tabla. Los navegadores pueden usar,

  • , y decidir qué desplazarse (el cuerpo de la tabla, generalmente) y qué dejar siempre presente en la pantalla.

    El pie de tabla es un caso especial cuando se trata de dónde puede aparecer en la secuencia de marcado de tabla. Siempre puede aparecer último en la secuencia (como lo hace en esta lista), pero también puede aparecer inmediatamente después de cualquiera de estos elementos que están presentes (en este orden):, y.

    Sin embargo, aparecería antes de los elementos

    y . En este caso especial, tampoco puede aparecer al final de la tabla. ¡No permitido!

  • Si no hay ningún elemento

  • presente (que normalmente definiría el cuerpo de la tabla en una tabla con un encabezado de tabla definido y posiblemente también una sección de pie de página), el elemento fila de tabla ( ) para los datos que la tabla realmente presenta.Dentro de cada fila de la tabla hay tantos elementos de datos de tabla (
    ) como celdas en esa fila.

    Debido a que la sintaxis de la tabla HTML y el orden de marcado pueden ser difíciles y complicados, vale la pena más que de costumbre ejecutar todas las marcas de tabla mediante el Servicio de validación de marcado W3C para asegurarse de que sea correcto.

    La estructura de una tabla HTML es más fácil de entender si la representamos utilizando solo el etiquetado básico de contenedor, con algunos comentarios que iluminan con suerte, como por ejemplo:

     Estructura y secuencia de marcado de tabla básica  Tabla 6-1: Estructura y secuencia de marcado HTML 
    Elemento Descripción
    tabla contenedor de tabla general
    título texto de texto de tabla
    cuerpo contenedor de cuerpo de tabla
    pie contenedor de pie de página
    Elemento Descripción

    La figura muestra cómo un navegador muestra esta tabla. (La entrada border = "1" se agregó al elemento de la tabla para dibujar un contorno alrededor del borde de cada celda de la tabla, lo que hace que la tabla se destaque un poco mejor).


    Contáctenos: [email protected]