Cómo crear una tabla en Blogger

¿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.

EDITO ESTE POST EN SEPTIEMBRE DE 2021: el uso de Internet ha cambiado me manera brutal desde la publicación original de este post en 2015. En ese momento, el principal modo de acceso a páginas webs y blogs seguía siento el ordenador (siendo el acceso a través de dispositivos móviles algo residual). Hoy en día esto es radicalmente distinto: el principal medio de acceso e interacción de los usuarios con el contenido web son los dispositivos móviles. El código que os proporciono es válido (HTML es HTML, no ha cambiado), pero no os puedo garantizar su correcto funcionamiento en plantillas Responsive (plantillas que se adaptan para verse de forma distinta según el dispositivo desde el que accedes: PC, tableta, móvil,...). Y hoy en día es muy importante usar para tu blog o página web una plantilla Responsive.

¿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, en el que cada imagen os lleva al post correspondiente.

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:

</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.

Bueno, por hoy yo creo que ya está bien. Espero que lo que os he contado os sea útil.

Si te ha gustado este post, recuerda que puedes compartirlo muy fácilmente en tus redes sociales favoritas, con los botoncitos que hay aquí debajo.

Besitos y... ¡hasta el próximo post!