Introducir tablas en Blogger. Tutorial.

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.