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!

☕️ Did this help? Buy me a coffee!

Hi there, I’m Harry. 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.

Suffering? Fix It Fast!


  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

  • Talk & Workshop

    width=16 WebExpo: Prague (Czech Republic), April 2023

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.