jueves, 3 de mayo de 2012

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.

6 comentarios:

  1. gracias!
    Me ha servido de muchísima ayuda!! : )

    ResponderEliminar
  2. Hola, tengo una duda, no se si me puedes ayudar. Te comento:

    En la columna derecha de mi blog http://vengareasadaharu28.blogspot.com.es/ tengo puesto un gadget html en el que he insertado una tabla y dentro he puesto unas pequeñas imágenes, como ves de algo más de 50x50. La inserté en una tabla porque es la única forma que encontré para que las imágenes aparecieran una tras otra de forma horizontal. El problema está en que entre las filas de imagenes horizontales queda muchísimo espacio en blanco, al igual que entre imágenes en vertical. ¿Cómo puedo solucionarlo para que las imágenes queden más juntas y no me ocupe tanto hueco en el blog?

    Quería enseñarte el html que tengo puesto en el gadget, pero no me deja incluirlo aquí en el comentario

    ResponderEliminar
  3. Muchas Gracias, aunque para colores claros use "light" y luego el color, así "lightblue"
    Ahora necesito crear un menú desplegable a partir del menú de la barra principal u horizontal

    ResponderEliminar
  4. Hola Félix, el menú desplegable de las páginas no es dificil. Nosotros ya lo hemos utilizado en alguna ocasión. Anotada la petición y en cuanto podamos hacemos una entrada explicándolo. No eres el primero que se interesa por esto.

    Gracias!

    ResponderEliminar
  5. Gracias estaba a punto de rendirme. de verdad mil gracias.

    ResponderEliminar
  6. se puede hacer una tabla donde la primera fila se muestre toda, pero el resto de las filas sulo se muestre una celda a la vez cada que le das clic en una de las celdas de la primera fila

    ResponderEliminar