Uso de tablas para dar formato al texto de las entradas

Cuando estamos editando un Blog, la apariencia de nuestras entradas nuestras entradas también es importante. Si queremos crear columnas distintas para incluir imágenes y texto en el mismo nivel (por ejemplo, poner una imagen a la izquierda y, un texto explicativo a la derecha de la imagen), lo más cómodo es emplear tablas para crear las dos columnas. El problema es que el editor que ofrece blogger no nos da la opción de insertar una tabla, lo que sería más cómodo. Por eso, debemos hacer un par de trucos (conociendo un mínimo de código HTML para hacerlo).

El medio por el que vamos a aprovechar esta funcionalidad es la selección del modo de edición HTML. Cuando estamos en el modo de edición de una entrada en nuestro blog, deberemos seleccionar la opción "Edición de HTML" que nos saldrá en la parte superior derecha de la barra de herramientas del editor de blogger (si empleamos la vista clásica del editor - fondo anaranjado, con marcos marrones oscuros, etc) Esta opción la podemos ver en la siguiente imagen:

Para volver al modo de edición normal, sólo tendremos que seleccionar "Redactar".

Si la vista que tienes de blogger es la más moderna, deberás seleccionar el botón HTML que aparece en la parte superior izquierda de la barra de herramientas del editor de entradas de blogger. Tal y como aparece en la siguiente imagen:

Del mismo modo que en el caso anterior, sólo debes elegir Redactar para volver al editor estándar de entradas del blog.

Pues bien, si en lugar de colocar las imágenes como se han colocado en esta entrada hasta este punto (en el centro y, entre párrafos), lo que queremos hacer es ponerlas de la siguiente forma:

	En la imagen de la izquierda, vemos el diseño clásico del editor de entradas de Blogger. Selecciona la opción Editar HTML para poder incluir códigos HTML y, así, poder dar mayor riqueza de formato a tus entradas.
En la imagen de la derecha, vemos el nuevo diseño del editor de entradas de Blogger. Selecciona la opción HTML para poder incluir códigos HTML y, así, poder dar mayor riqueza de formato a tus entradas.

Como podrás comprobar, en este segundo caso, el texto se está mostrando en dos columnas de forma que puedo alinear texto e imágenes a una misma altura. Esto se consigue empleando etiquetas HTML que se incorporarán en el modo de edición HTML de la entrada de blogger. Para ello, tendrás que seguir las instrucciones que se han mostrado en el ejemplo anterior con dos columnas, es decir, seleccionar el modo de edición HTML de nuestra entrada.


Cuando estés en el modo de edición HTML, deberás emplear las etiquetas HTML necesarias para crear una tabla que son:

• <table>: indica que se inicia una tabla.
• </table>: indica que se termina una tabla. Todos los datos de una tabla estarán incluidos entre <table> y </table>.
• <tr>: indica que empezamos a definir los datos de una fila, es decir, de los datos que están a la misma altura de izquierda a derecha.
• </tr>: indica que termina la definición de datos de la fila. Tanto <tr> como </tr> siempre deben estar encerrados en una estructura <table></table>.
• <td>: Indica que empezamos a definir los datos de una celda, es decir, dónde queremos editar. 
• </td>: Indica que finalizan los datos de una celda. Tanto <td> como </td> deben estar incluidos dentro de una estructura <tr></tr>

Para tratar de entender un poco mejor esto, vamos a ver un ejemplo. Queremos crear la estructura de filas y columnas del ejemplo anterior con texto e imágenes, es decir, queremos crear una tabla con 2 filas y 2 columnas. Para ello, tendremos que escribir:


<table border =1>
   <tr>
      <td>Celda 1.1</td>
      <td>Celda 1.2</td>
   </tr>

   <tr>
      <td>Celda 2.1</td>
      <td>Celda 2.2</td>
   </tr>
</table>

Esto nos dará como resultado:

Celda 1.1	Celda 1.2
Celda 2.1	Celda 2.2

El texto border=1 nos marcará el borde de las celdas que nos será útil para seleccionar el texto de la celda (ver bien dónde acaba cada uno) y, escribir lo que nos interese. Una vez que tengamos el contenido que queremos incluir en la tabla, sólo tendremos que cambiarlo por border=0 y, desaparecerá el borde de la tabla.


Sólo queda que "jueges" un poco con esto de las tablas y, tratar de crear una tabla de 3 filas por 2 columnas, de 2 filas por 3 columnas, etc. y, verás qué fácil te terminará resultando dar formato a tu texto en columnas.