Hacker News Reader

Comment by maj0rhn | Hacker News Reader

This is a pointless post. Use the TABLE tag. Yes, it will violate the purity of CSS, but you can trust it, and it will make your day better because it will free you angst and from extensive cross-browser testing. Simple is better than complex. Straightforward is better than arcane.

View on HN

As igvadaimon wrote below, there's no need for a <table> tag. Instead of:

    <table>
      <tr>
        <td> my div </td>
      </tr>
    </table>

you can do

    <div style="display: table;">
      <div style="display: table-cell;
                  vertical-align: middle;"> my div </div>
    </div>

The inline styling is just for illustrative purposes, of course.

I'll admit that the table-cell approach is nice -- thank you. But how curious that the article, which purports to be an in-depth examination, doesn't mention it. And how curious that the table-cell approach has not turned up in the numerous times I've gone looking on-line for a robust, pure CSS solution. I've long harbored suspicions that many CSS gurus are too quick to adopt complex solutions.

It doesn't mention flexbox[0] either. It's not an in-depth examination, it's blogspam. There are better[1] years-old[2] resources which are no more incomplete.

[0] http://philipwalton.github.io/solved-by-flexbox/demos/vertic...

[1] http://css-tricks.com/centering-in-the-unknown/

[2] http://gtwebdev.com/workshop/vcenter/vcenter-inline-css.php

It feels like they're doing "something right" by avoiding <table> at all costs, even if it means emulating the same behaviour that's already built into the browser with a set of CSS rules. This is blind faith, not reason... and oddly enough I've noticed this type of dogmatic thought far more in the web development community than in that of any other programming language. My own philosophy on writing webpages is to do the simplest thing that works and don't obsess over layout; the content is more important. I'll use tables when they make things easier, CSS when it makes things easier. But never do I give any consideration to "X is bad", "always use Y" etc. After all, your visitors probably couldn't care less whether you used tables or CSS.

I think, at least in some small part, the people who went over-the-top anti-table in favor of CSS don't advocate table-cell usage for that reason.

That is, it could be read as kind of an admission of CSS's shortcomings for layout, and HTML table's relative ease for same.

Kind of like saying, "Don't use HTML tables. They are evil and you are an amateur. Use CSS instead. It is amazing and absolutely rocks. Er, BTW, if you actually want it to work, use table/table-cell properties, etc".

I don't know the current state of browser's but the is likely because, at least at one time, the display type of table wasn't widely supported.

On the other hand support for centering vertically with auto isn't/wasn't widely supported either.

Using display: table-cell on a div is a more semantic approach than using <table>.

God no, I just threw up in my mouth.

Once your website is sufficiently complex, having to trail and which td belongs to what tr in which td is a NIGHTMARE.

Don't do it people - coming from a front end developer. A backend developer has no business commenting on front end issues, just a javascript developer shouldn't really dive out advice on proper DBA procedure.

Using some discipline with indentation easily solves the issue of nesting table-related tags.

Also, I would gently recommend that asserting one's status is a poor substitute for discussion of an idea's merits. Dogmatism is always injurious.

If you don't have the experience why would your novice opinion be valued?

Reply on news.ycombinator.com