Yesterday I was taught two awesome little <table> tips from two friends, Steve Melrose and Jon ‘Barry Crayon’ Cotton. I can’t believe I never knew about these two, they’re so simple but really cool*
*The tips are simple, not Steve and Jon.
The first, which Steve alerted me to, is colspan="0" and rowspan="0" which basically just makes the cell (<td>/<th>) to which it is applied span all the columns/rows between itself and the end/bottom of the table respectively.
I tweeted about how cool this was when Jon replied with info about colspan="100%"/rowspan="100%" which is similar to the above but instead of meaning ‘the rest of’ it just means ‘all of’. This is great if you want a cell to always span the whole width/height of a table but you don’t always know how large that table will be.
As far as I can tell Firefox is the only browser that supports [col|row]span="0" but all browsers seem to support [col|row]span="100%". I’ve not been able to do any more thorough browser testing but if anyone can feed back that’d be great!
By Harry Roberts on Wednesday, August 24th, 2011 in Web Development. Tags: HTML, Tables | 2 Comments »
+
John said on 24 August, 2011 at 7:53 pm
Not working in WebKit. 100% is not defined in the spec. 0 is. But it is a bug in WebKit that it doesn’t honor it (so no workie in Chrome or Safari).
Spec: http://www.w3.org/TR/html4/struct/tables.html#adef-colspan
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=10300
Dave McFarland said on 25 August, 2011 at 4:57 pm
In latest Opera, the colspan=0 doesn’t work, but the rowspan=0 and colspan=100% does.
However, if you change colspan=100% and rowspan=100% it works in Opera, Safari, Chrome, and Firefox (with exception of border problem on bottom of first “BMX” cell)
http://jsfiddle.net/sawmac/5jPY2/2/