miércoles, 22 de abril de 2009

Incluyendo tablas en Blogger

Hace poco escribí una entrada que necesitaba incluir una tabla.
La verdad es que la primera publicación fue un desastre. El problema fue que justo antes de la tabla, que escribí en html, aparecieron un montón de líneas en blanco.
Aparentemente, el renderizador de blogger se fija en el número de saltos de línea que incluye el código html de la tabla, y los aplica justo antes de la tabla. No entiendo esa forma de renderizar, pero parece un hecho.

Tras jugar un poco con el tema, y entendiendo que el problema era el número de saltos de línea del código html de la tabla, y dado que los saltos de línea son opcionales en el código html, decidí quitarlos todos a ver qué pasaba. ¡Eureka! Poniendo todo en una laaaaaarga línea, las líneas en blanco desaparecían.

Pero me extrañó que no hubiese una forma más cómoda de hacerlo, así que busqué... y encontré. Y por si alguien más lo necesita, aquí tenéis los dos métodos que he probado:

Método 1 para escribir tablas en Blogger: pon todo el código de la tabla en una única línea, en la pestaña de edición HTML.
Tal que así:
<table><tr><td>Fila 1</td><td>100</td><td>125</td></tr><tr><td>Fila 2</td><td>200</td><td>220</td></tr></table>

Método 2 para escribir tablas en Blogger: definir una clase que ignore los saltos de línea de las tablas.
Para ello, escribe el siguiente código al principio de tu entrada, que define la clase "tablasinsaltos":
<style type="text/css">.tablasinsaltos br { display: none }</style>
Para luego, cuando quieras escribir la tabla, invocar esa clase, tal que así:
<div class="tablasinsaltos">
<table>
<tr> <td>Fila 1</td>
<td>100</td>
<td>125</td>
</tr><tr> <td>Fila 2</td>
<td>200</td>
<td>220</td>
</tr>
</table>
</div>
El resultado de este código es lo siguiente, que como véis queda pegadito al texto de esta línea:











Fila 1100125
Fila 2200220


Método 1 se me ocurrió a mi, aunque luego he visto que otros lo usan.
Método 2 visto en MLA Wire.

2 comentarios:

  1. Me alegro de que te haya sido útil.
    Tremenda la tabla en la que has utilizado el método 2...

    ResponderEliminar