Skip to content
HTML

Image with Text

13 Image with Text

Section titled “13 Image with Text”

Antes de que existiera CSS, el uso de tablas era la única forma posible de hacer algunos diseños de sitios web. Es un proceso muy similar a la creación de diseños en MS Office.

Ahora, vamos a recrear un ejemplo similar a este:

Preview

📝 Instrucciones:

Section titled “📝 Instrucciones:”
  1. Crea un <table> con el atributo border = "0".
<table border="X"><table>
  1. Agrega la fila <tr> con 2 columnas <td> dentro.
<table border="X">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

  1. La primera columna (<td>) debe tener el atributo width="25%", este elemento debe contener una imagen con el atributo width="100%".

    Utiliza esta imagen: "../../../assets/13-images-with-text.jpg"

<td width="X"><img width="X" src="url"/></td>
  1. La segunda columna (<td>), contiene el párrafo junto con el atributo valign="top" (este sirve para mover el texto a la parte superior de la celda).
<td valign="X">aquí va el párrafo</td>

💡 Pista:

Section titled “💡 Pista:”
  • Puedes usar un texto de ejemplo como “Lorem ipsum dolor sit amet, consectetur adipiscing elit…”