Can Html Table Have Variable Number Of Cells On Rows?

May 29, 2023 Post a Comment

Or should the total amount of cells equal to columns * rows? A table with different amount of cells on different rows seems to pass the W3 Validator.

Solution 1:

That does not violate the definition. But you should use the colspan attribute to expand the column to the whole row:

<table>
  <tr>
    <td>Row with</td>
    <td>2 cols</td>
  </tr>
  <tr>
    <td colspan="2">Row with only one col</td>
  </tr>
</table>

That will also help if you have borders around the cells.

You can even have tables with a column that expands to two rows:

<table>
  <tr>
    <td rowspan="2">First column in row 1 and row 2</td>
    <td>Second column in row 1</td>
  </tr>
  <tr>
    <td>second column in row 2</td>
  </tr>
</table>

Solution 2:

You can use colspan, but the sum including the colspan value(s) should be equal for the table to render properly.

<table>
  <tr>
     <td colspan="2">blah</td>
  </tr>
  <tr>
     <td>blah</td>
     <td>boo</td>
  </tr>
</table>

The first row has one cell but it spans 2 cells because of the colspan, the second row has two cells and this is perfectly valid.

Solution 3:

Yes, it can. In table > tr > td, td is contain the content. Td reference here: http://www.htmlcodetutorial.com/tables/_TD.html. In that reference, you can see that TD has 2 attributes that is: colspan and rowspan. By using those 2 attributes, a table can have different amount of cells on different rows.
Demo:

<table border="1">
     <tr>
          <td>a</td>
          <td>b</td>
     </tr>
     <tr> 
          <td colspan="2">c</td>
     </tr>
</table>

And

<table border="1">
     <tr>
          <td rowspan="2">a</td>
          <td>b</td>
     </tr>
     <tr> 
          <td>c</td>
     </tr>
</table>

Solution 4:

Yes, you can make an HTML table and leave out <td> elements on some of the rows, but this is considered bad form because you can't be sure how the HTML renderer (browser) will handle this situation. It may be rendered slightly differently by different browsers.

The recommended way to define a table with a varying number of cells displayed per row is to use colspan to join two or more adjacent cells into one. This will keep the right-most cells lined up with their correct columns and eliminates any ambiguity about what you want the HTML renderer to do.

Solution 5:

You used:

<table>
<thead>
    <th>Column one</th>
    <th>Column two</th>
    <th>Column three</th>
</thead>
<tbody>
    <tr>
        <td rowspan="2">A large cell</td>
        <td>Another small cell0</td>
        <td>Another small cell0</td>
    </tr>
    <tr>
        <td>Another small cell1</td>
        <td>Another small cell1</td>
    </tr>
</tbody>

Html5 Pros