Durante un buen tiemo las tablas fueron consideradas el enemigo de la Web. Ayudó el desprecio de los Estándares Web como Tableless (sin tablas) que despreciaban ese elemento HTML. No me gusta mucho el término Tableless, prefiero Layout CSS.

Las tablas fueron creadas para mostrar datos tabulares, pero como era una forma muy sencilla de montar la estructura de una página, fueron y soy aún muy utilizadas para el Layout. Desde hace algunos años no utilizo tablas para el Layout, en los cursos de edición visual de HTML, que aún ofrecen como recurso la creacion de layouts mediante tablas, advierto a mis alumnos que no usen estos recursos y estudien HTML y CSS para crear layout optimizados

Mi intención aquí es mostrar algunos recursos para tablas de datos tabulados. Existen pocos recursos dedicados a las tablas. Esos recursos mejoran la accesibilidad de las tablas.

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

Con eso tenemos dos filas con una etiqueta <tr> y dentro de esas filas tenemos dos celdas con una etiqueta <td>. Esas dos celdas formarán columnas.

Para visualizar la estructura de la tabla insertaremos el atributo border con valor 1. Ese atributo es solo para presentación y no debe de usarse. Pero como estamos conociendo el HTML lo vamos a usar, aunque más adelante lo quitaremos.

La primera línea de código sería así:

<table border="1">

Y nuestra tabla ser vería así:

DATOS 1 DATOS 2
DATOS 3 DATOS 4

Nota: Todas las etiquetas <td> deben tener algún contenido. Para dejarlas vacías podemo usar el caracter especial del espacio ( )

TAG CAPTION
La etiqueta <caption> como su nombre indica sirve para insertar un título a la tabla.

Vemos el código:

<table border="1">
 <caption>Nombre de la tabla</caption>
 <tr>
  <td>DATOS 1</td>
  <td>DATOS 2</td>
 </tr>
 <tr>
  <td>DATOS 3</td>
  <td>DATOS 4</td>
 </tr>
</table>

Resultado:

Nombre de la tabla
DATOS 1 DATOS 2
DATOS 3 DATOS 4

Por convención, el caption se sitúa en la parte superior de la tabla, pero puedes cambiar la posicion introduciendo el atributo align con los valores: left, right, bottom y top. Te estarás preguntando si eso no es presentación. También clasificado como presentacion, pero tristemente el CSS posee una propiedad caption-side que solo funciona en Firefox. Como el atributo align para el caption es válido en XHTML 1.1 no tenemos problemas de validación.

TAG TH
El tag <th> se utiliza para insertar un encabezado para las columnas y filas de la tabla. A pesar de que el tag </th><th> se inserta como una celda y se puede fijar la posicion correctamente, debemos usar el atributo scope para reforzar la declaración de su posición. El atributo scope recibe los valores ‘col’ para textos de columnas y ‘row’ para textos de filas.

<table border="1">
 <caption>Nombre de la tabla</caption>
  <tr>
  <th scope="col">COLUMNA 1</th>
  <th scope="col">COLUMNA 2</th>
 </tr>
 <tr>
  <td>DATOS 1</td>
  <td>DATOS 2</td>
 </tr>
 <tr>
  <td>DADOS 3</td>
  <td>DADOS 4</td>
 </tr>
>/table>

Resultado:

Nombre de la tabla
COLUNA 1 COLUNA 2
DADOS 1 DADOS 2
DADOS 3 DADOS 4

El contenido de los tags </th><th> por defecto se muestra en negrita y centrado.

TAGS THEAD TBODY y TFOOT
Los tags <thead>, <tbody> y <tfoot> sirven para optimizar la estructura de una tabla. Definen donde se mostrará un determinado bloque de elementos y su respectivo contenido.

<thead> - Cabecera de la tabla
<tfoot> - Pie de la tabla. Debe de insertarse antes del tag <tbody>
<tbody></tbody> - Todo el contenido de la tabla

<table border="1">
 <caption>Nombre de la tabla</caption>
 <thead>
  <tr>
   <th scope="col">COLUMNA 1</th>
   <th scope="col">COLUMNA 2</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th scope="col">PIE 1</th>
   <th scope="col">PIE 2</th>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>DATOS 1</td>
   <td>DATOS 2</td>
  </tr>
  <tr>
   <td>DATOS 3</td>
   <td>DATOS 4</td>
  </tr>
 </tbody>
</table>

Resultado:

Nombre de la tabla
COLUMNA 1 COLUMNA 2
PIE 1 PIE 2
DATOS 1 DATOS 2
DATOS 3 DATOS 4

Los tags <thead>, <tbody> y <tfoot> son ignorados por Netscape 4

Por defecto, el contenido de los tags <thead;> y <tfoot> deberían ser repetidos en todas las páginas que contengan datos de una tabla. Desafortunadamente, probamos esto en IE7 Beta 3, Firefox 1.5, Opera y Amaya (W3C) y sólo funcionó en Firefox. Puedes crear una página de prueba insertando varias filas dentro del tag <tbody> y usar el recurso de ‘Vista previa de Impresión’ de los navegadores.

Pero no dejes de usar los tags de estructura ya que los dispositivos de accesibilidad cada día mejoran su soporte a esas estructuras semánticas.

ATRIBUTOS
ATRIBUTOS COLSPAN y ROWSPAN

Los atributos colspan y rowspan se pueden utilizar para mezclar celdas, pero con buen sentido pues disminuyen la accesibilidad de una tabla por dejar el código un poco confuso para los dispositivos de accesibilidad.

<table border="1">
<caption>Nombre de la tabla</caption>
<tr>
<td colspan="2">Fila 1 con 2 columnas</td>
</tr>
<tr>
<td rowspan="2">Filas 2 y 3 con la Columna 1</td>
<td>Fila 2 Columna 2</td>
</tr>
<tr>
<td>Fila 3 Columna 2</td>
</tr>
<tr>
<td>Fila 4 Columna 1</td>
<td>Fila 4 Columna 2</td>
</tr>
</table>

Resultado:

Nombre de la tabla
Fila 1 con 2 columnas
Filas 2 y 3 con la Columna 1 Fila 2 Columna 2
Fila 3 Columna 2
Fila 4 Columna 1 Fila 4 Columna 2

ATRIBUTO SUMARY

El atributo Sumary es muy importante para navegadores no-visuales. Debe de ofrecer al usuario una breve descripción del contenido.

<table sumary = "Resumen del contenido de una tabla">

TABLA COMPLETA

Vemos abajo la estructura completa de una tabla:

Nombre de la tabla
COLUMNA 1 COLUMNA 2
PIE 1 PIE 2
DATOS 1 DATOS 2
DATOS 3 DATOS 4

Visto esto, solo nos queda decir que en la segunda parte del artículo utilizaremos CSS para alterar la presentación de la tabla.

Artículo Original: Tabelas Semânticamente Corretas (Portugués)