Tutorial: Tablas en HTML

A petición de un lector y por iniciativa propia debido a que determinadas personas se están dedicando a copiar nuestro código fuente, en especial el diseño de la visualización de los fondos de pantalla me voy a dedicar en este articulo a diversos ejemplos de cómo crear una tabla original y divertida que cualquiera será capaz de adoptar el modelo para elaborar el suyo propio.

En principio la estructura de un tabla en HTML es bien simple, tener en cuenta que en blogger a la hora de escribir el código de la tabla deberéis hacerlo de manera continua, es decir sin ningún salto de línea. La estructura es la siguiente:<table><tr><td>Contenido</td></tr></table>Siendo la etiqueta <table> la que formatea el inicio de la tabla, <tr> la que crea una fila y por último <td> la que crea una celda.

Aquí diversos ejemplos:<table><tr><td>Celda 1</td><td>Celda 2</td></tr></table>

Celda 1

Celda 2

<table><tr><td>Celda 1</td><td>Celda 2</td></tr><tr><td>Celda 3</td><td>Celda 4</td></tr></table>

Celda 1	Celda 2
Celda 3	Celda 4

<table><tr><td>Celda 1</td><td>Celda 2</td><td>Celda 3</td></tr><tr><td>Celda 4</td><td>Celda 5</td><td>Celda 6</td></tr></table>

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Con estos ejemplos podéis haceros un idea de cómo se organiza cada elemento, es decir por cada nueva etiqueta <tr> se crea una fila y por cada <td> se crea una celda.

Lo siguiente es añadirle un estilo dado que este tipo de tablas son un poco sosas. Así que explico las distintas propiedades que podemos usar.

Dentro de la etiqueta <table>, <td> y <tr> podemos agregar lo siguiente:

cellspacing = "X" distancia entre el borde y el contenido de las celdas.
cellpadding = "X" distancia entre las celdas.
colspan = "X" número de celdas que quieras unir.

A su vez dentro del atributo "style" podemos configurar estas variables:

border = X px estilo #color; (estilos: none, solid, dotted, dashed, double,ridge, groove, inset, outset)
background-color = #color; color de fondo.
align = left,center,right;
width = X px; ancho de la tabla.
Height = X px; alto.

Con esto tenemos suficiente para crear diseños curiosos sin necesidad de saber más por lo que a continuación incluyo distintos diseños utilizando los parámetros anteriores:

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6
Celda 7	Celda 8	Celda 9

<table style="border: 3px dashed rgb(128, 153, 210); float: left; background-color: rgb(182, 204, 226); width: 259px; height: 236px;" align="center" cellpadding="1" cellspacing="5"><tbody><tr><td style="border: 1px dashed rgb(36, 46, 70); background-color: rgb(101, 95, 155); text-align: center;">Celda 1<br /></td><td style="border: 1px dashed rgb(36, 46, 70); background-color: rgb(101, 95, 155); text-align: center;">Celda 2<br /></td><td style="border: 1px dashed rgb(36, 46, 70); background-color: rgb(101, 95, 155); text-align: center;">Celda 3<br /></td><br /></tr><tr><td style="border: 1px dashed rgb(36, 46, 70); background-color: rgb(101, 95, 155); text-align: center;">Celda 4<br /></td><td style="border: 1px dashed rgb(36, 46, 70); text-align: center;">Celda 5<br /></td><td style="border: 1px dashed rgb(36, 46, 70); text-align: center;">Celda 6<br /></td></tr><tr><td style="border: 1px dashed rgb(36, 46, 70); background-color: rgb(101, 95, 155); text-align: center;">Celda 7<br /></td><td style="border: 1px dashed rgb(36, 46, 70); text-align: center;">Celda 8<br /></td><td style="border: 1px dashed rgb(36, 46, 70); text-align: center;">Celda 9<br /></td></tr></tbody></table>

Cabecera
Celda 1	Celda 2	Celda 3	Celda 4
Celda 5	Celda 6	Celda 7	Celda 8

<table style="border: 5px outset rgb(50, 102, 49); background-color: rgb(107, 166, 100); width: 302px; height: 236px;" align="center" cellpadding="1" cellspacing="5"><tbody><tr align="center"><td colspan="4" style="background-color: rgb(201, 239, 196);">Cabecera<br /></td></tr><tr><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 1<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 2<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 3<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 4<br /></td><br /></tr><tr><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 5<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 6<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 7<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 8<br /></td></tr></tbody></table>

Cabecera
Celda 1	Celda 2	Celda 3	Celda 4	Celda 5	Celda 6	Celda 7	Celda 8
Pie

<table style="border: 5px double rgb(219, 182, 182); background-color: rgb(38, 18, 30); width: 503px; height: 171px;" align="center" cellpadding="1" cellspacing="5"><tbody><tr align="center"><td colspan="9" style="background-color: rgb(181, 110, 110);">Cabecera<br /></td></tr><tr><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 1<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 2<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 3<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 4<br /></td><br /><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 5<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 6<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 7<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 8<br /></td></tr><tr align="center"><td colspan="9" style="background-color: rgb(181, 110, 110);">Pie</td></tr></tbody></table>Para mas información podeis visitar los siguientes enlaces:

Tablas-Vagabundia parte (I) y (II)
Tutorial: Tablas en HTML
Tablas en HTML y atributos
Introducción a las tablas en HTML