Can table in HTML have different amount of cells on different rows?

Question

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

Answer 1

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.

Answer 2

That does not violate the definition. But you should use the attribute colspan 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>

Answer 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>

Answer 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.