Damas y caballeros, niños y niñas de todas las edades, con ustedes el gran tutorial que todos estábamos esperando.
Hoy vamos a aprender un poco sobre las tablas, las capas y algunos conceptos adicionales que nos vendrá bien tener en cuenta más adelante.
Tablas y capas.
Claro que no es necesario que saques tu disfráz (para eso ya está la foto). Lo primero, lo más importante, lo que tienes que saber desde ya…¡Vamos, repítelo conmigo!: NO USARÉ TABLAS PARA DAR FORMATO A MI WEB A MENOS QUE TENGA DATOS TABULARES EN ELLA.
Para cada caso hay una cosa y viceversa, y es por ello que repetiremos esta frase a lo largo de este artículo.
Una tabla nos sirve para poder disponer información de forma, ejem… tabular, es decir, arreglarla de tal manera que se distribuya en filas y columnas. Sí, exactamente, como ese programa de esa compañía que hace hojas de cálculo. Pues bien, resulta que esas tablas tienen una serie de características que resultan interesantes a la hora de disponer de esa información, puesto que, y en ello radica su importancia, los elementos listados comparten una serie de características que permiten que ya sea por filas o columnas pongan la información de manera más legible.
Imagen autoexplicativa
Una tabla se delimita con la etiqueta <table> y dentro de ella encontrarás una <caption> explicativa, un <thead> o encabezado y un <tbody> o cuerpo, que te permitirán disponer <tr> o filas que llenarás con <th> para el caso de las celdas del encabezado y <td> para las celdas del cuerpo de la tabla, así:
<table>
<caption> Esta tabla es un ejemplo </caption>
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato C1F1</td>
<td>Dato C2F1</td>
</tr>
<tr>
<td>Dato C1F2</td>
<td>Dato C2F2</td>
</tr>
</tbody>
</table>
Codigo con el que verás esto:
| Columna 1 | Columna 2 |
|---|---|
| Dato C1F1 | Dato C2F1 |
| Dato C1F2 | Dato C2F2 |
Ya te estoy viendo pensar que esta es una forma fácil de hacer páginas web… ¡NO! ¡DETENTE! No sigas pensando eso.
¿Ves? ¡Ya enfadaste al ganso!
Esto de usar tablas era algo que se hacía hace mucho, pero créeme, ya no sólo no es necesario, es adverso. Verás, por muy tentadora que suene la idea, resulta que si lo haces tus páginas se llenarán de código innecesario, serán semánticamente incorrectas (repite conmigo: “Las tablas son para datos tabulares”) y te cargarán más lento.
Que sí, que ya se que hacer una web sin tablas ha sido algo más complicado de lo que necesitaba ser, pero siempre puedes contar con la ayuda de aquellos y aquellas que se atrevieron a ir más allá y rescataron el día…
Está bien, está bien… Me cuesta reconocerlo, pero no es mi culpa que la gente todavía decida crear diseños basados en tablas. Existe un único lugar donde estas cosas están bien utilizadas, en las campañas de correo electrónico. Uff. Que a estas alturas sigamos con ellas, personalmente, me parece malo, pero también ha de tenerse en cuenta que si llegara el momento en el que te pidan hacer una, pues, tendrás que hacerla sin más.
Bien, cuando tomas este factor en cuenta, habrá que saber también como hacer para evitar el anidamiento (tablas dentro de tablas) o por lo menos diseñar sin depender de ello, sopena que quieras estar al séptimo nivel de una tabla y no sepas como quitar un icono sin que esto signifique el fin de todo tu diseño.
“Pero sólo era una imagen” decías. “No pasará nada” decías.
Un diseño para correo electrónico no debería tener tantos elementos, pues se trata de informar a la audiencia de algo que ha de llevarlos hasta tu página web.
Ahora bien, si tu intención es precisamente esta, lo mejor que puedes hacer es directamente descargarte el HTML EMAIL BOILERPLATE por que te evitará un montón de dolores de cabeza asociados a la compatibilidad con los diferentes sistemas lectores de correos electrónicos y demás. Si todavía no lo entiendes, no te preocupes, en futuras entregas veremos este asunto más en detalle.
Si, un diseño sencillo dice mucho más que uno muy complejo, sobre todo cuando tienes en cuenta que cada vez más y más gente leerá tus correos en dispositivos móviles y que no puedes ponerte a suponer que es lo que se ve bien y que no, ni debes imponer un tamaño o un estilo (lo cual me recuerda, que no se nos olvide luego hablar del tema este…).
¿Que no cabes? ¡Ya verás como te haré caber!
Un diseño sencillo no debería de constar de más de 3 o 4 filas y un encabezado… Ya está, no le des más vueltas. Vale, quieres darle más vueltas y por tanto pensarás en andidar tablas en cada celda. Pero la respuesta yace en otra técnica distinta, la agrupación de celdas.
Los atributos colspan y rowspan te ayudarán a conseguir ese efecto sin necesidad de incrementar la cantidad de código que has de introducir.
Asumamos que no buscas hacer algo tan complejo
Si te pones con imágenes de fondo complicarás más las cosas, razón por la cual te recomiendo no hacerlo.
En el ejemplo de la imagen podemos ver una configuración de tabla bastante compleja que no requiere del uso de tablas anidadas, el código quedaría así:
<table> <tr><td colspan='5'>1</td></tr> <tr><td colspan='3' rowspan='2'>2</td><td colspan='2' rowspan='3'>3</td></tr> <tr></tr> <tr><td rowspan='4'>4</td><td colspan='2' rowspan='2'>5</td></tr> <tr><td rowspan='3'>6</td><td rowspan='3'>7</td></tr> <tr><td rowspan='2'>8</td><td rowspan='2'>9</td></tr> <table>
Pero te recuerdo, las tablas son para presentar datos tabulares… Como por ejemplo tablas de precios, listas con múltiples columnas, etc.
Tablas para tablas que llevan tablas con tablas dentro…
En la siguiente entrega, veamos con más detenimiento esto de las capas, por que aunque parece cosa de superhéroes y superheroinas, se trata nada más de un poco de sentido común y la ayuda de superpoderes…
Aprende, Desarrollo, Featured, HTML, Tutorial
