APRENDAMOS A DISEÑAR

TABLAS HTML

Insertando dos imágenes en HTML.

Hola mis pequeños ponquemontes, al habla el ponquesensei. Hoy vengo con el primero tutorial de HTML, que es simple y sencillo, a decir verdad. Lo que haremos será lograr el efecto de colocar dos imágenes juntas, ¿lo han intentado alguna vez? ¿Colocar dos imágenes y resulta que en lugar de quedar juntas, quedan una sobre otra? Bueno, aquí les explico como evitar eso.

Este tutorial sirve para muchas cosas, como sabrán, modificando bien los atributos podríamos usarlo para hacer posts de rol, tablillas de personajes, descripciones, la imaginación es el límite, muhéres. Sin más, vamos al tutorial.

Bien, para hacer esto vamos a utilizar un table. Table es un atributo en el que no me explayaré porque para lo que realmente es usado es para, valga la reundancia, crear tablas, y nosotros lo modificaremos un poquitín a nuestro gusto, por lo que si les pongo información de internet, bueno, no vendrá acorde al tema.

Lo que les explicaré será lo que tendrán que saber, pero lo explicaré con mis palabras para que, pues, venga acorde al tema.

Bueno, para usar el atributo TABLE usaremos lo siguiente:

Código:

<table></table>

Y bueno, no hay mucho problema hasta el momento, ¿verdad?

Lo que haremos ahora será, en términos del atributo, agregar "una columna", que es dónde modificaremos para que aparezcan imágenes en lugar de columnas, para agregar las columnas usaremos lo siguiente:

Código:

<td></td>

Y el code final sería:

Código:

<table><td></td><td></td></table>

p.d: entenderán que coloqué dos columnas porque son dos imágnes.

Y bueno, lo que sigue no es nada del otro mundo. Lo que haremos ahora será colocar dos imágenes dentro, de la misma manera en la que se les enseñó a hacer imágenes, todo lo que tienen que fijarse es que quede dentro de los < td* ><*/td> cada una respectivamente.
Por ejemplo, yo tengo esta imagen

y esa otra

Entonces la primera la pongo entre los dos primeros td's y la segunda en los otro dos, así:

Código:

<table><td>PRIMERA AQUÍ</td><td>SEGUNDA AQUÍ</td></table>

Finalmente lo encerramos entre dos <*center> < /*center> y entonces:


Si yo quisiera, por ejemplo, colocar otras dos imágnes pero abajo, lo que haría sería encerrar los dos td's primeros entre dos < tr > , así:

Código:

<center><table><tr><td><div style="background-image: url(http://i.imgur.com/1HjW0AE.png); width: 150px; height: 200px; border: solid 5px #1b7b7f;"></div></td><td><div style="background-image: url(http://i.imgur.com/akLMgdB.png); width: 150px; height: 200px; border: solid 5px #1b7b7f;"></div></td></tr></table></center>

Y entonces duplicaríamos el code, lo único sería cambiar el link de las imagenes.



Realmente no es complicado, ¿verdad?, lo demás es imaginación. Bueno, espero que lo hayan comprendido. Cualquier duda, ya saben qué hacer. Quiero ver sus resultados y sus dudas.

Code final:

Código:

<center><table><td><div style="background-image: url(http://i.imgur.com/1HjW0AE.png); width: 150px; height: 200px; border: solid 5px #1b7b7f;"></div></td><td><div style="background-image: url(http://i.imgur.com/akLMgdB.png); width: 150px; height: 200px; border: solid 5px #1b7b7f;"></div></td></table></center>

code de las cuatro imágenes

Código:

<center><table><tr><td><div style="background-image: url(http://i.imgur.com/1HjW0AE.png); width: 150px; height: 200px; border: solid 5px #1b7b7f;"></div></td><td><div style="background-image: url(http://i.imgur.com/akLMgdB.png); width: 150px; height: 200px; border: solid 5px #1b7b7f;"></div></td></tr><tr><td><div style="background-image: url(http://i.imgur.com/1HjW0AE.png); width: 150px; height: 200px; border: solid 5px #1b7b7f;"></div></td><td><div style="background-image: url(http://i.imgur.com/akLMgdB.png); width: 150px; height: 200px; border: solid 5px #1b7b7f;"></div></td></tr></table></center>