Search code examples
htmlcsswebcss-tables

How to make a 2x2 table in HTML with a text in the right

This is what I have to do

My code is not working. The table has a big blank space in the middle and the text is not on the aside, it is too big and the background colour doesn't get it.

I tried this:

div {
  background-color: #6655b3;
}

aside {
  width: 720px;
  float: right;
  height: 600px;
  margin-bottom: 10px;
  background-color: #6655b3;
}

.tabla-con-imagenes table {
  float: left;
}

.tabla-con-imagenes img {
  max-width: 40%;
  height: auto;
  display: block;
}
<h2 ALIGN=center>Sinopsis</h2>
<div class="tabla-con-imagenes">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <img src="imagen1.jpg" alt="Imagen 1">
      </td>
      <td>
        <img src="imagen2.jpg" alt="Imagen 2">
      </td>
    </tr>
    <tr>
      <td>
        <img src="imagen3.jpg" alt="Imagen 3">
      </td>
      <td>
        <img src="imagen4.jpg" alt="Imagen 4">
      </td>
    </tr>
  </table>
  Your text
  <aside>
    <p ALIGN=right>TEXT.</p>
  </aside>
</div>

Solution

  • Grid is by far the best way to arrange this sort of layout. To get you started here's a few resources:

    Your layout using grid can be seen below. I've annotated the pertinent bits:

    .container {
  display: grid; /* set up grid */
  grid-template-columns: 1fr 1fr 2fr; /* set up 3 columns, the last one being twice as big as the first two*/
  grid-auto-rows: 1fr; /* all the rows are to be the same height */
  gap: 0.5rem; /* put a 0.5 rem gap between all elements */
}

aside {
  grid-row: span 2; /* make the aside span 2 rows */
  outline: 1px solid red;
  margin-left: 0.5rem;
}

/* Just prettification stuff below */

body {
  font-family: Arial, Helvetica, sans-serif;
}

h2 {
  text-align: center;
}

img {
  display:block;
  width:100%;
}
    <h2>Sinposis</h2>
<div class='container'>
  <div class='image'><img src='http://placekitten.com/300/200'></div>
  <div class='image'><img src='http://placekitten.com/300/200'></div>
  <aside>
    Some text here
  </aside>
  <div class='image'><img src='http://placekitten.com/300/200'></div>
  <div class='image'><img src='http://placekitten.com/300/200'></div>
</div>