Search code examples
htmlmerge

HTML table does not render correctly when the rows of adjacent columns are merged

I have an HTML table with 2 columns and 4 rows, and some cells are merged, causing what I believe to be a rendering error.

Below, I show the code of the table before the merging that causes the issue:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        border-spacing: 0;
      }
      td {
        border: 1px black solid;
      }
      td {
        width: 300px;
        height: 100px;
        background-color: aqua;
      }
      .no-width {
        width: 0;
        border-width: 0;
        background-color: rgba(0, 0, 0, 0);
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <!-- Row 1 -->
        <!-- <td class="no-width"></td> -->
        <td> Data cells {1, 1} </td>
        <td> Data cells {1, 2} </td>
      </tr>
      <tr>
        <!-- Row 2 -->
        <!-- <td class="no-width"></td> -->
        <td rowspan="2"> Data cells {2, 1} and {3, 1} rowspan="2" </td>
        <td> Data cells {2, 2} </td>
      </tr>
      <tr>
        <!-- Row 3 -->
        <!-- <td class="no-width"></td> -->
        <td style="background-color:lightpink;"> Data cells {3, 2} </td>
      </tr>
      <tr>
        <!-- Row 4 -->
        <!-- <td class="no-width"></td> -->
        <td> Data cells {4, 1} </td>
        <td style="background-color:lightpink;"> Data cells {4, 2} </td>
      </tr>
    </table>
  </body>
</html>

Below it is shown the corresponding web page - note that I identify each data cell by using tuples {m, n} where _m_ and _n_ are the indexes of the row and column, respectively. Note that cells {2, 1} and {3, 1} are merged.

enter image description here

Now, I intend to merge cells {3, 2} and {4, 2}, so I add the attribute rowspan="2" for the td element named "Data cells {3, 2}" in row 3 and remove the td named "Data cells {4, 2}" in row 4, resulting in the following code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        border-spacing: 0;
      }
      td {
        border: 1px black solid;
      }
      td {
        width: 300px;
        height: 100px;
        background-color: aqua;
      }
      .no-width {
        width: 0;
        border-width: 0;
        background-color: rgba(0, 0, 0, 0);
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <!-- Row 1 -->
        <!-- <td class="no-width"></td> -->
        <td> Data cells {1, 1} </td>
        <td> Data cells {1, 2} </td>
      </tr>
      <tr>
        <!-- Row 2 -->
        <!-- <td class="no-width"></td> -->
        <td rowspan="2"> Data cells {2, 1} and {3, 1} rowspan="2" </td>
        <td> Data cells {2, 2} </td>
      </tr>
      <tr>
        <!-- Row 3 -->
        <!-- <td class="no-width"></td> -->
        <td style="background-color:lightpink;" rowspan="2"> 
          Data cells {3, 2} and {4, 2}  rowspan="2"
        </td>
      </tr>
      <tr>
        <!-- Row 4 -->
        <!-- <td class="no-width"></td> -->
        <td> Data cells {4, 1} </td>        
      </tr>
    </table>
  </body>
</html>

Note that although all the 4 the tr elements are present, the table shows 3 rows only. The data cells of the 3rd and 4th rows are actually exhibited in the 3rd, say, "visual" row, and the 4th "visual" row is not shown.

enter image description here

In order to fix this issue, I added a first "hidden" column to the table as below:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        border-spacing: 0;
      }
      td {
        border: 1px black solid;
      }
      td {
        width: 300px;
        height: 100px;
        background-color: aqua;
      }
      .no-width {
        width: 0;
        border-width: 0;
        background-color: rgba(0, 0, 0, 0);
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <!-- Row 1 -->
        <td class="no-width"></td>
        <td> Data cells {1, 1} </td>
        <td> Data cells {1, 2} </td>
      </tr>
      <tr>
        <!-- Row 2 -->
        <td class="no-width"></td>
        <td rowspan="2"> Data cells {2, 1} and {3, 1} rowspan="2" </td>
        <td> Data cells {2, 2} </td>
      </tr>
      <tr>
        <!-- Row 3 -->
        <td class="no-width"></td>
        <td style="background-color:lightpink;" rowspan="2"> 
          Data cells {3, 2} and {4, 2}  rowspan="2"
        </td>      
      </tr>
      <tr>
        <!-- Row 4 -->
        <td class="no-width"></td>
        <td> Data cells {4, 1} </td>        
      </tr>
    </table>
  </body>
</html>

The resulting web pages is now displayed as expected:

enter image description here

In principle, I thought this was a rendering issue. I am aware that every row (<tr>) must contain the same amount of data cells to prevent display errors, but this table has the same amount of <td> elements in each row if we take the rowspans into account. However, different browsers behave in this way and I refuse to believe all of them use the same rendering engine, so I concluded my code is wrong. But what is wrong? I can't get that.

Can you guys help me to realize what is the mistake here, please? Or this is the expected behaviour and I should continue to use this hack of adding an "invisible" column to the table?

Solution

  • Here is a demonstration of how table cells fit into available slots (see more on table model processing here).
    NOTE: Table rows have height set, so that the rowspan can be seen.

    I have used coloring and displayed two tables, as a demo.

    table {
  border-spacing: 0;
}

tr {
  height: 50px;
}

td {
  border: 1px black solid;
  width: 300px;
  background-color: aqua;
}

.lg {
  background-color: lightgreen;
}

.lp {
  background-color: lightpink;
}
    <table>
  <caption>Table 1:</caption>
  <tr>
    <!-- Row 1 -->
    <td> Data cells {1, 1} </td>
    <td> Data cells {1, 2} </td>
  </tr>
  <tr>
    <!-- Row 2 -->
    <td> Data cells {2, 1} </td>
    <td class="lg" rowspan="2">Data cells {2, 2} and {3, 2} rowspan="2" </td>
  </tr>
  <tr>
    <!-- Row 3 -->
    <td class="lp" rowspan="2">Data cells {3, 1} and {4, 1} rowspan="2"
    </td>
  </tr>
  <tr>
    <!-- Row 4 -->
    <td> Data cells {4, 2} </td>
  </tr>
</table>

<table>
  <caption>Table 2:</caption>
  <tr>
    <!-- Row 1 -->
    <td> Data cells {1, 1} </td>
    <td> Data cells {1, 2} </td>
  </tr>
  <tr>
    <!-- Row 2 -->
    <td style="background-color:lightgreen;" rowspan="2">Data cells {2, 1} and {3, 1} rowspan="2" </td>
    <td> Data cells {2, 2} </td>
  </tr>
  <tr>
    <!-- Row 3 -->
    <td style="background-color:lightpink;" rowspan="2">Data cells {3, 2} and {4, 2} rowspan="2" </td>
  </tr>
  <tr>
    <!-- Row 4 -->
    <td> Data cells {4, 1} </td>
  </tr>
</table>

    Also, here is an image of the output page (two example tables):

    two tables example