Search code examples
cssxhtmlsemantic-markup

Please explain rowspan and colspan, col and colgroup


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


Solution

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