How & When to Build Website Content using Tables

By / Sep 18, 2012 / Tips
shares

Back in time over a decade ago, web development was still living through its infancy. Developers would commonly build website layouts constructed with HTML4 tables, and this was standard practice most of the time. When CSS finally grew into popularity precedents began to change. It was now easier for developers to use div elements and position everything with CSS stylesheets.

Featured Image - HTML4.0 books for coding websites development

But even following modern practices of HTML5/CSS3 we can still find a use for tables. The specifications haven’t changed much since HTML4 and with good reasoning. In this article I’d like to share a few techniques and ideas for when you should be using tables in your webpages. We can also look into where tables will be going in the future of content on the Internet.

Historical Origins

Tables were originally the best solution for website layouts because of their flexibility. Developers wanted to support all screen resolutions and tables could handle these additional attributes. These include the width attr which was specified in a percentage value. This means your table rows would adjust naturally based on a percentage of the browser window.

Fluid-width layouts were very popular since design aesthetics have not always been as influential. As CSS became more prevalent it didn’t make sense to style webpages using table attributes anymore. Each row of data had to be split by <tr> tags which would eventually feel bulky and abnormal.

Rail train in San Joaquin Valley California

But this formatting has continued to this day with modern HTML5 tables. You can read a bit more about the HTML table element from W3Schools excellent resources page. There is also a list of related tags and optional attributes correlated with formatting tables.

How To Display Tabular Data

By far the most common useage of modern tables is when formatting tabular data. This may seem like a no-brainer but I have run into countless developers who simply loathe tables. It’s like an all-or-nothing relationship where you either use them or you don’t. This is a horrible attitude since you’re fighting against the natural order!

HTML tables are great for data listings, catalogs, image galleries, products, or anything with a similar block-style layout. You’ll be able to create these pages using CSS but it’s going to require a litany of additional properties. So why even go with that route if it requires additional work?

Tables can naturally be split into core sections with a header, body, and footer. This schematic follows any traditional layout where you’ll have some header rows to define the datatypes, followed by a long list of data rows. Adding a footer is completely optional but it can be used for some type of legend or table key index.

Formatted Table Captions

Another newer addition with HTML5 are table captions which hover towards the top of the page. These fields are often inside the table element yet right before you open any new content rows. It’s almost like a header to define the content found inside your table listing.

To scale this out even further you can add a whole descriptive block of text defining your table output. The newer HTML5 tags for details and summary are ultimately optional but very useful. I can think of various corporate environments where you need to describe various bits of data and share it onto a public webpage.

Table caption and summary tags HTML5 HTML4 specs

This extra content is beneficial not just for the end user, but also for search engine crawlers. Captions are considered much like table headers and the summary description is a good way to load up related keywords. Again these are completely optional tags, but they can exert a large effort towards keeping your webpage organized.

Dynamic JS Effects

Tables can be even cooler if you pair JavaScript libraries into your layout. It’s possible to allow users functionality such as drag-and-drop, inline editing, and so much more. Think of all the different pricing tables or member lists you’ve ever seen. All those layouts can be created custom from scratch and even optimized using tables.

Tablecloth JavaScript library tables HTML data

One of my favorite scripts is named Tablecloth which is a completely dynamic open source solution based on JavaScript. By including a copy of the CSS/JS files you can add hover functionality to any table element in your webpage. As you mouse over table cells you’ll see a highlighted row and column effect matching your current position.

The extensibility of these scripts only adds to the growing collection of open source solutions perfectly formatted to be used by more advanced frontend web developers.

How to Determine Proper Situations?

It can be difficult figuring out which situations require a table in your layout. I very rarely use them except for content which is often formatted into rows. One reason this works well is because you don’t need to adjust floating divs and create “artificial” rows in your markup.

Tabular data can be found in almost every website so it’s not cheating to use divs or other markup instead. Tables are beneficial to developers who understand why they’re using that markup and how you can format rows & columns together. Tabular layouts are perfect for galleries with smaller thumbnails linking to full images, videos, whatever.

Fireplace room interior design

I would argue the largest reason to not use tables is when formatting your overall website layout. The newer HTML5 header, footer, nav, and section elements fit the roles much better. But understand there is no “wrong” area to use tables in your content. It ultimately boils down to personal preferences and what you feel comfortable designing into your markup.

Related Articles

Conclusion

Tables are still just as relevant in web design today as they have ever been over the years. Developers have evolved and found better tools for creating entire website layouts. But this has also guided new semantics which follow content as the primary motivator in web development.

I hope this article can provide some deeper insight for newer web developers. It’s true that almost nobody suggests building an entire website with tables anymore. But it’s also true that nobody is ruling out tables as a deprecated element. There is a purpose for every bit of website markup and following these standards will get you more experience as a skilled web developer.

About the Author

Jake Rocheleau is a creative writer and UI designer. You can follow him on twitter @jakerocheleau or visit his personal website at JakeRocheleau.com.

16 Comments

  1. Evert
    September 18, 2012

    I do hope this article is a belated aprils fool?

    Reply
    • Jake Rocheleau
      September 18, 2012

      No of course this isn’t a joke. There are good situations to use tables, such as formatting data indexes or charts or e-mail newsletters. And there are bad situations, like building an entire website layout.

      Reply
  2. Alex
    September 18, 2012

    Very interesting read. I think the struggle with shifting standards is a tendency to overuse the new syntax- forgetting the purpose an older syntax (see: tables) had.
    Just a question, is there a reason in your example code for section “Formatted Table Captions” none of the tags are closed starting with thead? I know it’s an example, but I think it’s important to keep up with good coding principles :)

    Reply
  3. Web design Wolverhampton and Birmingham
    September 18, 2012

    When you actually need a table (i.e. for information to be displayed in rows and columns), a table is still by far the best option (trying to make a table-less table is, of course, possible but pointless.

    Reply
  4. Design Turnpike
    September 18, 2012

    Yes! Glad to hear tables aren’t completely dead. :)

    Reply
  5. World Websites
    September 18, 2012

    I try to limit the use of tables when developing but it sometimes is the only way an information can be presented well. Tabels are not good for accessibility but what i always wonder is whether search engines find table based websites hard to read and if tables can affect SERP.

    Reply
  6. Jeremy
    September 18, 2012

    When I first learned that table based layouts were bad, I also fell into the “tables, never again” mindset. Then one day, while struggling to format some tabular data with divs and css, I realized how much easier it would be to just use a table. Much of what I work on lately deals with a lot of tabular data, so I find myself using tables frequently, just not for site layout.

    Reply
  7. Reg
    September 19, 2012

    This is a strange article. Tables are useful for presenting data in rows and columns. That’s it.

    Reply
    • Mike
      September 19, 2012

      It’s not that strange when you take into account that this guy is young. In fact his website says 2006 is when he started coding.

      He probably doesn’t remember when tables were the layout ‘fad’ of the day, about the same time frames were too.

      That’s been almost ten years ago now;ancient in internet terms. Heck I remember a few I did; it was bad work to be sure, but it was what everyone used then. CSS was just coming into common use and there were allot of other developers not on-board with changing coding styles.

      Now if you remember the terrible idea that was nested tables…ugg…now that was really bad.

      Stick with tables for data from your database and you should be fine. Use div’s and proper html5 tags for everything else.

      Reply
      • Reg
        September 20, 2012

        Yep, that’s a good point… I’m old enough to remember the dark ages of horrible nested tables – and frames – for layout.

        There is one current use for tables in layout – and that’s for email newsletters.

        Reply
  8. gooutandplay
    September 19, 2012

    Ha ha – this post is like ‘rant bait’
    the lengths “designers” would go to avoid tables a few years ago was
    hysterical. i think the topic of table was even banned from css lists because the debate would get so heated. even better was when an experienced css developer would come out and explain which specific cases tables were a better option – the rants from the ‘css only’ crowd were intense. “my div is better then your td !!”
    if you ever get harassed by a css only standardista – just mention XHMTL,
    and watch their eyes glaze over in reverie.
    then ask them how many break (br) tags they inserted a slash in…
    even after it became clear that HTML 5 won, they still tried to justify all the time that was lost on converting to xhtml standards, that only mattered to an xhtml validator and not to an actual web browser.
    Meanwhile thousands or millions of websites have used tables for basic layout tasks, and the users of those websites were not offended.

    Reply
  9. Amie Gulyas
    September 20, 2012

    I still have a number of projects which has something to do with putting up tables on sites. Actually, tables are still good for illustration as some of my clients would suggest. They say its more simpler which their customers would like rather than some complicated stuff for the way their products or services are illustrated.

    Reply
  10. jared
    September 20, 2012

    Adding tables is the best way to add structure to your sites content I think.

    Reply
  11. Web Design Malaysia
    September 21, 2012

    tables, tables. i still think at times we cant style everything on DIV. Tables do have their pros as well.

    Reply
  12. hellsing
    October 1, 2012

    You can do much more with JS than just formatting a table. jQuery has lots of useful plugins to deal with tables. My personal favourite is dataTables (datatables.net) and its plugins: colouring, sorting, paginating, column reordering, filtering, exporting desktop apps, dynamic change of contents… Fun to play with and powerful to use.

    Reply
  13. Vladimir J
    October 30, 2012

    Personally, I don’t really understand why tables are so hated. Actually, if there was no , I’m pretty sure that HTML5 would introduce it. It’s just a table, a very practical HTML tag for tabular data. People were using it for structuring a page layout, but now CSS can do that job much better. Many web designers read that it’s not very smart to use tables anymore for layout structure, took it for granted and then started using divs and float:left for tabular data as well.

    Reply

Leave a Reply