Cómo crear tablas en Blogger

|
A veces, cuando escribimos un post, tenemos la necesidad de resaltar cierta parte del texto, poner datos adicionales o simplemente, hacer un resumen final

Para estos casos, una buena opción es la creación de una tabla, como esta que os enseño
⌂ Nombre restaurante
✉ Dirección
Ⓜ Parada de metro
⌚ Horario
☎ Teléfono
$ Precio
En mi caso particular, la utilizo tanto como como resumen de datos de contacto cuando recomiendo algún restaurante por ejemplo, tal y como os enseño arriba, o para personalizar la caja de suscripción por mail. Mirad que diferencia
Como os digo, tiene múltiples de aplicaciones y es realmente fácil de hacer aunque Blogger no nos dé una opción automática
Cuando estéis escribiendo un post y queráis insertar una tabla, tan solo debéis ir a la pestaña de arriba a la izquierda que dice HTML, y pegar el siguiente código
<div align=”center”><table bgcolor=”#bc91ed” border=”0″ cellpadding=”3″ cellspacing=”1″ style=”width: 350px;”>
<tbody>
<tr> <td>Aquí podemos escribir una línea
</td></tr>
</tbody></table></div>
No os asustéis que os explico que es todo lo que veis arriba
table bgcolor=”bc91ed” es el color de fondo de la tabla. La mía como veis es de un color verdoso, pero vosotras podéis personalizarla con el color que más os guste. Para obtener el código del color, solo debéis ir a la web de Color Hex, elegir el color que más os guste y ahí, os informará del código que corresponde a ese color. Fácil!
border:0 es la línea que rodearía la tabla, en el caso que la tuviéramos. En este caso es 0 porque no hay, si queréis una línea solo debéis poner 1. Poner un número más alto en función del grosor de la línea, como más alto el número, más gruesa es la línea
cellpadding=3 es el equivalente a lo que sería un margen de la derecha e izquierda, o sea, el espacio libre desde que se acaba la letra hasta que finaliza la tabla. Puedes variar este número a gusto, en función del espacio que desees dejar
cellspacing=1 igual que en el punto anterior, pero solo que corresponde al margen de arriba y abajo
style=”width:350px” es el ancho total de la tabla. Totalmente personalizable en función del espacio que necesitéis. Ya sabéis que no se mide con centímetros, sino con píxeles
Ahora ya sí, podemos empezar a escribir lo que queramos, tal y como os escribo arriba
Y ahora me podéis preguntar, ¿y cómo lo haces para insertar el formulario de suscripción por mail en la tabla?
Fácil, vosotr@s ya tenéis el código HTML que corresponde a vuestra suscripción. Pues este mismo código, debéis insertarlo donde dice aquí podemos escribir una línea, y ya. Nuestro formulario nos aparecerá con el color y los margenes que hayamos definido
No es nada difícil, en serio, pero eso sí, si no estáis acostumbrad@s al HTML, tenéis que tomarlo en calma
Como ya os he dicho en otra ocasión, las prisas son malas amigas, así que inspirar, dedicarle un tiempecillo hasta que lo tengáis por la mano, vale la pena
NOTA1 Estas tablas os sirven tanto para resaltar información como para poner bien bonita la cajetilla de suscripción por mail
NOTA2 Para saber como daros de alta en la suscripción por mail y poder ofrecer el servicio de Feedburner a vuestros lectores, mira este post
¡Feliz año nuevo!

10 lectores ha opinado, ¿cual es la tuya?

  1. celia

    Hola Is, en el caso de insertar el código para personalizar la newsletter, ¿dónde está “escribir una linea”? ay madre, que torpeza! mil gracias

  2. Rika Tashaki

    Buenas! y en caso de poner un fondo en la tabla y no un color?
    he sustituido el código del color por el de background… pero no me sale el fondo.
    como podrías funcionar?
    gracias.

    1. Isabel Leyva

      debería ser otro tutorial, porque este es sólo para fondo de color. de todas maneras, haz un montaje de foto, será lo más fácil. saludos!

    1. Isabel Leyva

      te dejo aquí ejemplo para que lo apliques al código de arriba :)

      <tr> <td>

      <span style=”align: center; color: black; font-family: arial;”>tu texto</span>

      </td></tr>

  3. Pingback: Calendario de ferias internacionales enero y febrero 2014 | EXPORTARIZATE

Comments are closed.