Insertar tablas en el blog

En el editor de los blogs de Blogger, no existe la posibilidad de insertar tablas automáticamente, pero esto se puede hacer fácilmente incorporando el código HTML necesario. Las tablas no son muy habituales en un blog, porque su contenido suele ser breve y sencillo. Tampoco resulta muy aconsejable su uso frecuente, y en muchas ocasiones la tabla puede sustituirse por otros procedimientos más sencillos para presentar el contenido. Sin embargo, puede haber algunos casos en que resulte aconsejable incluir el contenido en una tabla. Vamos a ver dos de esos casos.

1. Dos ejemplos prácticos para el uso de tablas en un blog

1. Introducir una lista de palabras en una tabla con varias columnas.
2. Mostrar varias imágenes pequeñas en una entrada, una al lado de otra.

En ambos casos el motivo principal para el uso de las tablas es que no aparezcan los elementos, palabras e imágenes, uno debajo de otro y haya así demasiado espacio vacío en la entrada del blog. Son dos casos sencillos en los que las tablas pueden mostrar su utilidad de la siguiente manera.

Para el primer ejemplo, tomo una entrada de un blog cuya autora me ha planteado el caso. Se trata de que sus alumnos practiquen la pronunciación de estas palabras con un widget muy original:

environment	culture	woman
women	scientist	scientific
psychological	hierarchy	serveillance
business	clothes	politician
comfortable	island	nuclear weapon
pollution	hypothesis	controversial

Para el segundo ejemplo, voy a poner las fotografías de varios personajes famosos de la actual Web. ¿Sabéis quiénes son? Si sabéis mucho de la Web 2.0, puede que os interese hacer los tests que publiqué en El tinglado, donde aparecen estos y otros personajes: La Web 2.0 en imágenes.

2. Cómo se hace esto con tablas

Supongo que os habré dejado con la boca abierta. Pero esto no es tan complicado como parece. Podemos hacerlo de dos formas. La primera es utilizando un editor de HTML. Uno muy usado es Kompozer, que es software libre y gratuito. Si lo instalamos en nuestro ordenador, podremos hacer una tabla automáticamente, y después copiamos el código fuente en la Edición de HTML del editor de Blogger. Yo tengo hecho un curso para trabajar con Kompozer, y en la lección de tablas puede verse cómo incluir tablas con todas sus propiedades.

Pero también podemos introducir a mano el código en el editor del blog. Vamos a ver una tabla sencilla de dos columna con dos filas:

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
<tr><td>Texto o imagen 3</td><td>Texto o imagen 4</td></tr>
</tbody>
</table>

Una vez que hemos escrito este código en la parte de Edición de HTML del editor (véanse las pestañas superiores), se crea la siguiente tabla cuando volvemos a la parte de Redactar:

Texto o imagen 1	Texto o imagen 2
Texto o imagen 3	Texto o imagen 4

Ahora ya podemos insertar el texto donde queramos, y si insertamos imágenes, antes debemos poner el cursor del ratón dentro de la celda donde queramos que esté la imagen. Y podemos centrar los elementos dentro de las celdas con el botón de Alineación al centro de la barra de herramientas del editor, como el texto o imagen 3.

El código de la tabla tiene la etiqueta <table> de apertura y </table> de cierre en forma anidada, como el resto de las etiquetas. Y esta etiqueta de tabla tiene los siguientes atributos dentro de la etiqueta de apertura, que creo que son los mínimos que puede tener para conseguir una tabla decente.

• bgcolor: color de fondo, cuyos códigos se pueden tomar de esta página de Wikipedia sobre los colores en HTML.
• border: el tamaño del borde en píxeles, que se puede poner en cero si no queremos borde.
• cellpadding: el relleno dentro de la celda entre los bordes y el texto o las imágenes. Para ver cómo funciona esto, lo mejor es cambiar el número, que representa los píxeles.
• width: es la anchura de la tabla; en este caso, el 100% para que ocupe todo lo ancho del documento, pero también podemos ponerle un número de píxeles de ancho. Para esta anchura se utiliza la etiqueta style con código de hojas de estilo CSS; no es HTML.

Las demás etiquetas son las siguientes:

• tbody: indica el cuerpo de la tabla.
• tr: crea una fila.
• td: crea una celda dentro de una fila.

La forma más práctica de crear una tabla es escribir el código de una fila para después copiarla y pegarla tantas veces como filas queramos que haya. Es mejor dejar el número de celdas igual dentro de cada fila para no liarnos con más código. Es decir, primero escribimos los códigos (de apertura y de cierre) de la tabla, con los atributos de ésta:

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
</tbody>
</table>

Y después pegamos en medio el código de cada fila tantas veces como filas queramos. En forma anidada, vemos el código de la fila en color naranja, y dentro de la fila, las dos celdas o columnas en color azul y verde.

Si quisiéramos que la primera fila abarcara más de una columna, por ejemplo tres, sólo debemos añadir el atributo colspan="3" dentro de la etiqueta td de la única celda de la primera fila; y la segunda fila tiene tres celdas. El código es éste:

<table style="width: 100%;" border="1">
<tbody>
<tr>
<td colspan="3" align="center">Fila grande</td>
</tr>
<tr>
<td style="width: 33%;">Celda</td>
<td style="width: 33%;">Celda</td>
<td style="width: 34%;">Celda</td>
</tr>
</tbody>
</table>

Y el resultado es éste:

Fila grande
Celda	Celda	Celda

Hemos centrado el contenido de la fila grande con el código align="center", y hemos dado una anchura de 33%, 33% y 34% a las celdas de la segunda fila con el código style="width: 33%;".

En la Web tenéis mucha información sobre el lenguaje HTML, ese gran desconocido que siempre estamos utilizando en la Web sin darnos cuenta, y sin el cual nada de esto sería posible.

3. Ejemplo de dos tablas independientes

Un amigo anónimo me pide lo siguiente en los comentarios de este post: "quiero poner una tabla en mi blog pero quiero poner dos columnas independientes dentro una tabla, repito primero quiero hacer columnas y luego dividirlo en lo que necesite fila o columnas". Lo que quiere, en realidad, son dos tablas independientes, una al lado de la otra. Pero para que las tablas estén una al lado de otra, hay que usar un poco el lenguaje de las hojas de estilo CSS . Veamos el ejemplo final:

Tabla izquierda

Tabla derecha

El código de este ejemplo es el siguiente:

<table style="width: 49%; float: left; margin-right: 2%;" border="1">
<tbody>
<tr>
<td>Tabla izquierda</td>
</tr>
</tbody>
</table>
<table style="width: 49%;" border="1">
<tbody>
<tr>
<td>Tabla derecha</td>
</tr>
</tbody>
</table>

Hemos construido dos tablas de una columna cada una, aunque a partir de ahora podemos añadir las filas y columnas que queramos en cada una de ellas. Cada columna tiene un 49% de anchura, y en medio hemos dejado un 2% de separación mediante el parámetro margin-right: 2% del atributo style, es decir, un margen de 2% a la derecha de la primera tabla.

Es fundamental que la columna izquierda quede flotando a la izquierda, de manera que la derecha pueda colocarse a su lado; de lo contrario, se colocarían una columna debajo de otra. Y para ello escribimos float: left dentro del atributo style de la primera tabla.

(Imagen del primer párrafo extraída de Flickr)

(Artículo actualizado el 11 de julio de 2011)