Search code examples
htmlhtml-table

Problem with dividing cells (or expanding them?)

I'm learning HTML5, very basic level. The objective of the problem is to write a table that looks like this:Final Result.I'm unable to make the divisions on the 3rd column where says crítica 1,crítica2 and so on.

I've tried to mess with the rowspan and colspan attributes, but the table messes up and I can't wrap my head around how to approach this. Also, the space of the image already makes the next row take the same space, so I can't make it look like it. Please help. This is where I am:Now

This is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    table {
      width: 75%;
      text-align: center;
      border: 6px solid blue;
      border-collapse: collapse;
      margin-inline: 2px;
      font-family: Helvetica;
      font-size: 16px;
    }
    td,
    th {
      border: 4px solid green;
      background-color: lightpink;
    }
  </style>
  <body>
    <table>
      <caption>
        Cartelera
      </caption>
      <tr>
        <th style="background-color: red; text-align: center; color: blue">
          Sala 1
        </th>
        <td>
          <a href="https://www.imdb.com/title/tt1454468/"
            ><img src="imagenes/films/gravity.jpg"
          /></a>
        </td>
        <td>crítica 1</td>
      </tr>
      <tr>
        <th style="background-color: orange; text-align: center; color: blue">
          Sala 2
        </th>
        <td>
          <a href="http://www.imdb.com/title/tt1981115/"
            ><img src="imagenes/films/thor.jpg"
          /></a>
        </td>
        <td>crítica 1</td>
      </tr>
    </table>
  </body>
</html>
Solution

  • You were on the right track. You can do that with <table> and rowspan and colspan attributes like this:

    <table>
    <tr>
        <td rowspan="5">SALA 1</td>
        <td rowspan="5">Gravity image</td>
        <td>Criteria 1</td>
        <td>* * *</td>
    </tr>
    <tr>
        <td>Criteria 2</td>
        <td>* *</td>
    </tr>
    <tr>
        <td>Criteria 3</td>
        <td>* *</td>
    </tr>
    <tr>
        <td>Criteria 4</td>
        <td>* * *</td>
    </tr>
    <tr>
        <td>Duration ...</td>
        <td>link</td>
    </tr>
    <tr>
        <td rowspan="4">SALA 1</td>
        <td rowspan="4">Thor image</td>
        <td>Criteria 1</td>
        <td>* * * * * </td>
    </tr>
    <tr>
        <td>Criteria 2</td>
        <td>* * *</td>
    </tr>
    <tr>
        <td>Criteria 3</td>
        <td>* * * *</td>
    </tr>
    <tr>
        <td>Duration ...</td>
        <td>link</td>
    </tr>
    <tr>
        <td colspan="5">Trailors de los films</td>
    </tr>
    <tr>
        <td colspan="2">Gravity</td>
        <td colspan="2">Thor</td>
    </tr>
    <tr>
        <td colspan="2">Gravity trailor</td>
        <td colspan="2">Thor trailor</td>
    </tr>
</table>

    Just make sure that for every <tr> elements the column sum up to the same number.