Avoid Using Tables for Layout Tables have a very specific meaning and functionality in Web content: conveying 2-dimensional relationships between header cells and data cells. Using tables for visual effect, to create multi-column layouts, creates two significant issues: Screen readers switch into table mode: users hear a great deal of information about their column and row position within the table when moving between paragraphs. This is both confusing and annoying when the content is not a table. The layout cannot stack into a single column when it is too wide for the window. When viewed with enlarged text or on a mobile phone, the layout becomes smushed and horizontal scrolling is required. Whenever possible, use design elements in the site theme to create "real" content columns instead. Don't do This Cell 1 Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam Cell 2 Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam Cell 3 Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam Why Is This Wrong? Presenting multi-column layouts as data tables provides a confusing experience for screen reader users. In addition, the table will not break into two separate rows in a smaller viewport (i.e., it is not designed responsively). Tables squish on mobile Do This: Create Columns Using Layout Tools Column 1 Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam Column 2 Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam Column 3 Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam Why is this better? Screen readers and mobile devices recognize this is just text. The layout can change. Columns stack on mobile Related links Tables for data vs layout (WEBAIM) Creating columns in Princeton's Sitebuilder platform Using tables for layout confuses screen readers (WCAG 1.3.1) Text should be able to reflow for mobile devices (WCAG 1.4.10)
