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

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

• col and colgroup
• colspan
• rowspan

Answer 2

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

Answer 3

Refer the following URL

http://www.w3schools.com/html/html_tables.asp

Answer 4

Have you actually bothered to read the spec yet? Or are you just having trouble understanding it?

<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->

<!-- Scope is simpler than headers attribute for common tables -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">

<!-- TH is for headers, TD for data, but for cells acting as both use TD -->
<!ATTLIST (TH|TD)                      -- header or data cell --
  %attrs;                              -- %coreattrs, %i18n, %events --
  abbr        %Text;         #IMPLIED  -- abbreviation for header cell --
  axis        CDATA          #IMPLIED  -- comma-separated list of related headers--
  headers     IDREFS         #IMPLIED  -- list of id's for header cells --
  scope       %Scope;        #IMPLIED  -- scope covered by header cells --
  rowspan     NUMBER         1         -- number of rows spanned by cell --
  colspan     NUMBER         1         -- number of cols spanned by cell --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
  >

So rowspan is the # of rows a cell spans, same with colspan.

The COLGROUP element creates an explicit column group. The number of columns in the column group may be specified in two, mutually exclusive ways:

1. The element's span attribute (default value 1) specifies the number of columns in the group.
2. Each COL element in the COLGROUP represents one or more columns in the group.

Colgroup is used around col elements which can be used to style the columns.

Answer 5

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>