Como insertar tablas en las entradas de tu blog

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.

Como insertar una tabla en la entrada de tu blog
¿Empezamos?

Como insertar tablas en las entradas de tu blog

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

Como insertar una tabla en la entrada de tu blog

<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>

Como insertar tablas en las entradas de tu blog

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.

Como insertar una tabla en la entrada de tu blog
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

Como insertar una tabla en la entrada de tu blog
Como insertar tablas en las entradas de tu blog

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!


44 comentarios

  1. Me encanta! (es más el otro día lo buscaba como una loca jajaaj) así que derechita a probarlo!

    ResponderEliminar
    Respuestas
    1. No me digas, pues que bien :)
      Me alegro un montón de que te sirva ¡Un beso enorme!

      Eliminar
  2. No sabía que se pudiesen añadir tables desde el editor! Fíjate que siempre penaba que eran capturas o fotografías. Está genial la verdad. Gracias por enseñar cómo hacerlo y hacer que parezca fácil, como siempre ;)

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo!
      Pues sí, parece mentira la cantidad de cosas que se pueden hacer jeje
      Me alegro de que te guste el post :)
      ¡Un beso enorme!

      Eliminar
  3. Muy buena tu explicacion la tendre en cuenta cuando me haga falta. Un beso

    ResponderEliminar
  4. Muy bien explicado este post Nerea, el Html siempre es complicado pero contigo es más fácil de entender.
    No sé si le daré uso a esto de las celdas pero siempre está bien aprender una cosa más.

    Besitos!

    ResponderEliminar
    Respuestas
    1. ¡Hola Irene!
      Me alegro un montón de que te guste el post :)
      Y sí, llevas razón.. a priori puede parecer un tema complicado, pero algo de práctica todo sale jeje
      ¡Un beso enorme!

      Eliminar
  5. ¡Muy buenas bonita!
    Fíjate, tu entrada me ha venido como anillo al dedo, ya solo me queda empezar a usarlo, eso sí, esta se queda en mis favoritos. Un abrazo enorme preciosa ;) x

    ResponderEliminar
    Respuestas
    1. ¡Hola Gaia!
      Pues que bien, no sabes la alegría que me da leer esto :)
      Muchas gracias por ser tan maja jeje
      ¡Un beso enorme!

      Eliminar
  6. Uy esto me habría venido de perlas cuando estudié diseño de interfaces! jajaja tutoriales así hacen falta a piñón! muchas gracias guapi!

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias a ti de verdad! Espero que puedas usar este tutorial en algún momento :)
      ¡Un beso enorme!

      Eliminar
  7. Siempre nos enseñas cosas muy útiles!Besos!

    ResponderEliminar
  8. No he usado nunca tablas en los post pero me lo apunto por si veo la necesidad de hacerlo! :)

    ResponderEliminar
    Respuestas
    1. ¡Claro que sí, nunca se sabe cuando se pueden necesitar! ^^

      Eliminar
  9. me encantan tus entradas porque para las que no sabemos nada nos das muchos consejos para blogger

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias cielo! Me encanta leer cositas así :) ¡MUAK!

      Eliminar
  10. Hola!!
    Muchas gracias por la información :D
    Un día de estos lo pruebo, que soy negada para todas estas cosas, no sé qué hago que siempre se me termina descuadrando todo O.o
    Besos y feliz semana! <3

    ResponderEliminar
    Respuestas
    1. ¡Hola Sandra!
      Que bien que te haya gustado el post :) Y tranquila, en cualquier momento surgirá la ocasión jeje
      Y por otro lado, a mí me pasaba algo parecido en mis inicios, es normal.
      ¡Un beso enorme!

      Eliminar
  11. La verdad es que no lo sabía. Muchas gracias por la información, guapa.

    Besos

    ResponderEliminar
    Respuestas
    1. ¡De nada cielo! Muchas gracias a ti, me alegro de que te gustara el post :)

      Eliminar
  12. Post guardado y a practicar :-)
    Genial la ayuda que nos das!
    Besitos grandes!

    ResponderEliminar
    Respuestas
    1. ¡Oleeee! Me alegro un montón Neus de que te guste el post :)
      ¡Un beso enorme!

      Eliminar
  13. Gracias por la info pasito a pasito! Una vez hice la tabla para el concurso y me salió fatal ajajaj. Un besito y espero que la vuelta de la Semana Santa esté llena de energía y felicidad! Besos fuertes!!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Monito! Muchas gracias por tus palabras :)
      Me alegro un montón de que te guste el post
      ¡Un beso muy grande! MUAK

      Eliminar
  14. Pero que idea mas buena!!besos

    ResponderEliminar
  15. De momento no me ha surgido eso de tener que insertar una tabla pero quizás también era por desconocimiento de como hacerlo. Muchas gracias por la explicación. Un besazo

    ResponderEliminar
    Respuestas
    1. ¡Hola Natalia!
      Pues me alegro un montón de que te sirva el post, y de que ya tengas una opción más para diseñar tus entradas :)
      ¡Un beso enorme!

      Eliminar
  16. Como anillo al dedo me viene esta entrada jeje Un saludo guapa

    ResponderEliminar
    Respuestas
    1. Que me dices.. ¡Pero que bien! :)

      Eliminar
  17. Una vez intenté hacer una tabla y no sabía como, al final la hice como imagen con paint y no me gustó nada :S Como siempre, me viene genial esta información. Muchas gracias! :)
    Besos!

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo!
      Sí, creo que eso es algo que nos ha pasado a todas.. o si no hacerla con Paint jeje
      Pero no pasa nada aquí tienes el tutorial para cuando lo vayas a volver a necesitar..
      ¡Un beso enorme!

      Eliminar
  18. Un tutorial muy completo. Yo al ser de wordpress no lo puedo usar pero gracias de todos modos

    Besos

    C

    ResponderEliminar
    Respuestas
    1. ¡Hola Celeste!
      Sí, es una lástima que estos consejos no sirvan para Wordpress ..
      ¡Un beso enorme guapa!

      Eliminar
  19. Hola

    Muchas gracias, yo la tengo en mi pestaña de "freebies", pero el tuyo me lo releo de nuevo por si puedo cambiar o mejorar algo.

    Besotes y mil gracias por estos posts tan interesantes.

    ResponderEliminar
    Respuestas
    1. ¡Hola Macarena!
      Pues espero que te pueda ser de ayuda, aunque solo sea un poquito jeje
      ¡Un beso enorme! ^^

      Eliminar
  20. no tenia ni idea de que se podia hacer! siempre ponia una imagen con la informacion. Miles de gracias una vez más :)

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias a ti cielo! :)

      Eliminar
  21. Una clase magistral como siempre, no había leído ningún post sobre como hacer este tipo de tablas aún.
    Mil gracias y besos

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo!
      Que bien, me alegra haberte sorprendido jeje
      ¡Un beso enorme! :)

      Eliminar
  22. Muy útil, como siempre :)
    Un besito!!

    ResponderEliminar



¡Anímate a comentar! Tu opinión es muy importante para mí.

Por eso, cualquier comentario escrito desde el respeto será bien recibido.
Por tanto, nos gustaría aconsejarte, que si además de tu fantástico comentario deseas añadir la URL de tu sitio WEB,
debes "Comentar como: Nombre/URL" así Google no nos castigará y tu comentario no será tratado como SPAM :)

No aceptamos ningún tipo de SPAM ¡Gracias por vuestra comprensión!

© Alexxa 26. All rights reserved.