Tablas porque te quiero

23/Oct/2007 165

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. Yqtvan [#]

    stromectol 0.1 – stromectol 6mg stromectol buy

  2. Izegqm [#]

    best price generic viagra online – female viagra canadian pharmacy viagra shop

  3. Yntwkj [#]

    average cost of viagra in canada – us over the counter viagra viagra 4 sale

  4. KevinchaWn [#]

    doxycycline generic generic doxycycline – doxycycline 150 mg

  5. KevinchaWn [#]

    buy doxycycline for dogs generic doxycycline – doxycycline generic

  6. Imkqdr [#]

    cheapest cialis online – discount generic cialis online cialis purchase online uk

  7. Qbdxsv [#]

    where to buy cialis without prescription – where to buy cialis online in australia tadalafil in mexico

  8. KevinchaWn [#]

    neurontin 100mg tab neurontin without prescription – neurontin 200 mg tablets

  9. Elvia [#]

    Hello would you mind stating which blog platform you’re working with?
    I’m planning to start my own blog soon but I’m having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your layout seems different then most blogs and
    I’m looking for something completely unique. P.S My apologies for getting off-topic but I had
    to ask!

  10. KevinchaWn [#]

    buy doxycycline online without prescription doxycycline 100 mg – doxy 200

  11. jasa sablon satuan [#]

    We’re ɑ group of volunteers and starting a new scheme in our community.

    Your website offeгed us with vаlսable innformɑtion to
    ԝork on. You’ve done a fоrmidable job and our entirе community will be thankfսⅼ to you.

    Here is my homepage; jasa sablon satuan

  12. KevinchaWn [#]

    doxycycline 100mg capsules buy doxycycline online – doxylin

  13. Kijcju [#]

    can you buy prednisone over the counter in mexico – purchase prednisone from india buy prednisone without a prescription

  14. Kepqre [#]

    prednisone over the counter australia – prednisone over the counter prednisone 2.5

  15. KevinchaWn [#]

    neurontin 100mg neurontin – buy neurontin canada

Deja tu Comentario

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

CSSLab