There is a division among web designers; those that vehemently avoid the use of tables wherever possible and those that see tables as a very quick and simple means of reaching desired webpage layouts. I’m in the anti-table camp; I’ve worked with way too many WordPress Websites that use tables for layout and working on these websites becomes a nightmare when, for example, changing a theme. I’m a true believer of separating design from functionality and content and using tables where CSS may used for design is just not good enough. Using tables for design is unfortunately often used by low quality and often inexpensive WordPress website designers as it’s far quicker to use tables than concentrate on the long-term negative implications of using tables.
The proof – don’t use tables for layout
Whilst it may be debated that, for many Websites, using tables for layout and presentation doesn’t have any negative performance or visual disadvantages, my feeling is that we should try to adhere to standards and best practice. In this light, I was interested to read the following at W3 HTML 5.1 nightly page (the page defines HTML 5.1):
Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout.
The specification continues to recommend … If a table is to be used for layout it must be marked with the attribute role=”presentation” i.e. you need to specifically mark tables as being used for layout or presentation when they are used for those purposes.
Mozilla too advises against the use of tables for layout:
Prior to the creation of CSS, HTML elements were often used as a method for page layout. This usage has been discouraged since HTML 4, and the element should not be used for layout purposes.
So the very organization that defines HTML advises not to use tables for presentation / layout as does at least one other very significant contributor to Web standards.
WCAG 2.0 and the problem with tables
Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Creating websites that are WCAG 2.0 compliant is massively important for usability and legal reasons in some cases. At an accelerating rate governments (the Australian government mandates WCAG level AA compliance by 31 December 2014) , organizations and businesses are requiring compliance with WCAG v2. The United Nations has gone so far as to give approval to WCAG v2 as an ISO/IEC International Standard.
Per the HTML 5.1 quote above there is specific reference to problems with accessibility tools, like screen readers … [finding] it very difficult to navigate pages with tables used for layout. The University of Tasmania states on its Web Accessibility page tables should be used for tabular data rather than page layout. The University of Sydney notes according to the Australian Vice-Chancellors’ Committee (AVCC) more than 3% of Australians are blind, vision-impaired or have another form of print disability.
Surely it therefore isn’t a good idea to use tables for presentation or layout when some of our website visitors won’t be able to make sense of the content and, in some cases, our clients won’t accept tables for presentation as this will interfere with WCAG v2 compliance.
The SEO effects of using tables for presentation
Most of us want our websites to appear as prominently as possible in the various Search Engine Results Pages (SERPs). Google, Bing and the others use various ranking measures to determine where webpages appear in the SERPs for any given search word or search term. We know that Webpage load speeds are a ranking factor however I doubt that using tables has any significant effect on webpage load speeds (tables are defined in HTML 5). To address, from a specifically SEO perspective why you shouldn’t be using tables for presentation or layout (other than for tabular data), the Official Google Webmaster Central Blog mentions not to use tables for these purposes (see the Do’s and Don’ts section).
Further great reasons, if you’re concerned about how Google or Microsoft Bing index your website, why avoiding tables for presentation or layout is important include:
- Google is actively involved in the WCAG Working Group (hint: they obviously feel that accessibility is very important).
- Google is investing significantly in HTML 5.
- Bing is using HTML 5 increasingly.
- Internet Browser continue to embrace HTML 5 with improved compatibility (as two of the main Browsers, Internet Explorer and Chrome, are made by the two Search giants surely this shows a preference towards HTML 5).
- and many other reasons that I’m sure you’re able to search for.
Alternatives to using tables for layout
Using CSS for table-like layouts is the way to go. For WordPress there are many plugins available that allow for creating columns. Many WordPress themes too come with CSS columns inbuilt (such as StudioPress Themes).
Setting up CSS to create tabular data takes more time than simply using tables. The advantages of using columns coupled with the disadvantages of using tables for layout makes it an obvious choice; use CSS for presentation and don’t use tables for presentation nor layouts.