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

Recomendado para ti

Bestseller No. 1
MUGFFINS Taza Informático (Mejor del Mundo) - Regalos Originales y Divertidos de Informática
  • TAZAS DE ALTA CALIDAD. Color blanco, 11 oz / 350 ml. Cada taza tiene una tinta increíble que las hace resistentes al lavavajillas y microondas. Después de regalarla, la taza perdurará como un recuerdo de tus compañeros de colegio, de trabajo, hijos, pareja, amigos… El mejor regalo para informáticos o estudiantes de informática.
  • LA TAZA, EL REGALO IDEAL MULTIUSOS. Una bonita, colorida y divertida taza, que también vale para muchas cosas. No es necesario comprar regalos caros para hacer sonreír a alguien. La taza pale para todo, aunque se llame “taza de café” o “taza desayuno”, pueden contener otros líquidos como té o incluso cerveza… Desayuna con tu informático y dile: Eres el mejor informático del mundo.
  • IDEA PERFECTA COMO REGALO GRACIOSO. ¿Buscando un regalo complejo? ¡No vale la pena! Aquí tienes un regalo simple, pero a la vez original, útil para aquella persona que también reirá a carcajadas con sus mensajes graciosos. Nuestras tazas son sinónimo de buen precio, mensajes alegres y calidad en el diseño. Ideal como regalo para cumpleaños o aniversarios: el regalo de informática perfecto para hombres.
  • PARA GENTE ESPECIAL de todo tipo, ya sea compañeros de trabajo (jefe, proveedores, clientes, empleado del mes…), familia (padres, madres, abuelos, tíos, hijos, primos, sobrinos…) para novios, pareja, marido / mujer, amigos etc. Esta taza de informático es perfecta para todo el mundo.
  • CAJA SUPER PROTEGIDA para que no re rompa, incluso si el mensajero juega a fútbol con ella. Con un diseño minimalista, hecha en cartón, es sencilla pero bonita para regalar. En pocas palabras, nuestras tazas para desayunar café o té son los mejores regalos divertidos en relación a la calidad, la originalidad y el precio. El mejor regalo que se le puede hacer a informáticos.
Bestseller No. 2
C50-E-11N3 CI3-7020U SYST
  • Muy conveniente
  • Peso del paquete: 2.64 kilograms
  • Producto de calidad
  • Fácil de usar