Let’s start by redefining how table data should be expressed in HTML.Īs stated earlier, since table data is essentially an ordered collection of items, it seems natural to use ordered lists. In terms of hacks, you can alter the display property of tables and use any layout you can do with CSS in general, but that doesn’t seem semantically correct. This may be sufficient for usage by a screen that fits the whole table width, but in reality, this does not apply for the myriad of devices that exist today.
When using HTML tables, the layout of the data is hardcoded as rows and columns (e.g. Table of purchase order detailsĪn item, in this case, is a purchase order detail, that has attributes such as part number, part description, etc. The format gives you a birds-eye view to quickly grasp and examine large quantities of data.įor example, here’s a hypothetical table of purchase order details, that you may see in a purchasing application. Items are laid out in rows, with the same data attributes in the same columns, with the rows often sorted with one or more sortable attributes.
Starting with the basics, a table in HTML is a layout format for displaying collections of items through a matrix of rows and columns. “Really Responsive Tables using CSS3 Flexbox” by Vasan Subramanian shows an idea of wrapping columns, implemented with Flexbox.Įven though many interesting ideas have been proposed, libraries like bootstrap opt for horizontal scrolling for small screens.Īs we now have CSS Grid, I think we could have a better common alternative to horizontal scrolling. “Responsive Table Data Roundup” first published in 2012 by Chris Coyier, has things summarized very neatly (including a 2018 update). Responsive tables aren’t a new topic, and there are many solutions that have already been proposed. A Little History of Responsive HTML Tables In this article, I use CSS Grid Layout Module and CSS Properties (and no Javascript) to layout tables that wrap columns depending on screen width, which further changes to a card based on layout for small screens.įor the impatient, look at the following pen for a prototypical implementation. The most popular way to display a collection of similar data is to use tables, but HTML tables have the drawback of being difficult to make responsive.
0 kommentar(er)
