Book a Consultation

Two titillating table tips

Written by on CSS Wizardry.

Table of Contents

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.

See my fiddle!

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

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.



Did this help? We can do way more!


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.


Suffering? Fix It Fast!

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

Learn:

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.