Introducir tablas en Blogger

Para insertar una tabla en Blogger, debemos realizar los siguientes pasos. Lo primero será insertar el código html correspondiente. Podemos partir de una tabla 3x3, dónde C representa Columnas y F filas, algo como esto:

<table border="1" cellpadding="5"><tbody>

<tr><td>C1,F1</td>

     <td>C2,F1</td>

     <td>C3,F1</td></tr>

<tr><td>C1,F2</td>

     <td>C2,F2</td>

     <td>C3,F2</td></tr>

<tr><td>C1,F3</td>

     <td>C2,F3</td>

     <td>C3,F3</td></tr>

</tbody></table>

Tabla 3x3 añadida en blogger.

Podemos ir observando que, sólo con este código ya podemos modificar:
i. El tipo de borde de nuestra tabla "border". SI lo definimos como "0" no veremos el borde y desde 1 en adelante sólo modificaremos el grosor de la segunda línea, la línea exterior.
ii. El margen de separación del texto con los bordes de la tabla "cellpadding". A mayor número mayor distancia de separación.
iii. Incluir nuevas filas o nuevas columnas según nuestras necesidades. Para ello simplemente añadiremos <tr> para filas y <td> para columnas.

Por supuesto, existen múltiples opciones más:
- Muchas veces nos interesa que la tabla se adapte al ancho de nuestro blog. Para ello recurrimos a una orden CSS, la opción style="width: 100%;". Si modificamos ese 100% se adaptará hasta el punto que nosotros queramos, pero siempre en función del ancho definido en el blog. Quedaría así:

<table style="width: 100%;" border="1" cellpadding="5"><tbody>
<tr><td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Adaptar nuestra tabla al ancho del blog.

- Podemos cambiar el color de todo el fondo de la tabla. Para ello escribiremos bgcolor="grey" después de <table.

<table bgcolor="grey" border="5" cellpadding="5"><tbody>
<tr><td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Añadir un color de fondo a la tabla.

- Es posible que nos interese que la primera fila tenga un color de fondo mientras que el resto de la tabla tenga otro (o no tenga). Para conseguir éste efecto podemos añadir el atributo bgcolor tras la <tr> que nos interese, por ejemplo la primera:

<table border="5" cellpadding="5"><tbody>
<tr bgcolor="purple"> <td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Cambiar el color de fondo sólo a ciertos elementos (fila en este caso).

- En lugar de un color de fondo podemos insertar una imagen de fondo bajo la tabla, para ello utilizamos la opción background="URL de la imagen" (como ya veíamos para entradas) después de <table. Por ejemplo:

<table background="http://us.123rf.com/400wm/400/400/loskutnikov/loskutnikov1106/loskutnikov110600045/9719891-tabla-de-madera-vieja-fondo.jpg" border="5" cellpadding="5"><tbody>
<tr><td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Añadir una imagen de fondo a la tabla.

- Otro parámetro modificable es el color del borde. La instrucción es bordercolor y, nuevamente debemos añadirla tras <table>.

<table bordercolor="blue" border="5" cellpadding="5"><tbody>
<tr> <td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Cambiar el color del borde de la tabla.

- Podemos plntearnos el centrar el texto en su correspondiente celda. Para ello añadimos align="center" después de <tr> o <td> si queremos que sólo afecte a ciertas filas o columnas. 

  <table border="1" cellpadding="5"><tbody>
  <tr align="center"><td>C1,F1</td>
         <td>C2,F1</td>
         <td>C3,F1</td></tr>
    <tr><td>C1,F2</td>
         <td>C2,F2</td>
         <td>C3,F2</td></tr>
    <tr><td>C1,F3</td>
         <td>C2,F3</td>
         <td>C3,F3</td></tr>
    </tbody></table>

Centrar el texto.

- La famosa opción "combinar celdas" también es aplicable. Así lo único que haremos es utilizar código CSS de manera que la fila a combinar (o columna) se reduzca a una instrucción simple colspan. La idea es utilizar este comando definiendo cuantas celdas quieres agrupar, 3 en nuestro caso. Si quieres puedes alinearlas como hemos hecho en el ejemplo y añadir el texto como hacíamos siempre.

 <table style="width: 100%;"border="1" cellpadding="5"><tbody>
    <tr><td colspan="3" align="center">Combinar fila 1</td></tr>
    <tr><td>C1,F2</td>
         <td>C2,F2</td>
         <td>C3,F2</td></tr>
    <tr><td>C1,F3</td>
         <td>C2,F3</td>
         <td>C3,F3</td></tr>
    </tbody></table>

Combinar celdas en la tabla.

- Además podemos centrar la tabla respecto al fondo de la entrada añadiendo align="center" después de <table.

    <table align="center" border="1" cellpadding="5"><tbody>
    <tr><td>C1,F1</td>
         <td>C2,F1</td>
         <td>C3,F1</td></tr>
    <tr><td>C1,F2</td>
         <td>C2,F2</td>
         <td>C3,F2</td></tr>
    <tr><td>C1,F3</td>
         <td>C2,F3</td>
         <td>C3,F3</td></tr>
    </tbody></table>

Centrar tabla respecto al fondo de la entrada.

Estos son algunos de los ejemplo de modificaciones que más se suelen usar, pero hay muchos más, tantos como puedas imaginar y necesitar, así que sólo tienes que probar y crear.

Añadir una imagen de fondo a una entrada

Añadir una imagen de fondo a una entrada es relativamente fácil, pero requiere necesariamente la utilización de html. La idea es copiar el siguiente código en html: <table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="URL de la imagen de fondo" border="0"><tbody><tr><td><p>En éste espacio debes incluir el conjunto de texto de la entrada. Desde la opción "Redactar" podrás modificar cuanto quieras de él y trabajar como con cualquier otra entrada.</p></td></tr></tbody></table> Así por ejemplo podríamos hacer lo siguiente, agregamos una imagen de fondo: <table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="http://hd-wallpaper.org/wallpapers/10/Rainbow_Wave_Length.jpg" border="0"><tbody><tr><td><p>Ejemplo de insercción de imagen de fondo en una entrada de Blogger</p></td></tr></tbody></table> Como ves, también podremos moddificar el color del borde (bordercolor), los márgenes de la imagen al texto (cellspacing, cellpadding) o la anchura (width). Recuerda elegir imágenes no demasiado chillonas, con buena resolución y de un tamaño adecuado para la extensión de tu entrada para así evitar el "efecto tesela". Puede ser aconsejable trabajar la opacidad de dicha imagen, su brillo o contraste en la búsqueda de un mejor resultado (sea en InkScape o en Gimp).

Reproducir música de fondo en nuestro blog

Si lo que queremos es que se reproduzca una canción de fondo, sin necesidad de darle al play, sino que simplemente comience a sonar cuando se abra el blog los pasos son los siguientes:
i. Seleccionamos la canción de YouTube que nos interese.
ii. Procedemos como si fueramos a colgar el vídeo completo de YouTube en nuestro blog. Pinchamos en Compartir<Insertar y pinchamos sobre la opción "Utilizar código de inserción anterior". Copiamos dicho código completo, por ejemplo éste:

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/QEllLECo4OM?version=3&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QEllLECo4OM?version=3&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

- Debemos cambiar, las dos veces en las que aparece, version por autoplay, y el 3 que aparece a continuación del igual por un 1.

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

- Una vez hecho lo importante podemos plantearnos que no aparezca la imagen. Para ello simplemente definimos las altura y anchura como de tamaño 0 (en dos lugares nuevamente), quedando así:

<object width="0" height="0"><param name="movie" value="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" width="0" height="0" allowscriptaccess="always" allowfullscreen="true"></embed></object>

- Finalmente mi consejo es que este mismo código lo coloquéis como un gadget en la barra lateral en lugar de en una entrada, pero según vuestras necesidades.


CONSEJO. Esta opción puede ser una buena opción si vuestro blog se adapta a ello. Lo normal es que la música de fondo acabe cansando o distraiga la atención del contenido principal. De poner una música de fondo procurar que sea discreta, sin letra y larga para que se repita constantemente.

VIDEOTUTORIAL. Como reproducir música de fondo de YouTube en Blogger (segunda parte del video, a partir del minuto 5').