Tablas en HTML

En HTML, ¿cuándo usar Tablas y cuando no usarlas? A mi parecer, se generó un odio extraño hacia las tablas en html, y este odio creo yo, viene desde los IDEs visuales de paginas html en sus principios de la web como el FrontPage o el DreamWeaver, donde uno arrastraba controles sobre una 'hoja' y creaba una página web, pero el html que generaba por detrás era realmente desastroso. Porque era desastroso?, la realidad es que el IDE desconocía lo que intentábamos formar, solo agrupaba los elementos de forma tal que se vieran como lo quisiéramos y esto lo hacía creando tablas, entre muchas otras cosas, para poder estructurar la pagina.

Habría que pensarlo de otra manera, ni las tablas, ni los divs, ni los ul, ni cualquier otro contenedor sirve para cualquier cosa. Cada elemento fue creado con un propósito, el punto principal es entender cual es el propósito de cada uno y utilizarlo de esa manera.

Las tablas fueron creadas para visualizar grillas. Si vamos a diseñar la estructura de una página web el elemento table no es la respuesta, si vamos a mostrar una lista de elementos enumerados usamos un UL, si vamos a agurpar elementos usaremos un div, etc. pero si necesitamos mostrar una grilla, usamos un table.

El mejor ejemplo que se me ocurre en este momento es una factura. Supongamos que tenemos que mostrar una factura, la misma está compuesta por un Encabezado, Productos y Pie. El encabezado tiene la información del consumidor, no es una grilla por lo que utilizaremos otro contenedor, pero para el detalle de productos si tenemos una grilla de 4 columnas: Cantidad, Detalle de Producto, Precio unitario y Precio total. Eso si es una grilla y utilizar una tabla es la solución.

Algo a tener en cuenta en las tablas, es que pueden o no tener un encabezado y un pie también, lo que nos puede ayudar a aplicar estilos CSS.

Estructura simple de una tabla con header:

Cantidad	Detalle de Producto	Precio Unitario	Precio Total
1	Microprocesador Sempron 2.2 Ghz	200	200
2	Memorias RAM 4Gb	140	280

Donde vamos a tener Filas (TR) y Celdas (TD). También se puede encontrar el elemento TH y se utiliza para decirle al browser que esa celda es un header. Por lo que en la primer Fila TR si utilizamos el elemento TH para las celdas vamos a notar que algunos browsers van a identificarlo como un header automáticamente haciendo el texto con negrita.

De esta manera, utilizamos el control para crear una grilla, para lo que fue creado y al momento de darle estilos, vamos a notar fácilmente que es mucho más ordenado, por ejemplo:

table {

   width:600px;
   border-collapse:collapse;
   border:solid 1px silver;    
   font-family: Verdana;

}

table th {

   font-weight:bold;
   color: black;
   font-size:11pt;    
   border:solid 1px silver;
   background-color:#A9F5F2;
   text-align:center;
   padding:5px;

}

table tr td {

   color: Black;
   font-size:10pt;    
   border:solid 1px silver;
   background-color:#CEECF5;
   padding:3px;

}

table tr:hover td {

   background-color:#A9D0F5;
   cursor:pointer;

}

Hay mucho mas sobre tablas, pero mi objetivo es poder mostrar la facilidad que nos deja al momento de trabar con grillas y a no confundir, hablo de grillas, hay muchos tags mas en html, no todo es un table y depende que se intenta hacer el elemento a usar.

Pruebas en linea

Les dejo un jsFiddle para que vean el ejemplo en vivo y puedan hacer pruebas.