Why tables are bad for layout

Members of the design community who even can bring themselves to discuss tables have settled on a few tactics, but they are all simply awful. All of the tactics that designers commonly apply to tables fail to meet the needs of users who need to view, analyze, and interact with tabular data in one way or another. Either users can scroll subsections of a page or they can click an image representing the table to go to a page where they can scroll the actual table in every direction.

It is good that this approach satisfies the requirement to show a table, and it takes no particular effort to design.

Of course, it is bad because it takes no design, and it forces an oversized element into a mobile screen. We know very well that dual-axis scrolling is confusing, and it is barely better even when there are fixed column headers and row headers to provide some sense of place.

Sometimes, designers discard tables entirely in favor of graphical representations of tabular data. Often this is good on the surface, but bad in its details. Data that users can consume at a glance is good in every circumstance. If an image of a table gets the point across better than an actual table, use it.

But you must then use images everywhere. If the product team believes that a table is necessary, it is—for users. Each row becomes a sort of miniature two-column table, in which the table headers become the column on the left for each of the rows, and the data is in the column on the right. Figure 1 shows an example. That is, it works in the sense of the code working. Rows are often so tall that they take up essentially the whole viewport, so users can become lost in the page—in much the same way as with multiple accordion lists, but even more so.

I design lots of tables in my work, for deeply data-driven products, and have found all such responsive tables to be poor solutions. Tables need to be tables, with rows and columns of information that the user can scan.

It might seem really obvious that our designs should always show only what users really need, regardless of scale. But product owners often insist that we put way too much information on a page, and this always seems to be doubly true for organizations that want or need lots of tables.

Very large tables comprising many columns are always hard to use. Users have difficulty following tables with more than half a dozen columns no matter how big the screen. Most product teams love their data and think in terms of their process and jargon.

In the best case, you may end up with no table at all! Even though internal processes are typically full of jargon, tables seem to be abbreviation-free zones. Everything is spelled out and explained at length. In data tables and application programming interfaces APIs , this can cause code bloat.

In far too many tables, every cell is a string value rather than an integer, or actual numeric value. For example, in a product table that shows size, storing and displaying length as You cannot easily convert values that are spelled out to other units of measurement, which makes it hard to manipulate such data to make diagrams or charts.

Using simple design principles can result in shorter values and a lot more usable table. Another problem with overly verbose tables is when they repeat information in every row. Not repeating information saves space, of course, but also makes it easier for users to scan the information. Expanding on the previous example, all too often an actual string might be Length: This repetition adds no value for anyone.

Often, you can remove the repeated information and simply have it in the table header instead. Figure 2 provides examples of all three of these tactics for making data more concise. The original data includes the address, contact information, services performed, and more. But using our three guidelines, you can do the following:. It is also important that you think about processes holistically. Most of the time when I need to build a table, it presents information that the user can tap or click to display more data on a detail page.

In such cases, there is no reason for everything to be in the table. The user just needs enough information to know which item to pick, then can get all of the details on the next page or in a popup or accordion. Note that, in Figure 2, each row also includes an arrow at the right, indicating that users can select a row.

All of the information that the designer has omitted from the table is instead on a detail page for the service center. Even if there is no direct requirement or obvious need for a subsidiary page, this is still a useful approach for minimizing the amount of information in the table.

As an alternative to simply loading a page, I like to use accordions within tables. While accordions can easily get out of hand and users can get lost inside very long ones, small accordions can work very well within tables. One common use of small areas within expanded accordions is for displaying actions.

Imagine a desktop table with several actions on each row, in columns at the far right. Instead, you can show users that more actions are available—for example, by using a dot menu or an open accordion icon—then, when the user clicks a row, display the actions immediately below the data in that row, as shown in Figure 3.

You can do a lot to make tables fit on a mobile screen and still be readable, using simple graphic-design techniques. While we call all of this UI design now in the digital era, for elements such as tables, these are exactly the same techniques print design has been using successfully for a few centuries. Your style guide or design system should provide a few sizes of text. Detailed content such as that in tables is one reason they exist. Using smaller text should actually make tables more readable because it provides enough room for the content to fit well.

Tables always comprise dense data, so users tend to peer into them, bringing their device closer to their eyes. Therefore, slightly smaller text sizes have less downside than you might think. With fairly few columns of data, tables often boil down to only a few key pieces of information. Try to find out what the most important information is, then emphasize it. CSS: A guide for the unglued A great links page.

Resources and tutorials, too. The gospel of Web standards presented in terms that an MBA can appreciate. If you'd like to translate it into your native tongue,. Come on, Japan, where are you? How about you, Saudi Arabia? And don't tell me nobody on the entire Indian subcontinent understands the value of Web standards, or wants to read this in their native tongue.

I ain't buying it. When Adam and I gave this presentation at the Seybold conference in , using CSS was still something fairly new. Browsers weren't nearly so good as they are now and most sites were still created using tables. Executives and coders alike still needed to be convinced of the wisdom of using web standards. That was the purpose of this presentation. Obviously, a lot has changed in the eleven years since we had the temerity to call the prevailing method stupid.

For example, there is no more Seybold and more people access the web on their phones than at a desk. View the complete presentation all on one page here, or enjoy it in bite-sized nuggets. You can also read the blog post I wrote about the steps I went through to make the pages and their translations responsive.

This will not affect any of the sites you normally view and will give you access to a whole new world of sites in languages you probably can't read anyway. We're going global! If English isn't your native language, check out our translations page.

If you'd like to translate this into your native tongue,. This work is licensed under a Creative Commons License. Why tables for layout is stupid: problems defined, solutions offered Tables existed in HTML for one reason: To display tabular data. Go get your boss Are there any "suits" in the audience? We'll give you an introduction to a way of working that will make your pages load faster lower your hosting costs make your redesigns more efficient and less expensive help you maintain visual consistency throughout your sites get you better search engine results make your sites more accessible to all viewers and user agents and give you a competitive edge that is, job security as more of the world moves to using Web standards.

Killer Web Sites: nested tables and spacer GIFs In the beginning, the Internet was primarily a medium for academics, researchers, and the military to share information.

The problem with using tables: mixes presentational data in with your content. This makes the file sizes of your pages unnecessarily large , as users must download this presentational data for each page they visit. Bandwidth ain't free. This makes redesigns of existing sites and content extremely labor intensive and expensive. It also makes it extremely hard and expensive to maintain visual consistency throughout a site. Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.

Salvation is at hand Modern browsers are much better at rendering Web standards and we don't need to use these archaic methods any more. The solution: CSS and structural markup By using structural markup in our HTML documents and Cascading Style Sheets to lay out our pages, we can keep the actual content of our pages separated from the way they are presented. This has several advantages over using tables Redesigns are easier and less expensive By removing presentational markup from your pages, redesigns of existing sites and content is much less labor intensive and much less expensive.

Bandwidth ain't free Using Web standards reduces the file sizes of your pages, as users no longer need to download presentational data with each page they visit. Reduced file size means faster loads and lower hosting costs. Hey, these pages all look like each other! This strengthens your brand and makes your site more usable.

Write once, use anywhere, for everyone Using Web standards makes our pages much more accessible to users with disabilities and to viewers using mobile phones and PDAs to access the Web.

Google is blind Speaking of accessibility, minimizing your markup and using header tags properly will also help improve your search engine ranking.

This is still somewhat relevant, but on page factors are less and less important for page ranking. Fast loading pages is an important ranking consideration for several search engines, including Google. Generating a table is simple and safe. It is self-contained and integrates well within any template. To do the same with CSS is considerably harder and may be of no benefit at all: hard to edit the CSS stylesheet on the flight, and adding the style inline is no different from using a table content is not separated from layout.

Further, when a table is generated, the content in variables is already separated from the layout in code , making it as easy to modify.

This is one reason why some very well designed websites SO for instance still use table layouts. When figuring out what works for a specific audience, it is useful to be able to change the layout in various ways to figure out what gets the best results. A CSS based layout makes things considerably easier. However the fact remains that tables are faster to create, easier to understand and are more robust than most CSS layouts.

Yes, CSS can be as robust, but a quick look through the net on different browsers and screen resolutions shows it's not often the case. There are a lot of downsides to tables, including maintenance, lack of flexibility There are plenty of professional uses for a solution which is both quick and reliable.

Some time ago, I had to rewrite a clean and simple CSS layout using tables because a significant portion of the users would be using an older version of IE with really bad support for CSS. As for the "it wasn't intended for that purpose and therefore you shouldn't use it this way" crowd, isn't that hypocrisy? What do you think of all the CSS tricks you have to use to get the darn thing working in most browsers? Were they meant for that purpose?

Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Why not use tables for layout in HTML? Asked 13 years, 2 months ago. Active 3 years ago. Viewed k times. Agreed, tables are fine when presenting tabular data. They should be avoided when using it purely for layout.

Then again, sometimes, you have to take the easy road now and improve it later. Just view source and you'll see what I mean. There is a duplicate Q and A at stackoverflow. The answer is simple: it depends. If tables are used to solve a specific problem that current CSS versions can't, they are well used.

If you start getting tables inside tables, inside millions of tables then you're doing it wrong. If it's the ocasional table just to layout some 2 columns or something like that, I don't disallow it on my team: it's faster and easier to do it. Camilo SO still lives in the 20th century. Jeff apparently does not know how to use the ul tag. Have a look at all of the lists on this site badges, related questions, recent tags.

They're all either single columns or long paragraphs separated with br. Two parts of a document that happen to be laid out alongside each other can legitimately be contained in DIV elements, but they're certainly NOT tabular data. It doesn't matter what one specific styling happens to be; the content is either tabular or not. Active Oldest Votes. I'm going to go through your arguments one after another and try to show the errors in them.

It's better for SEO not to use tables I don't know if this is true and wouldn't use this as an argument but it would be logical. It's so easy to resolve with master pages or user controls in. Sorry but this is really "pie int he sky" wishful thinking.

Users care? Noone cares except a small number of misguided revisionists. HTML including tables is far older than the relatively new notion of "semantics vs layout". Oh and source please for "the majority of professional web developers oppose you". Typo above: semantics were implied from the beginning. Even more: the very first proposal of HTML repeatedly warns against abusing tags to influence the layout, and cautions to use logical over physical markup.

Get a screen reader and have it read a page with a table layout. Sergio: please do not edit out relevant information. Show 7 more comments. Here's my programmer's answer from a simliar thread Semantics First take a look at this code and think about what's wrong here Semantics Now apply this to document markup. Conclusion Will visitors notice? Sorry, that doesn't hold water. You don't use car for mybike because you would define a "bike" class instead. Nice analogy, and great conclusion.

Doesn't anyone take pride in their own work any more? I think this is quite an arrogant post which doesn't explain anything but just repeats the same claims again without answering the question.

I don't understand why it got so many upvotes???? I agree with tharkum. This response is rather subjective, and does not actually answer the question posed. While I agree that DIVs should be used for page layout, I cannot imagine that any web designer would be confused by a table-based layout. Show 12 more comments. Two other important things are accessibility and SEO. So your answers are maintainability, accessibility and SEO. Don't be lazy.

Do things the right and proper way even if they are a bit harder to learn. Very, very wrong. I'm sorry but that's not right. The HTML has to remain unchanged. If you look closely at some of the designs, the text in some headers is different from the text in the HTML.

That's because the HTML is made invisible, and instead an image is inserted. Example: csszengarden. Sorry, there's absolutely no evidence div layouts are better for SEO. Also, Google themselves have stated that HTML validation doesn't matter to them - a slightly different issue but one aimed towards tables because they rarely validate.

There are three, of course: laziness, impatience, and hubris. Show 3 more comments. I see that's duplicate. I missed it. Any action required besides promising I will be more careful next time :-?

Don't worry. This will be more and more common as the number of questions goes up. I didn't even downvote. We just want to be sure that as much as possible they eventually all point to a common source. I really like this answer. Using semantically meaningful tags isn't just a matter of tradition, it allows those obscure non-browsers screen readers, screen scrapers, various parsers to correctly categorize the various objects on your page.

I was hoping someone would mention this. Accessibility should be a top priority! I can't say I agree with the notion that accessibility should be a top priority in a commercial exercise. The cost benefit ratio is not feasible. It's like putting a wheelchair ramp on a mountain-climbing shop - a ridiculous waste of resources that could be applied to items with better CBR.

If you were talking about a medical facility then a wheelchair ramp would be a priority. Likewise, I would only bother with web page accessibility for sites pitched at vision impaired people. Add a comment. James Curran. This is the correct way of doing it because you're retaining maximum semantic information in the style-less html.

Or maybe I misunderstood you. Karen's right, you're wrong, James. Your example is a straw man. To forget to change the image when you changed the semantic HTML would be stupid.

So is leaving your laptop on a bus. What's your point? You would have to dynamically generate new images -- in the correct style. So now you've moved styling from CSS to business layer code. James: Content and style can't always be handled by different people. When the content is stylized, collaboration must occur. In either example something. But the second example is far more accessible.

Show 8 more comments. Tables can do things divs cannot and divs can do things tables cannot. Do you see the potential now? Take a look to it on PC and cellphone. Ah yeah and I don't even need bootstrap. Now to do the same with divs you have to write a lot of CSS code to display align float and crap. Who wrote less code? What does customers need? A guy ending a page in 1 year or in 1 month? Your answer is: they both together work better and is faster and it will look good on any design even on TVs and small cellphones.

Sign up to join this community. The best answers are voted up and rise to the top. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Learn more. Ask Question. Asked 10 years, 11 months ago. Active 1 year, 1 month ago. Viewed 16k times. Improve this question. Incognito Incognito 1, 1 1 gold badge 10 10 silver badges 21 21 bronze badges.

Extensively discussed on SO stackoverflow. Google uses tables themselves, within adwords for example.