Está mas que claro, que usar tablas para distribuir, organizar, maquetar un sitio es algo pasado de moda.
Para eso están los divs y el css que son mucho más molones y puedes hacer formas imposibles, recuerda los layouts que comentábamos hace unos meses.
Pero eso no significa que no podamos poner ninguna tabla en nuestra web, no os asustéis porque los diseñadores/maquetadores vayan chillando por medio mundo: ¡Muerte a las tablas! Sólo les deseamos la muerte a las tablas mal formadas, a las tablas no accesibles y a las tablas que no son usadas cómo tal.
Y es que si queremos mostrar datos de manera tabular, ¡Qué mejor que una tabla!
Para esas veces, en las que sí podemos incluir una tabla en nuestra web, vamos a crearlas de manera que sean accesibles y válidas para w3c.
Un ejemplo de estructura simple de una tabla sería el siguiente:
<table> <tr> <td></td> </tr> </table>
Donde <tr> (table row) corresponde con una fila (row), y <td> (table data cell) con una celda (data cell). El número de celdas dentro de una fila, corresponderá con el numero de columnas de nuestra tabla.
Sabiendo esto, vamos a definir mejor nuestra tabla:
<table summary="Codigo de paises con color asociado.">
En la etiqueta <table> debemos indicar (si o si) el atributo summary, describiendo el contenido de la tabla.
<caption>ID de los paises RGB</caption>
<caption> nos sirve definir el titulo de la tabla.
<thead> <tr> <th>ID</th> <th>Pais</th> <th>Color</th> </tr> </thead>
<thead> contiene las cabeceras de la tabla.
<th> corresponde a la celda ubicada en la cabecera de la página. Viene bien ponerle esta etiqueta ya que luego nos será más facil aplicarle un estilo específico al titulo y no a todas las celdas.
<tfoot> <tr> <th>ID</th> <th>Pais</th> <th>Color</th> </tr> </tfoot>
<tfoot> contiene el pie de la tabla, esta etiqueta la tenemos que poner antes que <tbody> aunque se mostrará después, si no lo hacemos así, no será válida (es un poco raro, si).
<tbody> <tr> <td>ES</td> <td>España</td> <td>#990000</td> </tr> <tr> <td>FR</td> <td>Francia</td> <td rowspan="2">#000099</td> </tr> <tr> <td>IT</td> <td>Italia</td> </tr> </tbody>
<tbody> contiene el cuerpo de la tabla, cuando una tabla solo tiene un cuerpo (un grupo de datos, por asi decirlo) se puede omitir y se interpreta como cuerpo, todo lo que no sea cabecera.
En las etiquetas <th> y <td> tenemos algunos atributos para aplicar:
- abbr: contiene la descripcion del contenido de la celda.
- headers: contiene la id (si la hemos especificado) de la(s) celda(s) que actúa como cabecera de esta.
- scope: puede ser col o row, indica si es cabecera de una columna de celdas, o de una fila, no es obligatorio definirlo.
- colspan: especifica el numero de columnas que ocupa esta celda.
- rowspan: especifica las filas que ocupa esta celda.
Los demás atributos, como pueden ser el alto (height), el borde (border), la alineación (valign), etc, debemos definirlos aplicando estilos (css).
Y con esto ya deberíamos ser capaces de crear una tabla bien chula 
