Question 270718 in Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


  1. 0

    You need to structure them as different elements within the element, so you can use divs to hold each of them and style them appropriately.

    In the code below, I have:

    • created four divs inside the <td> element and assigned different class names,
    • added the CSS styling for the classes

    1) HTML

    Replace:

    <td>crítica 1</td>

    with:

    <td class="td-with-children">
    <div class="c1">Critica 1</div>
    <div class="c2">Critica 2</div>
    <div class="c3">Critica 3</div>
    <div>The last div</div>
</td>

    2) Add the styles

    .td-with-children {
  text-align: center;
}
.td-with-children div {
  padding: 10px;
  border-bottom: 4px solid green;
}
.td-with-children div:last-child {
  border-bottom: none;
}
.c1 {
  background-color: yellow;
}
.c2 {
  background-color: lightgreen;
}
.c3 {
  background-color: turquoise;
}

    This will give you your desired look and you can use the classes across the table for all cells of that column.

    It is also still semantically correct since divs are basically wrapper elements and hold no semantic meaning.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search