Alinear imágenes

Hoy os presento el truco que utilizo para alinear varias imágenes (o cualquier objeto) en la misma línea, por el que ya me han preguntado varios compañeros blogueros, así que lo publico para que este disponible para todos.

Pues muy sencillo, se trata de emplear una tabla y encerrar en una celda cada uno de los objetos que queramos alinear, sean imágenes o cualquier otra cosa. Muy bien, pero, ¿como se hace esto? Fácil, son siempre los mismos 3 pasos:
  1. Definimos la tabla: para ello empleamos las etiquetas <table> y </table>. Además, podemos definir atributos como border, width, height...
  2. Definimos cada fila: empleamos las etiquetas <tr> y </tr> para cada fila, entre las dos del punto anterior. Además, podemos definir atributos como bgcolor, background, aling, valign...
  3. Definimos cada celda: en el interior de las anteriores, definimos cada celda usando <td> y </td>, con el contenido entre estas dos. Además, podemos definir atributos como colspan, rowspan...
Bueno, hasta aquí, es un poquito la teoría, en cualquier caso os dejo recomiendo este tutorial para saber más de los atributos y ver más ejemplos. Yo aquí os dejo unos ejemplos de tablas, con el código correspondiente a cada una:

Celda 1.1Celda 1.2
Celda 2.1Celda 2.2
<table>
<tr><td bgcolor="red">Celda 1.1</td><td bgcolor="yellow">Celda 1.2</td></tr>
<tr><td bgcolor="#33cc00">Celda 2.1</td><td bgcolor="cyan">Celda 2.2</td></tr>
</table>
Celda 1.1Celda 1.2Celda 1.3
Celda 2.2 y 2.3
<table>
<tr><td rowspan="2" bgcolor="yellow">Celda 1.1</td><td bgcolor="red">Celda 1.2</td><td bgcolor="cyan">Celda 1.3</td></tr>
<tr><td colspan="2" bgcolor="#33cc00">Celda 2.2 y 2.3</td></tr>
</table>

Bueno compañeros, esto es todo, espero que os resulte util, es una herramienta que sirve para un montón de cosas, para cualquier duda podeis dejar un comentario y miramos.

Sen máis...

6 comentarios:

MiriMiriChan dijo...

:D Una forma estupenda y útil de alinear imágenes!!! ^^ MiriAbashos!

Birdelo dijo...

Hola amigo, te ha quedado rebien, aunque yo no se para que es que utilizas eso!.

Con respecto al chat aún eso no ha crecido mucho que digamos, estoy invitando gente, en la tarde temprana, hubieron como unos 6 conectados, pero nada más!!!.

Birdelo dijo...

Además me parece muy bueno idea el dato suministrado, la verdad es que se pasa mucho trabajo poniendo esas imágenes que siempre quedan torcidas y mal puestas...

kaka dijo...

@Birdelo Es verdad, a mí me parece muy anti estétitco que blogger coloque de serie las imagenes unas encima de otras, con lo lindas que quedan en fila.

Y es eso, como varios compañeros me preguntaron como lo hacía, pues me decidí a hacer una entrada para que la respuesta no fuese sólo privada.

Un abrazo!

Microjetas dijo...

Buenas, soy Microjetas y me paso para recordarte la actualización de la lista de GoMeMe 9.0, pero OJO! ACTUALIZA TODA LA LISTA de blogs adheridos (lo que incluye en enlace hacia mi blog) ya que he cambiado de url.

Aparte de que algunos blogs han sido eliminados por no cumplir los requisitos, y no merecen en enlace.

Recuerda: ACTUALIZA TODO EL POST/LISTA de adheridos.

Un saludo y gracias.

P.d: Si eres blogger y todavía no conoces esta iniciativa, no dudes en apuntarte. Entra en mi blog!!

Syl dijo...

Hola guapoooo! ya estoy por aqui de nuevo :) Me apunto esto de las tablas, que está interesante! y ya de paso te doy +5
Un saludo!!

 
Fogar do Chimpín, 2008
Plantilla de diseño propio.