Please explain rowspan and colspan, col and colgro

问题:

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

回答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>

回答2:

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

• col
• colgroup
• colspan
• rowspan

回答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