Siendo un poco justo con <table>, se ha diezmado bastante su personalidad en estos años de incesante impulso semántico. Esta fiel etiqueta ha sido degradado a no más poder por mucho tiempo, y vengo a su rescate.

Como he escrito muchas veces ya a lo largo de este sitio, las tablas son para contener datos tabulados. Sólo para eso, esa información desagradable que suelen acompañar a los gráficos, esos nombres y números que a nadie le gusta. Para eso está <table>, para ordenar esos datos y nada más. Y bueno, ahora que ya tiene su función, aprendamos a utilizarlo bien.

<table>
     <tr>
          <td>Nombre</td>
          <td>Edad</td>
     </tr>
     <tr>
          <td>Tulio</td>
          <td>36</td>
     </tr>
     <tr>
          <td>Patana</td>
          <td>15</td>
     </tr>
</table>

Ver ejemplo 1

Una simple tabla que contiene valores cualesquiera. Ahora, le daremos sentido a sus etiquetas.

<th>

Table Header Cell, una celda de título de una tabla. La utilizamos cuando tenemos el título de una fila o columna, y tiene propiedades por defecto, por ejemplo, su contenido se despliega en bold.

Si la aplicamos a nuestra tabla básica de ejemplo, sería de la siguiente manera:

<table>
     <tr>
          <th>Nombre</th>
          <th>Edad</th>
     </tr>
     <tr>
          <td>Tulio</td>
          <td>36</td>
     </tr>
     <tr>
          <td>Patana</td>
          <td>15</td>
     </tr>
</table>

Ver ejemplo 2

<caption>

Esta etiqueta le da un título a la tabla, como un <legend> lo es para su <fieldset>.

<table>
     <caption>Tabla de edades</caption>
     <tr>
          <th>Nombre</th>
          <th>Edad</th>
     </tr>
     <tr>
          <td>Tulio</td>
          <td>36</td>
     </tr>
     <tr>
          <td>Patana</td>
          <td>15</td>
     </tr>
</table>

summary

Atributo de la etiqueta <table>, especial para lectores de pantalla (no-videntes). Aquí, nos explayamos un poco más que en <caption>, explicando extensamente de qué se trata nuestra tabla.

<table summary="Tabla donde se muestran nombres de personajes de un programa infantil junto con sus edades hipot&eacute;ticas">
     <caption>Tabla de edades</caption>
     <tr>
          <th>Nombre</th>
          <th>Edad</th>
     </tr>
     <tr>
          <td>Tulio</td>
          <td>36</td>
     </tr>
     <tr>
          <td>Patana</td>
          <td>15</td>
     </tr>
</table>

Ver ejemplo 3

<thead> <tfoot> <tbody>

Filas se pueden agrupar en un encabezado (<thead>), un cuerpo de contenido (<tbody>) y un pie (<tfoot>), pudiendo cada grupo contener una o más filas. Con esto se hace más fácil darle estilos a las secciones de nuestra tabla, así nos ahorramos classes en cada celda. Otra ventaja es en la impresión, si ésta es muy larga en Firefox por ejemplo se imprimirán el encabezado y el pie en cada hoja (independiente si el cuerpo es muy extenso y no cabe en la impresión).

<table summary="Tabla donde se muestras nombres de personajes de un programa infantil junto con sus edades hipot&eacute;ticas">
     <caption>Tabla de edades</caption>
     <thead>
          <tr>
               <th>Nombre</th>
               <th>Edad</th>
          </tr>
     </thead>
     <tfoot>
          <tr>
               <td>Bajada</td>
          </tr>
     </tfoot>
     <tbody>
          <tr>
               <td>Tulio</td>
               <td>36</td>
          </tr>
          <tr>
               <td>Patana</td>
               <td>15</td>
          </tr>
     </tbody>
</table>

Ver ejemplo 4

Un detalle es que si usan <thead> y <tfoot>, deben ir juntas y consecutivas, antes de <tbody>. Aún así, <tfoot> se mostrará debajo del contenido de <tbody>. Si no lo necesitan, ocúltenlo con su método favorito.

Está de más escribir que bgcolor, height, width, align y nowrap están obsoletos y no son soportados en HTML 4.01. Además, no se recomienda el uso de background dentro del HTML, para esto se utlizan hojas de estilos CSS.

Links:

• W3C Tables
• W3Schools: table tag