Colspan all columns

Question

How can I specify a td tag should span all columns (when the exact amount of columns in the table will be variable/difficult to determine when the html is being rendered)? w3schools mentiones you can use colspan="0", but it doesn't say exactly what browsers support that value (IE 6 is in our list to support).

Edit: It appears that setting colspan to a value greater than the theoretical amount of columns you may have will work, but it will not work if you have table-layout set to fixed. Are there any disadvantages to using an automatic layout with a large number for colspan? Is there a more correct way of doing this?

Answer 1

For IE 6, you'll want to equal colspan to the number of columns in your table. If you have 5 columns, then you'll want: colspan="5".

The reason is that IE handles colspans differently, it uses the HTML 3.2 specification:

IE implements the HTML 3.2 definition, it sets colspan=0 as colspan=1.

The bug is well documented.

Answer 2

This attribute specifies the number of rows spanned by the current cell. The default value of this attribute is one ("1"). The value zero ("0") means that the cell spans all rows from the current row to the last row of the table section (THEAD, TBODY, or TFOOT) in which the cell is defined.

So basicly to be w3 compatible IE6 should do it... but it wont!

I would try to solve it with css width(using percentages)

Answer 3

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.

Answer 4

If you want to use tables you could go around the problem, and create a table with 1 column, make your 100%/all columns cell and then use another table inside the next tr-td.

Answer 5

Maybe I'm a straight thinker but I'm a bit puzzled, don't you know the column number of your table?

By the way IE6 doesn't honor the colspan="0", with or without a colgroup defined. I tried also to use thead and th to generate the groups of columns but the browser doesn't recognlise the form colspan="0".

I've tried with Firefox 3.0 on windows and linux and it works only with a strict doctype.

You can check a test on several bowser at

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

I found the test page here http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Edit: Please copy and paste the link, the formatting won't accept the double protocol parts in the link (or I am not so smart to correctly format it).

Answer 6

try using "colSpan" instead of "colspan". IE likes the camelBack version...

Answer 7

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%5Fcaption.asp) 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 my table </caption> <thead> or <tbody> ...

don't:

<div> <div style="float: left; + gimme some style!"> I must be floating left </div> <table> <thead> or <tbody> ... </table> <div style="clear: both"></div> yuck!

Answer 8

another working but ugly solution : colspan="100", where 100 is a value larger than total columns you need to colspan.

according to W3C, the colspan="0" option valids only with COLGROUP tag.