Colspan all columns

Solution 1:

Just use this:

colspan="100%"

It works on Firefox 3.6, IE 7 and Opera 11! (and I guess on others, I couldn't try)

Warning: as mentioned in the comments below this is actually the same as colspan="100". Hence, this solution will break for tables with css table-layout: fixed, or more than 100 columns.

Solution 2:

I have IE 7.0, Firefox 3.0 and Chrome 1.0

The colspan="0" attribute in a TD is NOT spanning across all TDs in any of the above browsers.

Maybe not recommended as proper markup practice, but if you give a higher colspan value than the total possible no. of columns in other rows, then the TD would span all the columns.

This does NOT work when the table-layout CSS property is set to fixed.

Once again, this is not the perfect solution but seems to work in the above mentioned 3 browser versions when the table-layout CSS property is automatic. Hope this helps.

Solution 3:

If you want to make a 'title' cell that spans all columns, as header for your table, you may want to use the caption tag (http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) This element is meant for this purpose. It behaves like a div, but doesn't span the entire width of the parent of the table (like a div would do in the same position (don't try this at home!)), instead, it spans the width of the table. There are some cross-browser issues with borders and such (was acceptable for me). Anyways, you can make it look as a cell that spans all columns. Within, you can make rows by adding div-elements. I'm not sure if you can insert it in between tr-elements, but that would be a hack I guess (so not recommended). Another option would be messing around with floating divs, but that is yuck!

Do

<table>
    <caption style="gimme some style!"><!-- Title of table --></caption>
    <thead><!-- ... --></thead>
    <tbody><!-- ... --></tbody>
</table>

Don't

<div>
    <div style="float: left;/* extra styling /*"><!-- Title of table --></div>
    <table>
        <thead><!-- ... --></thead>
        <tbody><!-- ... --></tbody>
    </table>
    <div style="clear: both"></div>
</div>

Solution 4:

As a partial answer, here's a few points about colspan="0", which was mentioned in the question.

tl;dr version:

colspan="0" doesn't work in any browser whatsoever. W3Schools is wrong (as usual). HTML 4 said that colspan="0" should cause a column to span the whole table, but nobody implemented this and it was removed from the spec after HTML 4.

Some more detail and evidence:

• All major browsers treat it as equivalent to colspan="1".

  Here's a demo showing this; try it on any browser you like.

  td {
    border: 1px solid black;
  }

  <table>
    <tr>
      <td>ay</td>
      <td>bee</td>
      <td>see</td>
    </tr>
    <tr>
      <td colspan="0">colspan="0"</td>
    </tr>
    <tr>
      <td colspan="1">colspan="1"</td>
    </tr>
    <tr>
      <td colspan="3">colspan="3"</td>
    </tr>
    <tr>
      <td colspan="1000">colspan="1000"</td>
    </tr>
  </table>

• The HTML 4 spec (now old and outdated, but current back when this question was asked) did indeed say that colspan="0" should be treated as spanning all columns:

  The value zero ("0") means that the cell spans all columns from the current column to the last column of the column group (COLGROUP) in which the cell is defined.

  However, most browsers never implemented this.

• HTML 5.0 (made a candidate recommendation back in 2012), the WhatWG HTML living standard (the dominant standard today), and the latest W3 HTML 5 spec all do not contain the wording quoted from HTML 4 above, and unanimously agree that a colspan of 0 is not allowed, with this wording which appears in all three specs:

  The td and th elements may have a colspan content attribute specified, whose value must be a valid non-negative integer greater than zero ...

  Sources:

  • https://www.w3.org/TR/html50/tabular-data.html#attributes-common-to-td-and-th-elements
  • https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements
  • https://www.w3.org/TR/html53/tabular-data.html#attributes-common-to-td-and-th-elements

• The following claims from the W3Schools page linked to in the question are - at least nowadays - completely false:

  Only Firefox supports colspan="0", which has a special meaning ... [It] tells the browser to span the cell to the last column of the column group (colgroup)

  and

  Differences Between HTML 4.01 and HTML5

  NONE.

  If you're not already aware that W3Schools is generally held in contempt by web developers for its frequent inaccuracies, consider this a lesson in why.