SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

2 jul. 2014

Cómo hacer tablas en tus entradas para poner texto o imágenes

Como suelo hacer los miércoles, traigo otro tutorial, éste me lo han pedido por mail con el famoso ya Tutorial a la Carta.

Se trata de: Cómo colocar imágenes dentro de tablas o texto dentro de tablas.


Vamos a verlo, como muchas y muchos ya sabréis algo sobre código para programar vuestro blog y vuestras entradas, no creo que os perdáis pero como siempre, os comentaré para qué es cada cosa.

Cuando vayamos a hacer nuestra entrada, sabéis que arriba a la izquierda tenéis una pestañita que dice: HTML
Pues haréis click ahí.
Este es el código para las tablas, lo copiaréis y lo pegaréis en vuestra entrada en HTML.

<table align="center" bgcolor="#FA58AC" border="2" bordercolor="#F7819F" cellpadding:"1" cellspacing="3" >

  <tbody>
<tr>
    <td><img src="URL de la imágen" height="150" width="150" /></td>
    <td><img src="URL de la imágen" height="150" width="150" /></td>
  </tr>
<tr>
    <td><img src="URL de la imágen" height="150" width="150" /></td>
    <td><img src="URL de la imágen" height="150" width="150" /></td>
</tr>
</tbody></table>

Bien por partes para que podáis personalizarlo:
<table align="center" bgcolor="#FA58AC" border="2" bordercolor="#F7819F"  cellpadding="1" cellspacing="3" >

table align----> la alineación de la tabla. Centro, derecha o izquierda: center, right o left 
bgcolor----> color de fondo.
border----> grosor del borde.
bordercolor----> color del borde.
cellpadding----> espacio entre el borde y lo que hay dentro de la tablita.
cellspacing----> espacio entre las celdas de la tabla.

Todo eso lo podéis cambiar y personalizar como queráis.
Una vez ya dentro de la tabla vemos que os he puesto URL de la imagen, pues ahí pegáis a cascoporro la dirección de la imagen que queréis que se vea en la celda. Luego al ladito dice:
height="150" width="150"
Height es lo alto de la imagen mientras que width es lo ancho, ponerle ahí lo que vosotros queráis, yo recomiendo que todas las imágenes sean igual de grandes para que no se vea una tabla toda descojonada.

Cuando terminéis con la entrada pues le dais a vista previa y ya está. Yo solamente he puesto 4 imágenes si os fijáis en el código es así todo el rato:

<tr>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
  </tr>
Si queréis más celdas pues entre el <tr> y el </tr> añadís más líneas del mismo código que sería éste:  <td><img src="URL de la imagen" height="150" width="150" /></td>
O sea os quedaría así:
<tr>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
</tr>


Ahí tendríais una línea con 6 imágenes en línea o texto. Que queréis tres fotos y debajo otras tres, pues dejáis entre <tr> y </tr> solamente tres líneas de código, hacéis un Enter y debajo copiáis lo mismo con el <tr> y </tr> O sea algo así:
<tr>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
  </tr>
<tr>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
  </tr>


¿Queréis poner TEXTO en lugar de imágenes? Pues quitáis lo que dice de: <img src="URL de la imagen" height="150" width="150" /> y escribís lo que queráis poner.

Texto de pruebas 1 Texto de pruebas 1 Texto de pruebas 1
Texto de pruebas 1 Texto de pruebas 1 Texto de pruebas 1
Quedando el código de la tabla en el HTML así:

<table align="center" border="2" bordercolor="#F7819F" cellpadding="1" cellspacing:="3">
  <tbody>
<tr>
    <td>Texto de pruebas 1</td>
    <td>Texto de pruebas 1</td>
    <td>Texto de pruebas 1</td>
  </tr>
<tr>
    <td>Texto de pruebas 1</td>
    <td>Texto de pruebas 1</td>
    <td>Texto de pruebas 1</td>
</tr>
</tbody></table>

¿Imagen y texto? Pues después de lo ancho y alto de la URL de la imagen y del simbolito de /> ponéis un <br> y debajo escribís lo que queráis. Luego aquí en el editor centráis el texto y ya estará.


Texto aquí

Texto aquí

Texto aquí

Texto aquí

Texto aquí

Texto aquí

Creo que es muy fácil teniendo en cuenta el Aviso que os pongo a continuación.
Espero que os sirva Besotes


 
AVISO: Mientras lo hacía yo en el blog de pruebas que tengo, si lo hacía en la misma entrada todo de golpe, es decir escribir con la tabla y las imágenes puestas, al pasar el ratón por encima del texto mientras hacía la entrada se me descolocaba todo, se me volvía loco esto.
Solución: Lo hice todo en un bloc de notas (porque así el texto no coge formato), copié primero el texto en la entrada, luego le dí a la pestañita de HTML y donde quería que se viera la tabla con las imágenes puse un <br> que ya sabéis para qué es y justo debajo pegué el código de mi tabla con las imágenes.

Eso me ha pasado a mí probad vosotras a ver si os pasa lo mismo o es cosa de mi navegador.

Lireth's Notebook

17 comentarios:

  1. Muchísimas gracias por el post. Los últimos días me estuve pegando yo con las tablas y el formateo de blogger, que no me ponía las cosas como yo quería, y terminé en el bloc de notas.

    ResponderEliminar
  2. Lireth muchisimas gracias por el post¡¡ estaba buscando hace tiempo ..como hacer eso y me salia todo movido y lo deje por imposible¡¡ iba a hacerlo con lo de links de fiestas jaja
    Gracias por el tuto esta genial¡¡
    Saludos y que tengas buena semana.:)

    ResponderEliminar
  3. Hola! es posible añadirle a la imagen un link para que vaya a una url específica? gracias

    ResponderEliminar
    Respuestas
    1. Si claro, en el mismo editor de la entrada, cuando ya la tengas dentro de la tabla la seleccionas y fíjate que en las herramientas del editor hay una que dice: Enlace, subrayadita, pues seleccionas la imagen y le das a enlace y pones la dirección de donde quieres que te lleve al hacer click. Y ya está.

      Eliminar
  4. Llevaba tiempo buscando esto... Muchas, muchas gracias, lo intentaré y ya te digo algo. :D

    ResponderEliminar
  5. Lo acabo de hacer como prueba en la sección de Cocinando con.. del blog y queda genial. Eres lo más, mil gracias. En cuanto tenga tiempo me pongo con las otras. :)

    ResponderEliminar
  6. Acabo de descubrir tu blog y me encanta! a ver si voy mejorando el mío gracias a tus consejos.

    A mi me gustaría hacer lo de la imagen y el texto pero para que la gente pueda copiarse un código html y poner mi insignia de la fiesta de los meses creativos que he creado en mi blog. ¿me podrías orientar en cómo hacerlo? es algo que me trae de cabeza porque si pego el texto me sale la imagen … en fin, espero que me puedas ayudar.

    Un abrazo!

    ResponderEliminar
    Respuestas
    1. Ya se a lo que te refieres, en cuanto tenga un hueco te mandó un mail diciéndote el código que necesitás poner en un gadget.

      Eliminar
  7. Muchisimas gracias , muy bien explicado. Voy a probar

    ResponderEliminar
  8. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
  9. Excelente explicación.
    Sólo me queda una duda. En mi blog, al insertar una tabla, la barra lateral se mueve a la parte inferior. Las dimensiones de la tabla son 300 px de alto por 500 px de ancho, y mi blog tiene un ancho de 1020 px con barra lateral de 180 px. ¿Qué podría estar saliéndome mal?
    Saludos.

    ResponderEliminar
  10. Gracias!!!! Fue muy fácil y me solucionaste un problema con las tablas. Agradezco tu dedicación y generosidad!!!!!!

    ResponderEliminar
  11. Hola alguien sabe como hacer dos linesa con imagenes, ya que siemple salen tres linesa para añadir imagenes dentro de un cuadro gracias

    ResponderEliminar
  12. Hola nesecito ayuda cada vez que pongo el codigo al ver en vista previa siempre me aparece en un costado como hago para que este en el centro , tu blog es genial ayudame por favor

    ResponderEliminar