We all know that it is bad practice in HTML to use tables for layout. “Only use tables for tabular data” is what we have been told since the advent of CSS (tabular data being data that is well suited to rows and columns, like anything in a spreadsheet).
For the last year and a half I’ve been focusing on responsive design, trying to make every web page work just as well on a phone as it does on the desktop. Tabular data was the last remaining hurdle, with no good way to format it for the small screen. Narrowing tables to fit the small screen often results in cells that are too narrow to for the data, or wrapped text that is difficult or impossible to read.
Wrapping each table in a <div> tag with the “overflow” property set to “scroll” is an option, but if one of the column boundaries lines up with the right edge of the <div> tag, it may not be apparent that the table has more data available by scrolling horizontally.
List items displayed as table rows.
Finally I realized that many sites have solved this problem years ago. Every online shopping system contains lists of products, which is really tabular data, with each “row” containing an image, a product name, a description, and links to purchase and to view more information. And almost every online shopping system displays these lists in well designed little boxes instead of table rows. These boxes fit on small screens, and can be displayed 3 or 4 boxes wide on the desktop. And this practice can easily be extended to virtually any tabular data.
So I changed all of the lists that were used in my system, including all of the admin lists, from tables to boxes, giving me much more flexibility to add useful elements like images to my list items, and at the same time making them mobile friendly.
List items displayed as boxes (not yet arranged side-by-side).
So what is left for HTML tables to display? Nothing, I’m afraid; I think their time has come.
Comments are closed