Going Tableless: Why CSS Should Be Used For Layouts
There seems to be an ongoing battle between web designers about the use of tables in web layouts. Proponents for using tables refer to browser compatibility and quicker design time. While opponents claim that using tables for layouts doesn’t adhere to web standards and web accessibility. In order to better understand how this controversy got started, we need to look at the history of HTML and layouts.
Tables were never intended by the creators of HTML to control the visual style of a web page. They were only meant to display data with columns and rows. There wasn’t a mechanism in place to address the needs of more advanced layouts, so some ingenious web designers discovered that they could use tables to implement robust layouts.
Since that time, web designers have been regularly misusing the HTML language, mainly out of necessity. However, in the late 90′s, the W3C introduced Cascading Style Sheets (CSS). CSS enabled the ability to apply styles to HTML documents. As browsers quickly started to integrate CSS support, web designers started to use it to apply simple styles to their HTML, like font type and color, and background colors and images. However, the robust use of CSS for layouts (in particular, columns) didn’t have wide-spread occurrence until much later.
Over the years, there’s been a steady push to purify how websites are coded. In an effort to create web standards that offer a logical approach, and to provide web accessibility for text-readers, bots, mobile devices, and more, a new standard was created. That standard revolves around the proper use of XHTML and CSS. XHTML should be coded in a way that offers a logical structure for content, while CSS should be used to create a unique visual layout and design.
There are now several reasons why web designers should stop using tables for layouts, and adopt the use of CSS for controlling HTML layouts.
- It adheres to current W3C web standards
- All modern browsers support CSS for controlling layouts (although Internet Explorer sometimes requires some CSS hacks)
- If coded well, CSS makes it easy to apply global changes to the layout
- Proper implementation of content into XHTML documents, with the use of CSS solely for style and layout, helps create an accessible website for people with certain disabilities.
- Web pages often have less code, and are much thinner when XHTML and CSS are used
The main argument for still using tables today stems from bad habits, and complacency. What is often said is that using tables is easier, and that browsers don’t support it. It can certainly be easier in some cases, but browsers do support it. Internet Explorer can be frustrating to design for, because it doesn’t adhere to web standards very well, but there are many fixes and workarounds that will enable CSS based layouts to render correctly. If there was ever a time to start designing tableless layouts, it’s now.