Las tablas se introdujeron en el HTML como una forma de hacer que los datos textuales parezcan más presentables en la pantalla. Cosas como las estadísticas podrían ser presentadas en filas y columnas ordenadas, haciendo que sean más fáciles de leer.

Las tablas también se pueden utilizar para el diseño de páginas web, pero la práctica ahora está mal vista sobre. Algunas personas incluso tienen un odio patológico por los diseños que usan tablas. Sin embargo, no dejes que esto te desanime. Usar tablas para diseños puede ser realmente más fácil que usar el CSS! Aunque no usaremos tablas para el diseño de páginas web, sino simplemente para presentar datos tabulares.

(NOTA: Toda nuestra página web de Home and Learn utiliza tablas para el diseño. Esto se debe a que se inició en 2002. Podríamos, por supuesto, cambiar a diseños CSS, pero como es un sitio tan grande que llevaría muchos meses de trabajo y cuesta una fortuna. Y muy pocas personas notarían la diferencia!)

Primero, crearemos una tabla HTML básica. Esto funcionará en todas las versiones de HTML, y no sólo la versión 5. Aquí está la tabla básica que diseñaremos.

La tabla presenta información sobre el soporte de cada navegador para la versión CSS 3. Desde la tabla, es fácil ver que las animaciones CSS sólo funcionan en Chrome y Safari (las últimas versiones del navegador aquí son Firefox 10 y superiores, Internet Explorador 9, Cromo 10, Safari 5, y Opera 11.1).

Más tarde crearemos otra tabla que utilice HTML5 y CSS3.

Las etiquetas de la mesa

Para crear una tabla es necesario utilizar las siguientes etiquetas de tabla básicas: TABLA, TR, TD. Están dispuestos así:

...y la tabla... ...y el de los niños... ...y la de los niños... ...y la de los niños...

Las etiquetas de la mesa vienen en pares. Para montar la mesa, se utiliza la etiqueta TABLA. Allí es una etiqueta de inicio y final. Entre estas dos etiquetas se encuentra la tabla Etiquetas de fila ...y que no se puede hacer nada más... Para cada fila de tu mesa, necesitas al menos una mesa Etiqueta de datos... Las etiquetas de datos de la tabla representan las celdas en cada fila. En el ejemplo de la foto de arriba, tenemos una tabla con cuatro filas. En cada una de ellas tenemos una propiedad CSS seguida de 5 celdas para la información del navegador. Así que cada La fila de nuestra mesa tiene seis celdas. Para una fila individual, el código ...se ven así:

...y la tabla... ...y el de los niños... ...y la de los niños... ...y la de los niños... ...y la de los niños... ...y la de los niños... ...y la de los niños... ...y la de los niños... ...y la de los niños...

Ese código significa poner una mesa con una fila, y poner seis celdas en la fila.

La información que quieres que la gente vea va entre las dos etiquetas TD:

...y la tabla... ...y el de los niños... Datos de la célula 1</TDD;
Datos de la célula 2</TDD&
Datos de la célula 3</TDD;
...Cell 4 Data</TDD&
Datos de la célula 5</TDD;
Datos de la célula 6</TDD;
...y la de los niños...

También puedes añadir una etiqueta opcional de PIEZA, después del par de etiquetas de MESA:

<CAPTION ]; Soporte de Navegador CSS3 (último navegador versiones) </CAPTION >

Tabla de Atributos

La etiqueta TABLA viene con atributos opcionales que puedes usar:

Align
Border
Bgcolor
Cellpadding
Espacios celulares
Altura
Anchura

(También hay Marco, Reglas y Resumen, pero no vamos a discutir esto.)

La tabla de nuestra imagen tenía un borde de 1 píxel. El relleno de la celda era de 10 y el espacio entre celdas era de 2. También centramos nuestra mesa. El código de la etiqueta de la tabla era, por lo tanto, esto:

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

No especificamos un ancho, ya que el valor por defecto es la longitud de tu texto más cualquier bordes, acolchado y espaciado. El color por defecto es ninguno. Como todos los colores, sin embargo, puede tomar un valor como "Rojo", o un color HEX/RGB.

El acolchado de la célula, por cierto, es el espacio entre el texto y los bordes de la célula; el espacio entre células es la distancia entre cada célula y su vecina.

Altura y anchura de la fila

Puedes hacer cambios en la altura y anchura no sólo de toda la mesa, sino a cada célula individual, o fila de células. Sólo hay que añadir los atributos de anchura y altura a la célula TR o TD. Así:

...y la tabla... TR Altura = 50 Anchura = 100... Datos de la célula 1</TDD;
Datos de la célula 2</TDD&
Datos de la célula 3</TDD;
...Cell 4 Data</TDD&
Datos de la célula 5</TDD;
Datos de la célula 6</TDD;
...y la de los niños...

Puedes agregar los atributos de altura y anchura a las celdas individuales de TD, también, pero los resultados son a menudo erráticos. Si quieres una célula grande junto a células más pequeñas, se utilizan las etiquetas ROWSPAN y COLSPAN. (etiqueta_1) En la próxima lección, aprenderás sobre la distribución de filas y columnas.

| Fila y Col span