Como insertar tablas en las entradas de tu blog

¿A quien no le gusta leer una entrada bien bonita y redactada?

O mejor dicho escrito, ¿A quien no le gusta hacer un buena entrada? Un post, con contenido de valor y de calidad para nuestros lectores y que tenga un diseño atractivo.
No se a vosotras, pero hay post en los que siento que tengo tanto que contar, que termino por soltarlo todo, añado un par de negritas y cursivas y listo.

Pero, ¿Y lo bien que quedaría poder ir con nuestro post un poco más allá y centrarnos en su diseño?

Hoy os voy a enseñar como podéis insertar tablas (como las de excel) en la entradas para poder clasificar mejor la la información.

Os contaré como podéis diseñarlas y además os daré unos cuantos ejemplos para que veáis en que podéis usarlas.


¿Empezamos?

Para crear nuestra tabla solo tenemos que copiar el siguiente código en la pestaña de HTML que encontramos dentro de nuestras entradas.



<table align="center" bgcolor="#F8AD8D" border="2" bordercolor="#000000" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
<td>Texto 5</td>
<td>Texto 6</td>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
<td>Texto 5</td>
<td>Texto 6</td>
</tr>
</tbody></table>

Si queréis personalizar la tabla, añadiendo más celdas, cambiar el borde o el color del fondo podéis hacerlo de la siguiente manera.

1. Añadir más filas de celdas

Para ello tan solo tendremos que añadir el código <tr> </tr>

2. Como añadir más celdas

Si queremos más celdas tan solo debemos añadir el código <td> Nuevo texto </td> tantas veces como queramos dentro del código del paso 1.

3. Como cambiar el ancho de una de las celdas

Si queremos que una sola celda ocupe el ancho de toda la tabla deberemos añadir el código colspan="4" entre los códigos <td> Nuevo texto </td> de la siguiente manera

<td colspan="4" align="center">Nuevo texto</td>

4. Como cambiar el color de fondo de varias celdas

Si lo que queremos es personalizar el fondo de nuestra tabla aún más, podemos cambiar el color de las celdas con el siguiente código bgcolor="#F8AD8D" que irá colocado de la siguiente manera sustituyendo una de las etiquetas <tr>

<tr bgcolor="grey">

5. Como añadir una imagen de fondo en la tabla

Si no hay ningún color que sea de tu agrado puedes añadir una imagen de fondo para personalizar aún más la tabla, con este código es muy fácil background="URL de la imagen" y quedaría de la siguiente manera sustituyendo el código bgcolor="#F8AD8D"

<table align="center" background="URL de la imagen"

6. Table align="center"

Si queremos que nuestra tabla esté alineada en otra dirección sustituiremos la palabra center por:

- Left: izquierda

- Right: derecha

7. Bgcolor="#F8AD8D"

Si queremos cambiar el color de fondo de nuestra tabla tan solo queremos que sustituir el código de color HTML #F8AD8D por otro que sea de nuestro gusto.

8. Border="2"

Para cambiar el borde de nuestra tabla tan solo tenemos que cambiar el número 2 por otro de mayor o menor valor para hacer que el borde se vea más ancho o menos ancho.

Si por el contrario queremos que nuestra tabla no tenga borde tan solo tenemos que poner un cero.

9. Bordercolor="#000000"

Si queremos cambiar el color del borde de nuestra tabla tan solo tendremos que cambiar el código #000000 por otro al igual que en el apartado 7.

10. Cellpadding="5"

Para cambiar el espacio entre el texto y el borde tan solo tenemos que aumentar o disminuir el número 5 que está entre las comillas.

11. Cellspacing="5">

Si queremos más o menos espacio entre nuestras celdas nuevamente tendremos que cambiar el valor numérico que en este caso el 5 que aparece entre comillas.

Una vez volvamos a la vista de redacción podremos cambiar el texto de nuestras celdas con lo comandos normales de negrita, cursiva, color e incluso enlace.


Y que no os extrañe que la tabla de la siguiente manera, es algo normal. Para ver los cambios que surgen vuestras modificaciones hay que hacer clic en Vista previa y así podréis ver todos los cambios que vais haciendo

1. Si tienes un blog de cocina puedes presentar los ingredientes de forma más ordenada.

2. Si tienes un blog de cosmética puede presentar así los compuestos de los productos.

3. Si tienes un blog donde ofrezcas tus servicios es una buena manera de añadir los precios.

4. Si tienes un blog con muchos post puedes añadir un indice que los presente de manera muy ordenada y clara.

5. Si tienes un blog de moda puedes presentar así las imágenes de los looks.

Como podéis ver son varias las posibilidades que tenemos a la hora de diseñar nuestras entradas.

Espero que os haya gustado muchísimo este post y que os sea de gran utilidad. Nosotros nos leemos el viernes.
¡Un beso enorme!