Old HTML tables can be upgraded into a responsive design with CSS3 and media queries

How to convert old HTML tables into responsive Web design

Disclosure: Just so you know, we may sometimes earn a small commission from affiliate links on this site.

Mobile first, responsive Web design is something that can't be ignored because devices likes tablets and smartphones are quickly becoming the dominant browsing device of choice for the burgeoning millennial market.

If you are one of those unlucky people to have built your site more than a few years ago, on a platform that used the old table based Web design paradigm, then you have two choices:

  1. Upgrade to a modern Web builder
  2. Upgrade your design to be responsive using media queries and CSS3

Option 1 is really the recommended route because you only have to upgrade once and your site will automatically enjoy round the clock upgrades as the site builder teams compete to stay in front.

But, if like me, you find that there's no way around using old style HTML tables, then option 2 is the only way forward. Fortunately, it's actually quite easy to mimic responsiveness. And here's how...

HTML tables

Tables are a nice way to display tabular information - like finance reports. Unfortunately, they are structured and designed with this in mind and come with some severe limitations in terms of what one can do with their layout.

A table, in general, consists of rows and cells and looks something like this in the HTML code:

<table>
  <tr>
    <th>Column 1</th><th>Column 2</th><th>Column 3</th>
  </tr>
  <tr>
    <td>Value 1</td><td>Value 2</td><td>Value 3</td>
  </tr>
</table>

which looks a bit like this when rendered on a page:

Column 1 Column 2 Column 3
This is the value of the first cell and if the text is long it can look really bad and awkward on a mobile device because the text simply scrolls down the page in a narrow column instead of spreading out to fill the whole page. This is the value of the second cell and if the text is long it can look really bad and awkward on a mobile device because the text simply scrolls down the page in a narrow column instead of spreading out to fill the whole page. This is the value of the third cell and if the text is long it can look really bad and awkward on a mobile device because the text simply scrolls down the page in a narrow column instead of spreading out to fill the whole page.

To see why HTML tables are so unfriendly when it comes to responsive design, make your browser narrower and narrower while watching the content in the above table.

Since the table has no knowledge of mobile page design it keeps its structure the whole time and this can end up making things really unattractive and awkward to read on a smaller device.

Ideally, we would want the layout of the table to change once the screen gets too small so that the left hand column appears on top, across the entire width of the screen. The second and third columns would become the second and third rows respectively.

But HTML tables have no native way of doing this...

CSS3 and media queries

Fortunately, there is a trick we can use in our stylesheets that will change the layout of the table in exactly the right way based on the dimensions of the browsing device. In fact, I have already done this on SME Pals for our small business ideas resource page.

A table is perfect for the layout of the ideas in a large screen (like a PC) and looks like this on a PC:

Traditional non-responsive HTML table layout

But, like our table shown above, the content can get squashed unless the table can automagically re-arrange itself to allow each cell access to the full width of the screen. On a mobile device the table looks like this:

CSS3 media queries make HTML table layout responsive

Note that the idea title and share buttons now appear above the description instead of in the same row. This means that the description isn't squeezed into half the table as the screen narrows down to smartphone width.

As it turns out, the process is super easy. All that is required is a quick change to your stylesheet, within a media query, as follows:

@media only screen and (max-width: 991px) {

.small-business-ideas table tr td{
display:block;
clear:both;
width: 95%;
}

...

}

Obviously, you would need to alter the above code to apply to a particular table(s) on your own site. In our case, the above declaration box used a class selector to specify our "small business ideas" table.

In particular, the above declaration forces the individual table cells to:

  1. fill 95% width of the page
  2. appear beneath earlier page elements
  3. but only when the screen is less than 991px in width (this comes from the media query)

The net effect of this is to convert the table into what appears to be a responsive design that fits the screen beautifully. We can apply this effect to the three column table from earlier in the article so that it behaves responsively, as shown here (Hint: resize the width of your browser to see how the layout responds):

This is the value of the first cell and if the text is long it can look really bad and awkward on a mobile device because the text simply scrolls down the page in a narrow column instead of spreading out to fill the whole page. This is the value of the second cell and if the text is long it can look really bad and awkward on a mobile device because the text simply scrolls down the page in a narrow column instead of spreading out to fill the whole page. This is the value of the third cell and if the text is long it can look really bad and awkward on a mobile device because the text simply scrolls down the page in a narrow column instead of spreading out to fill the whole page.

Responsive Trick: Show & Hide Table Columns

You can also hide less important columns by giving them a class name (i.e. responsive-column1, responsive-column2, etc) and using CSS media queries to hide those columns - using display:none; - as the screen width shrinks.

Here's a fantastic example of hiding table columns for responsive design (hint: scroll down to the 'Savings & Buy Ratings' table, and resize the screen to see columns appear and disappear).

If you aren't already using media queries and CSS3 then I recommend you spend a bit of time learning about each. Here are a few resources to help you out:

Remember that this is a useful hack to help you in the short term, if there is no other option. But fundamentally, table based layouts are old, redundant, inflexible, and make many browsers feel bad.

Hopefully, you will now be able to use a clever combination of CSS3 and media queries to help make your site a bit more mobile friendly. But, if your site is designed using tables, it's time to upgrade the whole thing to something newer and better.

Have you tried using CSS3 media queries? Did they do the trick, or are you still stuck with a rigid design? Share your tips and experiences upgrading to a mobile friendly platform in the comments below.

comparing two leading site builders

At some point, you're going to need to decide which of the most popular website builders (Wix or Weebly) to use for your own small business website.

Five great ways to make your site better

There are a few main reasons why every Webmaster should be constantly on the lookout for ways to improve or upgrade their websites.

For a start, Google takes Web page layout and design seriously because they know it impacts the quality of the user experience. They'll even take steps to penalize sites they think are poorly designed.

The design of your website also determines how well it converts. A conversion might be a sale on an eCommerce site, or a newsletter signup on a blog.

website design guide for beginners

This step-by-step simple guide to creating a website is for people who want a professional site with great design and functionality that's easy and cheap to

Web design mistakes that can be fixed (unlike spilled milk)

Good Web design is important for success online, but big companies implement bad design all the time.

Basic HTML code for bloggers and newbies

Having a basic knowledge of HTML (HyperText Markup Language) can be a huge help for bloggers, online entrepreneurs, or anyone who might be asked to

Shopify eCommerce website builder

Shopify is an eCommerce website builder that makes it quick and easy for anyone to build and host their own cutting-edge, responsive online store.

It's the fastest growing hosted shopping cart solution that is dominating the market due to it's elegant user interface, simplicity, power and speed.

Because it's important for an online venture to become operational as quickly and cheaply as possible, Shopify undoubtedly represents the best solution for small to medium sized startups.

List of best Web hosts according to Google

Ever wondered whether Google's top page results are of sufficient quality to be able to base important procurement decisions, for something like Web hosting, on them?

We've always prided ourselves on being able to give pretty accurate reviews of products and services for SMEs, but I thought it would be interesting to see how our manual research compares to Google's algorithms.

Almost everyone uses Google to search for the information they need to make decisions about which services to utilize in their own company.

Improve UX Web design to help users and grow your business

User eXperience (UX) plays a vital role in how well your site converts traffic, and we've got some interesting Web design tips that will give your v

HostGator vs. GoDaddy VPS Plans

Both GoDaddy and HostGator offer popular VPS plans available for small to medium businesses and bloggers, and we're going to compare everything from brand popularity to VPS server resources, and pricing.

We've also included research into the prevailing customer sentiment by searching for and aggregating hosting reviews of their respective VPS hosting - to give you the most reliable information to help make a decision on your next Web hosting plan.

Bigcommerce shopping cart software

Hosted shopping carts, like Bigcommerce, offer a quick and affordable way to build an eCommerce site without requiring any technical or Web design skills.

Bigcommerce provides cutting edge Web design with great SEO (Search Engine Optimization), mobile support and plenty of integration with 3rd party platforms (like eBay) to help drive sales.

In addition, Bigcommerce has already handled over one billion dollars in eCommerce transactions so you can be sure of a safe and reliable platform on which to build your business.

Top 3 eCommerce site builders, comparison review. Pic by Martin SoulStealer

We've researched and compared each of the three leading eCommerce website builders to highlight which ones are the most popular, offer the best value for mon

Free Website designs from top website builders. Pic by Yann Coeuru

Website builders have forever changed the world of Web design by allowing us to use free, responsive themes and templates to manage the look and feel of our