Crear una tabla en Blogger fija

¿Alguna vez habéis intentado hacer una tabla en Blogger? Pues no se puede, al menos directamente. Blogger no tiene la opción de crear tablas (como sí podemos hacer en Word, por ejemplo). Pero... ¡que no cunda el pánico! Si necesitamos una tabla, podemos hacerla con HTML.

¿Para qué podéis necesitar una tabla en vuestro blog? Aparte de los usos "clasicos" de las tablas, como medio de presentación de datos, nos hará falta recurrir a una tabla si queremos hacer, por ejemplo, un menú visual, como el que estoy haciendo en la página de mi recetario completo. Evidentemente, es mucho más atractivo que una simple lista de links. Pinchando en cada imagen os lleva al post correspondiente donde está publicada la receta. Pues éste es un ejemplo de una tabla insertada en una página (que se hace exactamente igual que en un post).

Como las tablas se hacen con HTML, también podemos insertar una tabla mediante el gadget correspondiente en la opción de diseño de nuestro blog. 

El código HTML que necesitáis para generar una tabla es el siguiente:

<table align="left" bgcolor="#ffffff " border="0" bordercolor="#ffffff" cellpadding:"2" cellspacing="0" >

<tbody>

<tr>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
</tr>

<tr>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
</tr>

</tbody></table>

Os cuento ahora qué es cada cosa, para que podáis personalizarlo y adaptarlo a vuestras necesidades.

• Lo que hay entre cada <tr>...</tr>: cada fila (en horizontal).
• Lo que hay entre cada <td>...</td>: cada una de las celdas que tiene esa fila.
• table align: alineación de la tabla: puede ser left, center, right (izquierda, centrada, derecha).
• bgcolor: el color de fondo de la tabla (yo lo tengo blanco).
• border: grosor del borde de la tabla, en píxeles.
• border color: color del borde (también lo tengo en blanco).
• cellpadding: espacio entre el borde y el contenido de cada celda, en píxeles.
• cellspacing: distancia entre las celdas de la tabla, en píxeles.
• height: alto de la imagen, en píxeles. Si no se establece este valor, saldrá la imagen en tamaño real.
• width: ancho de la imagen, en píxeles. Si no se establece este valor, saldrá la imagen en tamaño real.

Para poner texto en lugar de una imagen en una celda:

<td>lo que queráis escribir</td>

Para poner una imagen y también texto en una celda: como lo más frecuente es incluir las tablas en un post o página del blog, lo más rápido y fácil es hacer la tabla con imágenes y luego editarla en el modo "Redactar". Aquí podéis incluir un pie de foto a la imagen y crear enlaces.

Vale, ya sé cómo hacer una tabla y la tengo personalizada a mi gusto. ¿Cómo la inserto en un post o página de mi blog?

Lo mejor es redactar el código HTML de nuestra tabla en un documento de texto (Word o similar), para poder hacer las modificaciones que necesitemos sin trastear demasiado en el blog. Para ello, podéis copiar el código que os he facilitado y pegarlo en un documento de Word en blanco. Después, le hacéis las modificaciones que os convengan, según os he explicado.

Una vez esté el código a nuestro gusto, lo copiamos y nos vamos, en el editor de entradas (o páginas) de Blogger, a la opción de HTML. Aquí buscamos el lugar exacto en el que queramos que aparezca nuestra tabla y pegamos el código que traíamos copiado del documento de Word.

Si cambiamos a la vista de "Redactar" veremos nuestra tabla. Si no nos gusta como queda, podemos modificarla, repitiendo el proceso (las modificaciones mejor en Word, si lo hacéis directamente en el blog acabará dando fallos).

En la vista de "Redactar", como ya os he explicado, podemos insertar un pie de foto a las imágenes y/o añadir enlaces.

Yo no quiero la tabla en un post o página, sino en el diseño de mi blog.

Pues más fácil todavía. Generamos la tabla en un documento de Word, como ya os he explicado, y pegamos el código en un gadget de HTML, que encontraremos en esta ruta:

Escritorio del blog - Diseño - Añadir un gadget - HTML/Javascript

Le damos a "Guardar", colocamos el gadget que hemos creado en el lugar en el que queremos ver la tabla, le damos a "Guardar disposición" y comprobamos que está todo correcto. Si es así, genial. Si no, modificamos lo que haga falta hasta que quede a nuestro gusto.

Fuente: http://aminomegustacocinar.blogspot.com/2015/08/tutorial-como-crear-una-tabla-en-blogger.html

VER TAMBIÉN

• Insertar tablas en el blog (Apuntes sobre blogs)
• Insertar tablas en Blogger (ciudad blogger)
• Introducir tablas en Blogger. Tutorial
• Crea columnas responsive en blogger