OK, why not use for everything rather than only for something that is semantically a table? Visually it is obviously the same (since the table element just have display:element in the default style sheet). This is not semantically a table, since you would still read it linearly, and no meaning would be lost if the presentation was removed. An example of something which is not semantically a table is presenting a text in columns like in a newspaper. If it makes sense with headers for the rows or columns, then you might have a semantic table. When is data semantically a table? When the data is logically organized along two axes.
If you just want a grid for layout purposes, you use some other appropriate html elements and use display:table in the style sheet. If your information is semantically a table, you use a -tag. because you want a sidebar to expand or something like that. a set of data or units of information logically organized in two dimensions) or you just use the grid for visual layout, e.g. The question is if the data is semantically a table (i.e. There's a pretty good overview of responsive tables on CSS-Tricks.Įdit: I should point out that I'm not advocating this pattern - it falls into the divitis trap and isn't semantic - but this is why you'll find tables made from divs. Additionally, older versions of IE don't allow you to override default table styles, so using s also smooths cross-browser development. If tags are used then you need to override the browser default styles and layout before adding your own code, so in this case tags save on a lot of boilerplate CSS. S are used to create the tables instead of tags for a couple of reasons. name and email address might be separate on large screens, but collapse down into one cell on small screens so the information is readable without having to scroll. Responsive tables change layout on smaller screens - sometimes some columns are hidden or columns are amalgamated, e.g. Tabular data is tricky to display on mobiles since the page will either be zoomed in to read text, meaning tables go off the side of the page and the user has to scroll backwards and forwards to read the table, or the page will be zoomed out, usually meaning that the table is too small to be able to read. This is a common pattern for making responsive tables. This is a question about using a vs display:table. in an attempt to change this from a rant into a coherent question: what am I missing? What are the actual benefits of using a "faux-table" over a real one?Ībout the duplicate link: This isn't a suggestion to use another tag or something. In fact, the only way I see that tables could make a layout difficult to modify, is if you abused them and created an ungodly mess. And tables don't make the job any harder or easier than divs. You will need to understand and change HTML structure for serious design changes.
In fact, in practice modifying a layout is always hard, and it's almost never enough to just change the CSS, if you want to do something more serious than minor tweaks. But modifying a "faux-table" layout is just as hard, and for the same reasons. The original argument for moving away from tables for layout was that it's hard to modify a tabular layout afterwards. But they still need a table for layout (because nothing else has the expanding capabilities of a table), so they make a (because it's not a table!) and then add CSS that makes it a table anyway.įor all the world this looks to me like putting arbitrary unnecessary obstacles in your way and then doing extra work to circumvent them. The best explanation that I have is that by now everyone has heard the mantra of "don't use tables for layout", so they follow it blindly. That's what tables are for - laying out stuff in tabular fashion. Why are we doing this? If you need a table, then just make a blasted and be done with it. you know, everyone's doing it.īut I still don't get it. I even recently tried doing this myself because. * (Class name are illustrative only in real life those are normal class names reflecting what the element is about) It looks like this: Īnd in CSS there is something like. In modern web development I'm coming across this pattern ever more often.
0 kommentar(er)
