Con HTML5, las tablas se modificaron un poco en términos de estructura. Echa un vistazo en el siguiente código:

HTML5 Tables

Si quieres jugar con el código, abre el archivo llamado table_html5.html que está en la carpeta extra_files/tablas que vino con este curso. (Si aún no tienes los archivos extra, la ubicación de la descarga está aquí, bajo el título Diseño Web - Nuevo Curso : Descargar los archivos extra necesarios para este curso (No necesitas las descargas para el viejo curso.)

Los datos de la tabla en sí son los mismos que los de la anterior. Pero noten la nueva tabla las etiquetas que hemos usado:

THEAD
TFOOT
TBODY

En la mesa es donde se ponen los datos para la primera fila de la tabla. Luego añades las etiquetas TR y TD. Extrañamente, las etiquetas TFOOT vienen después de THEAD y antes de TBODY. Si pones las etiquetas TFOOT después de TBODY tu mesa puede no funcionar en algunos navegadores.

El TFOOT no tiene etiquetas TR, sólo un TD. Hemos añadido un atributo COLSPAN aquí, ya que el CSS no hace muy bien la distribución de columnas o filas, o no la hace en absoluto.

Las etiquetas de TBODY contienen la mayoría de las etiquetas de TR y TD.

Si miras la etiqueta de la mesa en la parte superior verás que ya no tiene algún atributo. Es sólo esto:

Anteriormente, teníamos esto:

TABLA Frontera = "1" CellPadding = "10" CellSpacing = "2">

Todos estos eran atributos de formato que añadimos a la etiqueta TABLA. Ahora, podemos hacer esto con el CSS.

Abrir el archivo llamado html5_tables.css que está en los extra_files/css carpeta. Echa un vistazo al código CSS:

HTML5 Tables

Con la nueva estructura de nuestra tabla, podemos usar los selectores HTML (TABLA, THEAD, TFOOT, etc.). El selector de TABLA se utiliza para establecer la frontera, la frontera el espaciado, el color de fondo, la alineación del texto y la familia de fuentes. Esto nos permite para deshacerse de todos esos atributos de la tabla anterior.

Fíjense también que tenemos selectores separados de THEAD y TD, y uno conjunto: THEAD, TD. Podríamos haber puesto el relleno en el selector de TABLA, pero hemos hecho es así sólo para mostrarte que puedes establecer reglas para más de un HTML en la misma línea. Separa cada una con una coma.

El único selector de clase está en la parte inferior, LeftCol. Esto se aplica sólo a esas células que necesitan ser dejadas alineadas y hechas en negrita.

Ejercicio
Juega con el CSS y mira lo que le pasa a la mesa cuando la recargas.

En la siguiente sección vamos a explorar las formas HTML.

Atributos de la tabla | Etiquetas de la forma