Please explain rowspan and colspan, col and colgroup

Question

Can anyone explain rowspan and colspan, col and colgroup? And are these W3C valid and semantically correct? Under which circumstances are these useful?

Answer 1

colspan

<table border="1">
  <tr>
    <th colspan="2">people are...</th>
  </tr>
  <tr>
    <td>monkeys</td>
    <td>donkeys</td>
  </tr>
</table>

rowspan

<table border="1">
  <tr>
    <th rowspan="2">monkeys are...</th>
    <td>... real monkeys</td>
  </tr>
  <tr>
    <td>... 'unreal' monkeys (people...)</td>
  </tr>
</table>

w3c

as you see, this is for connecting table-cells - and because this is sometimes neccessary, it's valid (RegDwights links will give more information...).

col/colgroup

colgroup and col are used to set attributes to every line in the table (so you don't have to write width="80" for the first td in every line(tr)):

<table border="1">
  <colgroup>
    <col width="80">
    <col width="100">
    <col width="320">
  </colgroup>
  <tr>
    <td>first line, first column</td>
    <td>first line, second column</td>
    <td>first line, third column</td>
  </tr>
  <!-- more table-lines... -->
</table>

you can also group the cols, lets say the first and second column should get a with of 80, the third should get 320:

<table border="1">
  <colgroup width="80" span="2"></colgroup>
  <colgroup width="320" span="1"></colgroup>
  <tr>
    <td>first line, first column</td>
    <td>first line, second column</td>
    <td>first line, third column</td>
  </tr>
  <!-- more table-lines... -->
</table>

Answer 2

Yes, they are all recommended by W3C. Here are direct links to the documentation:

• col
• colgroup
• colspan
• rowspan

Answer 3

rowspan and colspan are attributes that allow the designer to 'merge' cells - much like the same command in Excel (for example).

col and colgroup allow the designer to apply css to a vertical column, rather than having to apply css to individual cells in a column. Without these, this task would be much more difficult as html tables are row-based.

All four of these are valid.

For future reference, try http://reference.sitepoint.com/html