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.
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.
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.
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.
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.
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
- HTML5 Table Template Code
- History of HTML Tables
- Replacing cellpadding, cellspacing, valign, and align for HTML5 Tables?
- HTML5 Table Cell Padding Different in Various Browsers
- HTML Table Building: 30+ Beautiful Examples and Useful Scripts
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.
I do hope this article is a belated aprils fool?
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.
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 🙂
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.
Yes! Glad to hear tables aren’t completely dead. 🙂
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.
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.
This is a strange article. Tables are useful for presenting data in rows and columns. That’s it.
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.
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.
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.
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.
Adding tables is the best way to add structure to your sites content I think.
tables, tables. i still think at times we cant style everything on DIV. Tables do have their pros as well.
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.
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.