joshuanhibbert

# December 13, 2012 at 4:31 pm

This reply has been reported for inappropriate content.

@TheDark12 That article is a few years old now. I’d be interested to see if @chriscoyier‘s opinion has changed at all.

TheDark12

# December 13, 2012 at 4:32 pm

@joshuanhibbert As would I!

Chris Coyier

# December 13, 2012 at 5:07 pm

I don’t feel quite as strongly about it. I do stick to the sentiment that if you just use a bunch of divs and set their display properties to the various table stuff and think you’re being “more semantic” that’s still a little ridiculous. But these days, those elements might actually be HTML5 semantic elements and that would be a bit of a help. Then with media queries, if you go changing around the display properties, it probably makes the most sense to start with divs (e.g. at widest width perhaps display: table is useful, but you switch to flexbox for mobile or something like that).

TheDark12

# December 13, 2012 at 5:31 pm

I guess the question now is what exactly @begetolo is using this for.

If it’s for layout (say something like columns in the footer), and the site is responsive, display: table; would be the clear victor because of the lack of true control over table cells.

If however he is making a static width side and is using this to display content on a page instead of to assemble the layout of said page, I stand by using a table instead of a div with display: table;. It’s truly what the table was designed for.

Thanks for the input @chriscoyier!

joshuanhibbert

# December 13, 2012 at 5:55 pm

This reply has been reported for inappropriate content.

@TheDark12 You mean that displaying tabular data is truly what the table was designed for?

Also, somewhere to place plates of food when sitting down to eat ;)

joshuanhibbert

# December 13, 2012 at 5:59 pm

This reply has been reported for inappropriate content.

@chriscoyier I have a couple of examples of when I think display: table; is a good idea:

Firstly, equal height columns: http://jsfiddle.net/joshnh/7sff8/

Secondly, to have a couple of grid elements (or columns) balance themselves horizontally. See the statistics: http://jsfiddle.net/joshnh/nEtAn/

begetolo

# December 14, 2012 at 3:56 am

To clarify where I want to use it, take a look at this site: http://www.rbk.nl. This site is in development and there still many little things to do. Have look and please do give advice and/or tips…

The last image on the page is ‘The One’.
Now it is just one big image. I have to make the individual (square) pieces click-able and therefore have to break the big image in smaller pieces. The ‘+’ and the ‘=’ could then be just plain text with a color and vertical centered. I need to keep the site responsive.

Perhaps one of you have another solution or idea how to approach this? For now i’m leaning towards jQuery, but just plain CSS would be better i think. I tried the ‘table’ option, but this breaks in IE8. (there are very much problems with tables in IE8, especially where TD width is concerned).
I haven’t tried display:table yet.

Thanks very much for your time.

TheDark12

# December 14, 2012 at 11:05 am

Welp, traditional tables are certainly out of the question here. I think display: table; will be best as the site is going to be responsive… more freedom as the display gets smaller.

Let us know if you need any help implementing that method!

@joshuanhibbert http://i.imgur.com/xIwQS.gif ;)

wolfcry911

# December 14, 2012 at 11:07 am

http://codepen.io/wolfcry911/pen/GtFgl

Paulie_D

# December 14, 2012 at 11:10 am

…and there you have it. No table settings required at all.

If only we’d had the link to start with. :)

joshuanhibbert

# December 14, 2012 at 8:08 pm

This reply has been reported for inappropriate content.

@TheDark12 That one actually made me laugh out loud! :D

begetolo

# December 15, 2012 at 1:57 pm

Thanks everybody for your help. And have nice holidays and a good 2013 (bit early…)

begetolo

# December 16, 2012 at 5:00 pm

Implemented! http://www.rbk.nl
Thanks again. Especially @wolfcry911 for a complete example.