Hacker News Reader

Comment by meehow | Hacker News Reader

Now I can use CSS like I was using tables 15 years ago.

This strikes a chord with me, as I never really saw what was so "bad" about tables.

As I am more of a back end developer, I've written several interfaces using display:table and then the front end developers cleaned it up into "proper" css. This actually worked out as a good separation of duties and sped up development overall. The programmer in me then asks why this human step is needed if the output is equivalent..

I'm thinking that css is largely about encoding semantic data into layouts, because as far as I can tell it takes tremendously longer to do anything in css today than it did with tables in the 90s. And doing things in tables took tremendously longer than using a GUI like Adobe PageMaker in the 80s. We keep going backwards in productivity but there must be some value in the minimalism of how data is described and organized today.

Your front end devs in this case were suffering from a bit of cargo culting (not truly understanding the difference between HTML and CSS). There is absolutely nothing wrong with using the display:table css properties (as long as its layout quirks around the way it decides to space things don't mess things up visually).

What is wrong to do is use actual HTML <table>/<tr>/<td> tags for layout, because those impart semantic meaning about the structure of the content and should only be used for tabular data.

Open an inspector on your HN comment.

eg: the only valid use of tables is my valid use of tables

Just because HN happens to use the simplest thing that could possibly work doesn't mean that the objections to tables being used for layout aren't valid.

What about the HTML emails you receive in your inbox everyday ? I don't see much difference between Bootstrap div hell and tables in terms of semantics.

I hate them mostly? I've sent HTML emails before and they're a pain in the ass because they don't fully implement CSS. I've heard arguments that grid layouts are a step backwards because they put layout information back into HTML.

I'm not really a web designer so this isn't really my debate. I'm just pointing out that "HN does it" isn't really a strong argument. Something might be the best available option for some particular task but still not optimal for a whole host of reasons. The point remains <table> tags do carry semantic information so it's useful when possible to restrict them to situations where that semantic information is correct.

I was never convinced by this this argument (It's just a DOM node after all) and found the `crusade` mentality back in the early 2000s a bit immature. I respect your point of view but we don't agree

You haven't written HTML emails (cross-client) if you think Bootstrap' s grid and the kind of HTML you have to write for emails are comparable.

There is no such thing as Bootstrap div hell, that is utter nonsense.

If you used Bootstrap 3 seriously you'd also know there were LESS/Sass mixins for grids. No need to use divs with classes if you have that arbitrary dislike for genuinely useful presentational classes.

I may be wrong, as it's fuzzy with time, but I think when this all started, you couldn't use display: table in IE, and since IE had like 90% share at that time, it simply wasn't an option.

caniuse.com suggests only IE8+ supported it.

The only problem I ever had with tables being used for things other than tabular data was strictly from an accessibility POV. I had 2 blind roommates in college and helped set up their screen readers. It was nearly impossible for the readers to follow the page so when it was outputting audio it just sounded ridiculous. So much so that my roommates just gave up on their computers and and would take their assignments into some office to have student aids type them up for them and to help them do online research when I wasnt available. Switching sites to tableless css design helped immensely. I dont know if things have changed but that would be my reason against table design, pure accessibility.

Yup, it would appear that "tables are back" in a sense. Layout should be intuitive and easy. the table metaphor clearly works... maybe we should just accept it !

Reminds me of this comic strip from 12 years ago: http://okcancel.com/comic/98.html

I don't think "tables are back" here, per se. Tables, like any HTML element, are to be used semantically, like for displaying tabular data. They bring a lot of extra, unneeded markup and they're not a good layout mechanism for different size screens. I do think Flex-box takes the good elements of tables and turns them into something great :D

Now I can use flex-box like I was using flex-box 3 years ago including on IE8. It's almost like living now but if now was then.

And if "then" your flex-box usage actually worked for people not on Internet Explorer.

To be fair you've been able to do that with display: table-cell etc.

I do love seeing <div class="table"> around the place. Sigh.

Not exactly, you couldn't get colspans or rowspans with that.

I hadn't thought of that.

Yeah, they really dropped the ball on that. Being able to specify vertical and horizontal layouts this way would have solved a lot of problems that now require flex and soon CSS grids.

Better that way than the standard practice of littering your code with semantically meaningless divs that are there just as hooks for CSS rules.

As someone who does minimal front-end work I rely on bootstrap when I need quick UIs and try to read HN to understand the trends.

This comment made me laugh. From an outsider perspective it looks like div is the new table. The latest fashion in style

Just as an fyi, I count 17 uses of display: table-cell and it's siblings in the Bootstrap 3 less code (possibly more once compiled to CSS).

They didn't use it for their grid implementation though, and since they have found and documented a lot of very obscure browser compatibility bugs as part of their work, I'd guess they had a good reason for choosing what they did.

I don't think that's quite true unless you had your tables dynamically laying themselves out by viewport size too.

E.g. using SuitCSS Grid:

    <div class="Grid">
        <div class="Grid-cell u-size1of3 u-sm-sizeFull">

Yeah, thats a good thing :) tables are intuitive - Except now you can do a lot more stuff too!

I use bootstrap mixins + Sass for all my layout. If you're coupling it with your markup that's your fault.

Reply on news.ycombinator.com