Responsive Tables and Avoiding Table-Based Layout

Share This
Ben Steinbuhler
Share

In the last year or so, we’ve seen a change in the approach to web design. The ubiquity of smartphones and steady increase in mobile traffic is beginning to set an expectation with users that their experience will be optimized for the device they’re using. The result is commonly referred to as “responsive web design.” 

In a nutshell, responsive involves taking the same content and features and rearranging them so they’re easily viewed on a mobile device. Because we now need to think of how our site is going to be rendered in multiple dimensions, some of the old tricks people previously used no longer work.

Perpetrator #1: table-based layout.

Avoiding Tables for Layout

A properly built website is rendered by taking the HTML and combining it with CSS. The CSS will tell the elements within the HTML how big they are, where they should go, and how they relate to the other elements on the page. It is this approach that allows us to change the size and positioning of elements between a desktop and mobile experience by only changing the CSS.

What frequently happens, though, is a website administrator will use a table to achieve the look and layout of the page. What this means is they’ll create a table, use its rows and columns as a grid, and put their content in the appropriate cells.

For instance, some people want a two column look for their content and will use a table to get it. But because this layout is in the HTML, we can’t change it using CSS between devices. The slick two column look on your desktop is unreadable on your phone.

The point is to avoid using tables for the layout of a page. Tables should be reserved for displaying tabular data.

For instance, a size or pricing chart is commonly represented in a table. There is no other practical way to show it. But even though it’s an appropriate use, you still have the same problem as before. Either the table squishes itself to fit the width of the phone or horizontal scrolling is necessary. Neither solution is very good. What we need are responsive tables.

How to Create a Responsive Table

Fortunately, some enterprising people have figured a way around this. I recently implemented one of the solutions described at CSS Tricks’ website.

It requires a little HTML/CSS savviness to understand, but the gist of it is that the header row containing the labels is shown on the desktop but hidden on mobile. The labels for the data are replaced with a special attribute in the <td> cell called “data-title.”

When the table is rendered on mobile, each row on the table is shown as two columns; the first column shows the data-title, which is the same as what would be in header row, and the second column shows the data. The result is a perfectly responsive table. The images below illustrate the meaning.

Desktop Table

desktop-table

Responsive Table

responsive-table 

Takeaway

It isn’t important you understand the inner workings of responsive tables; the takeaway should be that tables should only be used when you have content that is appropriate and never for layout purposes. If you (or your web developer) are using tables properly and implement the special markup described in the linked post, you can keep your optimized mobile experience intact.

Share This

What are your thoughts?

By signing up you are agreeing to our Privacy Policy.

Comments (12)
  • I recommend Bootstrap as a great way to create a responsive website

    • Hi Al –

      I’m just starting to become familiar with Bootstrap. The solution I’ve seen them implement for tables is to introduce a horizontal scrollbar on just that element. Seems to work just fine. The solution here is a strictly CSS approach that reconfigures the table. I like it, but it’s not the only way to achieve the goal of making the data in the table readable.

  • table designs has never died. and whilst i let all download my designs for free, and never get negative feedback, and they all look good it all the browsers, + smartphones, what’s the issue 😉 sure, a responsive design is great for those willing to pay, all power to them

    • Mikey –

      Sure, a table-based layout will still work. But they’re harder to update and anything that has a fixed width can produce some weird results on different devices. True, responsive costs a little more to do, but with mobile traffic on the rise it’s becoming less of a luxury and more of a user expectation.

    • What year is this?!

    • I’d love to create a fully responsive template using nothing but tables. Is it possible?? The code can’t be too much more bloated than I’ve seen with boostrap, etc.

  • HI Ben Steinbuhler,

    i am having a different requirement with responsive table. a radio button should come before column header name. for ex: in above example a radio button should come before “Image” text. will this be possible.

    it will be great help for me if you could provide example.

    • Hi – sorry, I’m just seeing this now. I’m not sure what you’re angling for. Do you have a link that you could send so I could see what it is you’re trying to do?

  • Using Tables for layouts does often make more sense than the purists who believe HTML/CSS3 Div are the solution to everything like to admit.

    I am not talking about using tables to layout web pages. Bootstrap or some other Grid / Layout systems are the way to go. I am more referring to use tables for design elements.

    I am using table for complicated Form layouts or creation of widgets where I use tables with col/row span to combine groups of cells. I never use nested tables though.
    Using divs with fluid designs for the same is practically impossible and the resulting code far more complex than what can be achieved with a simple table. Tables will make it much easier to exactly position your text, images, labels etc. the way you want it to look.

    In addition, tables don’t necessarily render more slowly than dozens of nested divs with even more styles attached to it. With tables for fixed layouts, code is also often easier to read and maintain/debug. (Add a border to the table and voila you know whats going on… try this with 50 divs). Alos, I don’t really care about search engines when it comes to some widgets or forms where I deploy tables.

    The bottom line… with tables we just have more control over positioning as CSS simply does not yet provide the appropriate styling tools.
    Even Grid Systems often don’t offer a solution. I will happily change to Flexbox or some Grid Systems in the future but till then I’ll take the practical view that if Tables offer a better, easier and more consistent way to layout some design elements of my sites like widgets or forms I will happily use them.

    Dan

    • Dan, you has spoken from the heart.

  • Unfortunately sometimes you want the user to be able compare features side by side, by stacking all this info on mobile the user needs to flick up and down to compare. There must be a better solution for this right? This has always been the beauty of table format from Excel to Product Promos.

    • We are having issues with our pricing table with the link below https://www.dtapclinic.com/hiv/hiv-testing/ and its not mobile responsive. Please have a look this link with mobile devices
      We are looking for some solution if there is any possibility to fix this on mobile devices. We are using wordpress by the way. Looking forward to the suggestions.

      Thanks.

 
Join over 16,000 people who receive bi-weekly web marketing tips.

By signing up you are agreeing to our Privacy Policy.

Share This