7.3 Tables: To Be or Not to Be
In her video titled “HTML: Tables,” Author, Speaker, and Instructor Jen Kramer explains that using tables for HTML page layouts creates problems. ” When tables are used for layout, we’re implying that the page is all tabular data. The kind of content that comes from a spreadsheet.,” Kramer adds. She goes on to say that websites should stick to semantics, which is the concept that HTML tags should reflect what the content is, with tables being used for data. Depending on the developer, this may not be the case.
Do You Even Need a Table?
Tables tend to be used to allow visitors to find and view data, but if it’s being viewed via a website it should be limited to a few rows. If the table is too big, most visitors will lose interest and move on to the next stimulating item on the page. Charts may even be considered to convey more information, in an easier to read form, especially if you’re working with numbers.
One important thing to consider, when deciding to use tables, is the user experience. How is the website being accessed? What is the preferred browser? What device is being used to view the data? Is the viewer using a smartphone, tablet, or computer? The smaller and less complex the table, the easier it is to view on smaller screens.
Layouts Without Standard Tables
A combination of HTML and CSS are essentially the building blocks of a webpage. How things work, where they are placed, as well as their size, are a result of CSS passing this information along to the elements within the HTML. When consideration is given to the user experience, then developers or web administrators can adjust the elements accordingly.
To avoid using a standard table for a webpage layout, a Responsive Table can be used. In his blog, “Responsive Tables and Avoiding Table-Based Layout,” Ben Steinbuhler writes, “…the header row containing the labels is shown on the desktop but hidden on mobile. The labels for the data are replaced with a special attribute in the cell called “data-title.”
Steinbuhler continues, “When the table is rendered on mobile, each row on the table is shown as two columns; the first column shows the data-title, which is the same as what would be in header row, and the second column shows the data. The result is a perfectly responsive table.” This allows for a much better user experience for mobile users.
In reiteration, standard tables should be used for viewing data, not as a way to layout a webpage that will be ill-rendered on a mobile device.
This is a revised version of a blog post titled Tables: To Be or Not to Be on Web Publishing Unanimous.
