¡¡¡Bienvenido a mi pesadilla!!!
Warcraft 2: Beyond the Dark Portal
Grom Hellscream, héroe orco
Las tablas son el mecanismo que nos proporciona XHTML para presentar información tabulada, como horarios o los resultados de la quiniela. Son un poco engorrosas de utilizar, pero a veces son necesarias, así que ¡allá vamos!
Una tabla básica
Las principales etiquetas que disponemos para crear una tabla son estas:
- <table> : crea la tabla
- <caption> : pone título a la tabla
- <tr>: crea una fila
- <td>: crea una celda
- <th>: crea una celda de encabezamiento
Se entiende mejor con un ejemplo. Es muy conveniente utilizar bien los sangrados, ya que hay que tener mucho cuidado al cerrar las etiquetas <tr>, <td> y <th>. Aquí tenemos una tabla de 2x2:
<table>
<caption>Videojuegos</caption>
<tr>
<th>Título</th>
<th>Género</th>
</tr>
<tr>
<td>Sonic</td>
<td>Plataformas</td>
</tr>
</table>
Daría como resultado algo parecido a esto:
| Título | Género |
|---|---|
| Sonic | Plataformas |
El método es siempre el mismo. Por cada fila que queramos, abrimos una etiqueta <tr> e insertamos allí las celdas que correspondan. Dentro de cada celda podemos meter prácticamente cualquier cosa, pero debemos tener siempre en mente que el objetivo de las tablas es tabular información.
Atributos de table
La etiqueta <table> dispone de una serie de atributos1 que nos permiten modificar su borde y los márgenes de las celdas.
Para cambiar el tamaño del borde de la tabla, usamos border con un valor en píxeles. Si no indicamos nada, los navegadores suelen tomar como valor por defecto 1 ó 0. Si no queremos ningún borde, debemos utilizar border="0".
Si lo que queremos es cambiar la distancia entre una celda y otra, empleamos el atributo cellspacing con un valor en píxeles. Y para modificar la distancia del contenido de la celda a los bordes de esta, usamos cellpadding2. La diferencia entre cellspacing y cellpadding puede confundir al principio, así que lo mejor es verlo con un ejemplo3, modificando la tabla anterior (pruébalo):
1 Los viejos atributos que en HTML 4 nos permitían establecer dimensiones y colores han sido sustituidos por CSS.
2 Aunque, en mi opinión, es mejor usar CSS para esto.
3 Los valores est án muy exagerados para que se note la diferencia.
<table border="1" cellpadding="10" cellspacing="30"> <caption>Videojuegos</caption> <tr> <th>Título</th> <th>Género</th> </tr> <tr> <td>Sonic</td> <td>Plataformas</td> </tr> </table>
Expandir filas y columnas
Muchas veces necesitamos que una celda ocupe más de un espacio. Pongamos como ejemplo nuestra socorrida tabla de videojuegos. ¿Qué pasa si en vez de un género por cada juego, queremos meter dos? Podemos hacer que la celda de género ocupe dos columnas. Así:
<table> <caption>Videojuegos</caption> <tr> <th>Título</th> <th colspan ="2">Género</th> </tr> <tr> <td>Sim City </td> <td>Simulación </td> <td>Estrategia </td> </tr > </table>
| Título | Género | |
|---|---|---|
| Sim City | Simulación | Estrategia |
Como ves, para expandir una celda por varias columnas hemos utilizado el atributo colspan. Podemos hacer lo mismo con las filas, mediante rowspan. Vamos a hacer la misma tabla de antes, pero girada 90 grados:
<table> <tr> <th>Título</th> <td>Sim City</td> </tr> <tr> <th rowspan ="2">Géneros</th> <td>Simulación</td> </tr> <tr> <td>Estrategia</td> </tr> </table>
| Título | Sim City |
|---|---|
| Géneros | Simulación |
| Estrategia |
¿Que es un rollo esto de las tablas? Pues sí, pero no le des mucha importancia. La mayoría de editores de código (X)HTML, como el Quanta o el Homesite+, traen asistentes para crear tablas de forma rápida y sencilla.
¿Tablas para layouts? ¡Insensato!
A día de hoy, la mayoría de las páginas web están maquetadas usando tablas con border="0". Antes de la llegada del CSS, era totalmente imposible crear texto a columnas y, en definitiva, maquetas un sitio web4. Afortunadamente, CSS implementa capas, con lo que se puede configurar totalmente la apariencia y la colocación de cada elemento de la página mediante la hoja de estilos, quedando el código XHTML muy simple y sencillo.
¿Entonces por qué la gente sigue usando tablas? Porque muchos piensan que eso de las capas es algo muy complicado. ¡Mentira y gorda! Lo que pasa es que nadie nace enseñado, y aprender algo nuevo siempre da un poco de pereza. En la parte de CSS de este tutorial aprenderemos a crear varios tipos de diseño populares para así tumbar el mito de que las capas son difíciles.
4 Bueno, se podía apañar algo utilizando frames, pero era peor el remedio que la enfermedad.
Y dándole la vuelta a la tortilla... ¿Por qué no usar tablas? Pues porque las tablas no se han creado para maquetar y el WWW Consortium lo desaconseja. Además, en navegadores no visuales (de texto, para ciegos, o cualquier dispositivo que no sea un monitor) el resultado es totalmente imprevisible. ¿Quieres otra razón de peso? Las tablas dan más trabajo. El código queda más enrevesado, y si queremos renovar el diseño de nuestra página, hemos de cambiar prácticamente todo el código. Sin embargo, si hubiéramos usado un layout por capas, sólo tendríamos que modificar el archivo CSS. ¿Más razones? Al ser el código más complicado, las páginas son más pesadas y gastan más ancho de banda. Además, tardan más en cargar, ya que hasta que no se carga todo lo que hay en la tabla, no se muestran los resultados parciales.
El futuro es XHTML y todos los sitios web importantes han rediseñado su layout con capas. Así que te animo a que cumplas los estándares y no uses las tablas para maquetar6 :)
6En la web de Steal these buttons! (http://gtmcknight.com/buttons/) hay botoncitos muy cucos para mostrar al mundo que formas parte del Clan de Paladines del CSS.
Información adicional
Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)
Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.