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.1 Celda 1.2 Celda 2.1 Celda 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.1 Celda 1.2 Celda 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...