By Harry Roberts
Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.
Written by Harry Roberts on CSS Wizardry.
N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…
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!
N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…
Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.
Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.
You can now find me on Mastodon.
I help teams achieve class-leading web performance, providing consultancy, guidance, and hands-on expertise.
I specialise in tackling complex, large-scale projects where speed, scalability, and reliability are critical to success.