Tablas porque te quiero

23/oct/2007 6

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:

Comentarios

  1. pablo [#]

    Muy buena la explicacion! un par de preg. en el ejemplo 3 donde se ve lo que pusiste en el summary? y en el ejemplo 4 como “pusiste CSS Lab 2007″ porque en el tfoot pusiste “Bajada”

  2. Pablo Vivanco [#]

    Hola gente! , queria hacer una pregunta estube viendo los videos de csslab y me di cuenta que usaban IE 6 para mac , cuando yo solo conocia el IE 5 para mac , podrian de alguna forma liberar el instalador que lamentablemente no lo encuentro y es vital a la hora de hacer diseño web.

    saludos y garcias .

  3. fearlex [#]

    Muy bueno, esa de thead, tfoot and tbody fue bastante nueva para mi. No los usaba, por que no sabia su uso, y pense que estorbaban. Pues, mira, tres nuevas etiquetas a estilizar 😀

  4. Suriv [#]

    Yo utilizo las tablas solo para lo que fueron creadas, la de organizar datos enormes y tener un mejor acceso para la modificación.

  5. Barduck [#]

    Las preciadas tablas, me acuerdo cuando diseñaba la página completamente con ellas, que tiempos aquellos… (?)

  6. Sobre las tablas en HTLM [#]

    […] En CSSLAB dan un repaso al uso adecuado de las debaluadas tablas, y comentan que… 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. […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab