Internet, Networking, & Security Web Development Why You Should Avoid Tables for Web Page Layouts CSS is the best way to build web page designs By Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated July 01, 2019 vgajic/Getty Images Web Development CSS & HTML Web Design SQL Tweet Share Email Learning to write CSS layouts can be tricky, especially if you are familiar with using tables to create fancy web page layouts. But while HTML5 allows tables for layout, it is not a good idea. Tables Are Not Accessible Just like search engines, most screen readers read web pages in the order that they are displayed in the HTML, and tables can be very hard for screen readers to parse. This is because the content in a table layout, while linear, doesn't always make sense when read left-to-right and top-to-bottom. Plus, with nested tables, and various spans on the table cells can make the page very difficult to figure out. This is the reason that the HTML5 specification recommends against tables for layout and why HTML 4.01 disallows it. Accessible web pages allow more people to use them and are the mark of a professional designer. With CSS, you can define a section as belonging on the left side of the page but place it last in the HTML. Then screen readers and search engines alike will read the important parts (the content) first and the less important parts (navigation) last. Tables Are Tricky Even if you create a table with a web editor, your web pages will still be very complicated and difficult to maintain. Except for the most simple web page designs, most layout tables require the use of a lot of and attributes and of nested tables. Building the table may seem easy while you're doing it, but once it's done you need to maintain it. Six months down the line it may not be as easy to remember why you nested the tables or how many cells were in a row and so on. Not to mention, if you maintain web pages as a team member, you have to explain to everyone involved how the tables work or expect them to take additional time when they need to make changes. CSS can be complicated as well, but it keeps the presentation separate from the HTML and makes it much easier to maintain in the long run. Plus, with CSS layout you can write one CSS file, and style all your pages to look that way. Then when you want to change the layout of your site, you simply change one CSS file, and the whole site changes -- no more going through every page one at a time to update the tables to update the layout. Tables Are Inflexible While it is possible to create table layouts with percentage widths, they are often slower to load and can dramatically change how your layout looks. But if you use specified widths for your tables, you end up with a very rigid layout that won't look good on monitors that are sized differently from your own. Creating flexible layouts that look good on many monitors, browsers, and resolutions is relatively easy. In fact, with CSS media queries, you can create separate designs for different size screens. Nested Tables Load More Slowly Than CSS for the Same Design The most common way to create fancy layouts with tables is to “nest” tables. This means that one (or more) table is placed inside another. The more tables that are nested, the longer it will take for the web browser to render the page. In most cases, a table layout uses more characters to create than a CSS design. And fewer characters means less to download. Tables Can Hurt Search Engine Optimization The most common table created layout has a navigation bar on the left side of the page and the main content on the right. When using tables, this (generally) requires that the first content that displays in the HTML is the left-hand navigation bar. Search engines categorize pages based on the content, and many engines determine that content displayed at the top of the page is more important than other content. So, a page with left-hand navigation first, will appear to have content that is less important than the navigation. Using CSS, you can put the important content first in your HTML and then use CSS to determine where it should be placed in the design. This means that search engines will see the important content first, even if the design places it lower down on the page. Tables Don't Always Print Well Many table designs don't print well because they are simply too wide for the printer. So, to make them fit, browsers will cut the tables off and print sections below resulting in very disjointed pages. Sometimes you end up with pages that look okay, but the whole right side is missing. Other pages will print sections on various sheets. With CSS you can create a separate style sheet just for printing the page. Tables for Layout Are Invalid in HTML 4.01 The HTML 4 specification states: "Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media." So, if you want to write valid HTML 4.01, you can't use tables for layout. You should only use tables for tabular data, and tabular data generally looks like something you might display in a spreadsheet or possibly a database. However, HTML5 changed the rules and now tables for layout, while not recommended, are now considered valid HTML. The HTML5 specification states: "Tables should not be used as layout aids." This is because tables for layout are difficult for screen readers to differentiate, as previously mentioned. Using CSS to position and layout your pages is the only valid HTML 4.01 way to get the designs you used to use tables to create, and HTML5 strongly recommends this method as well. Tables for Layout Can Impact Your Job Prospects As more and more new designers learn HTML and CSS, your skills at building table layouts will be in less and less demand. Yes, it's true that customers don't typically tell you the exact technology you should use to build their web pages, but they do request things like: Accessible web pages: designs that can be viewed by screen readers are being mandated by many countries and corporations find accessibility more and more important every day.Maintainable web pages: designs they can take with them even if you aren't going to maintain them in the future.Flexible designs: designs that work across many browsers, resolutions, and devices.Fast downloading pages: speed is becoming more and more important, even to SEO.Printable designs: pages that print without special scripts or extra pages. If you can't deliver what the clients ask for, they'll stop coming to you for designs -- period. Can you really afford to let your business suffer because you aren't willing to learn and incorporate a technique that has been in use since the late 1990s? The Moral: Learn to Use CSS CSS may be difficult to learn, but anything worthwhile is worth the effort. Don't keep your skills from stagnating. Learn CSS and build your web pages the way they were meant to be built -- with CSS for layout.