Las tablas malditas
La web semantica intenta dar signifado estructural al codigo de nuestro sitio, con el fin de mejorar la interoperabilidad entre los sistemas informaticos, sinque tenga que haber la intervención de un humano. Hay mucha terminología y palabras extrañas envueltas dentro de este concepto.
Pero para hacerlo más claro, pondré unos ejemplos.
En el viejo html escribiamos de esta forma el código para darle enfasis a una palabra.
Lorem <b>Ipsum</b> Dolor Sit Amet
Lo que se renderiza de la siguiente forma en el navegador:
Lorem Ipsum Dolor Sit Amet
En el actual xhtml escribimos de la siguiente manera
Lorem <strong>Ipsum</strong> Dolor Sit Amet
Lo que se renderiza como:
Lorem Ipsum Dolor Sit Amet
¿Cual es la diferencia?
En el primer ejemplo, solo es comprensible para un operador humano que a esa palabra se le hace enfásis.
Para un operador informatico, como por ejemplo un buscador, esto no es nada más que solo texto. Es decir, para él no tiene relevancia la palabra que marcamos dentro de <b> ya que es una etiqueta meramente presentacional, es decir no tiene otro objetivo más que decorar el texto al cual envuelve.
En el segundo ejemplo se usa <strong>, esto desplegará el mismo efecto visual que <b>, solo que para un buscador la pabra envuelta dentro de <strong> si tendrá relevancia, tiene significado semántico, el buscador sabrá que es importante.
Como estas etiquetas hay muchas que se quedaron obsoletas y fueron reemplazadas por otras.
Unos ejemplos
| Antes | Despues |
|---|---|
| font-face | se utiliza p, strong, em, blockquote, etc y se aplica estilo mediante CSS |
| center | se utiliza text-align: center; o margin: 0 auto en la hoja de estilo |
| br, img,etc | etiquetas sin cierre deben de cerrarse <br /> |
Así mismo uno de los cambios más significativos con el fin de conseguir una web semantica es el dejar de diseñar con tablas, para ello usamos contenedores <div>, las tablas las usamos para datos tabulares.
¿Porque es importante este cambio?
Al diseñar con tablas
- Aumenta el peso de tu archivo
- hace dificil a los buscadores accesar al contenido
- Entre mas celdas contenga más tarda en renderizarse el sitio
- Hace dificil y tediosa la tarea de modificar las páginas.
- Al ser una etiqueta destinada a desplegar datos tabulares, los buscadores la interpretarán como tal, por lo que la mayoría del contenido importante que incluyas en ella pasara desapercibido
Al diseñar con divs
- Aligeras el codigo de tu sitio
- Facilitas la tarea a los buscadores
- Es más facil mantener la estructura de tu sitio
- Las páginas se renderizan rápido
Esa es la razón de que no se usen tablas para diseñar un sitio, pero no significa que no deban usarse, se deben usar cuando sea requerido.
Nada me enferma más que la gente que desprecia las tablas como si usarlas fuera indebido. Los extremistas se empeñan en criticar cuanta tabla ven, aún y cuando esta esté siendo usada debidamente.
He visto a algunos personajes que preguntaban como hacer para crear una estructura similar a la siguiente con capas (divs)
| Frutas | Compras (KG) | Ventas (Kg) |
| Manzanas | 12 | 10 |
| Peras | 14 | 8 |
| Melones | 13 | 6 |
| Uvas | 10 | 9 |
Aunque es posible, no hay mejor camino que hacerlo con una tabla, además la tabla también se puede dotar de contenido sémantico.
Podemos empezar añadiendole un titulo a la tabla, para ello usamos la etiqueta <caption>
<table> <caption>Compra-Venta Frutas</caption> <tr><td>Frutas</td><td>Compras (KG)</td><td>Ventas (Kg)</td></tr> <tr><td>Manzanas</td><td>12</td><td>10</td></tr> <tr><td>Peras</td><td>14</td><td>8</td></tr> <tr><td>Melones</td><td>13</td><td>6</td></tr> <tr><td>Uvas</td><td>10</td><td>9</td></tr> </table>
Y queda de esta forma
| Frutas | Compras (KG) | Ventas (Kg) |
| Manzanas | 12 | 10 |
| Peras | 14 | 8 |
| Melones | 13 | 6 |
| Uvas | 10 | 9 |
Ahora usamos <thead> que sirve para definir el encabezado, que son las celdas ubicadas en la primera linea de la tabla. En este caso el encabezado abarca las celdas de Frutas, Compras y Ventas, las celdas dentro de <thead> deben de reemplazarse por <th>
<table> <caption>Compra-Venta Frutas</caption> <thead> <tr><th>Frutas</th><th>Compras (KG)</th><th>Ventas (Kg)</th></tr> </thead> <tr><td>Manzanas</td><td>12</td><td>10</td></tr> <tr><td>Peras</td><td>14</td><td>8</td></tr> <tr><td>Melones</td><td>13</td><td>6</td></tr> <tr><td>Uvas</td><td>10</td><td>9</td></tr> </table>
Lo que se visualiza como:
| Frutas | Compras (KG) | Ventas (Kg) |
|---|---|---|
| Manzanas | 12 | 10 |
| Peras | 14 | 8 |
| Melones | 13 | 6 |
| Uvas | 10 | 9 |
El cuerpo de la tabla debe especificarse dentro de <tbody>
<table> <caption>Compra-Venta Frutas</caption> <thead> <tr><th>Frutas</th><th>Compras (KG)</th><th>Ventas (Kg)</th></tr> </thead> <tbody> <tr><td>Manzanas</td><td>12</td><td>10</td></tr> <tr><td>Peras</td><td>14</td><td>8</td></tr> <tr><td>Melones</td><td>13</td><td>6</td></tr> <tr><td>Uvas</td><td>10</td><td>9</td></tr> </tbody> </table>
Y el final de la tabla se define con <tfoot>. (bueno el final de la tabla es </table>)
Cabe decir que este elemento debe de ir antes de la etiqueta <tbody>. De todas formas se visualizará al final de la tabla.
<table> <caption>Compra-Venta Frutas</caption> <thead> <tr><th>Frutas</th><th>Compras (KG)</th><th>Ventas (Kg)</th></tr> </thead> <tfoot> <tr><th>Total</th><td>49</td><td>33</td></tr> </tfoot> <tbody> <tr><td>Manzanas</td><td>12</td><td>10</td></tr> <tr><td>Peras</td><td>14</td><td>8</td></tr> <tr><td>Melones</td><td>13</td><td>6</td></tr> <tr><td>Uvas</td><td>10</td><td>9</td></tr> </tbody> </table>
He aquí el resultado final, nuestra tabla semantica.
| Frutas | Compras (KG) | Ventas (Kg) |
|---|---|---|
| Total | 49 | 33 |
| Manzanas | 12 | 10 |
| Peras | 14 | 8 |
| Melones | 13 | 6 |
| Uvas | 10 | 9 |
Hay ocasiones en que el diseño de un sitio es tan complejo que no hay otra forma de presentarlo que no sea con tablas, tal es el caso de los foros y los portales. Pero como ven, no hay razón para desprestigiar las tablas, las tablas son útiles si se saben usar y diseñar.