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.
Seguimos.
✿✿✿
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure