Layout Tables

9. Avoid Using Tables for Layout

Tables have a very specific meaning and functionality in Web content. Using tables to create multi-column layouts creates a number of issues for users of diverse abilities as well as design issues for responsive layout. Whenever possible, use Drupal to customize the page to have multiple columns of content rather than using tables to create a visual layout with multiple columns.  

Best Practices

  • Use the page layout features of Drupal to create multi-column page layouts
  • Do not use tables which are intended for the presentation of data

Don't do This

Table Used for Layout Purposes

Lorem ipsum

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

Lorem ipsum

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).

Do This: One

Lorem ipsum

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

Do This: Two

Lorem ipsum

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