CSS divs vs table help

[zeeb44]

I think tables are pretty easy to use. But they are not fluid like divs are. Is there a way to make divs set up so they act like tables. Example. Have three div boxes across the page. Even in size. What is the easiest way to accomplish this? Cross browser compatible too?

[ralph.m]

I think tables are pretty easy to use. But they are not fluid like divs are.

Tables are usually not appropriate for page layout, but they are (or can be) fluid, though.

Is there a way to make divs set up so they act like tables. Example. Have three div boxes across the page. Even in size.

This is quite standard. You could float three divs left and set them each to, say, width: 33%. That's very simple and very common. If you need more table-like behavior (such as the three divs being of flexible height but always the same height as each other) then you can use a combination of display: table and display: table-cell on those divs.

[KeepItHamsta]

Instead of re-inventing the wheel, have you had a look ad different grid layouts? http://www.cssgrid.net (fluid + scales down to mobile) or http://960.gs (960px wide) are some i have used.

You just start with the demo.html and position your divs as you want your layout. For example in 960 you can have a column-grid of 12 cols or 16 cols. Within your column-grid you then just add one or more pre-definded colums so that they add up to the 12 or 16 colums of the parent container - see http://960.gs/demo.html . this way you can pretty much build any (common) layout, and afaik it even works in IE6.

[imaginekitty]

... If you need more table-like behavior (such as the three divs being of flexible height but always the same height as each other) then you can use a combination of display: table and display: table-cell on those divs.

Would faux columns be a better for for that situation?

[felgall]

Would faux columns be a better for for that situation?

Only if you need to support IE7 and earlier. For modern browsers that properly support CSS 2.1 you can get real columns the same heightusing display:table and display:table-cell without having to fake it.

[imaginekitty]

Only if you need to support IE7 and earlier. For modern browsers that properly support CSS 2.1 you can get real columns the same heightusing display:table and display:table-cell without having to fake it.

Faking it? CSS is presentation. Considering presentation, perception is reality.

[sdt76]

I think tables are pretty easy to use.

For what? Are you talking about for general page layout? Or for tabular data?

For page layout, I have found that now that I have stopped supporting IE 6, building pages with tableless CSS is actually easier now than when I used tables. I feel that I have more options and more precision (ie not having to chop images up into a grid etc etc)

For tabular data, nothing beats a table. Use it, and enjoy its power!

[ralph.m]

Would faux columns be a better for for that situation?

Sounds like the OP wanted flexible boxes (width-wise) which would be a problem for faux cols.

[zeeb44]

For what? Are you talking about for general page layout? Or for tabular data?

For page layout, I have found that now that I have stopped supporting IE 6, building pages with tableless CSS is actually easier now than when I used tables. I feel that I have more options and more precision (ie not having to chop images up into a grid etc etc)

For tabular data, nothing beats a table. Use it, and enjoy its power!

Just referring to general page layout. I used to be big into tables before I understood CSS. I prefer using CSS but was just curious about making content boxes, say three wide across a page layout. and centered in the page. Because if you float all of them left then they will be lined up next to each other but not centered correct?

[ralph.m]

Because if you float all of them left then they will be lined up next to each other but not centered correct?

You can wrap them in another div that is centered. That's no problem.

[zeeb44]

Either way you would have to specify an exact width right? So you can set the left and right margin to auto for it to be centered. I always hear though that setting div widths to an exact width are frowned upon and should always be fluid.

[ralph.m]

Either way you would have to specify an exact width right?

You could use % widths so that they are flexible, like so:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
.wrap {width: 80%; overflow: hidden; margin: 0 auto;}
.inner {width: 33%; float: left; height: 400px;}
.one {background: red;}
.two {background: blue;}
.three {background: yellow;}
</style>
</head>

<body>
<div class="wrap">
	<div class="inner one">
	</div>
	<div class="inner two">
	</div>
	<div class="inner three">
	</div>
</div>
</body>
</html>

[zeeb44]

ah ok. Thanks very much, that definitely clears up some things for me.

[imaginekitty]

For what? Are you talking about for general page layout? Or for tabular data?

For page layout, I have found that now that I have stopped supporting IE 6, building pages with tableless CSS is actually easier now than when I used tables. I feel that I have more options and more precision (ie not having to chop images up into a grid etc etc)

For tabular data, nothing beats a table. Use it, and enjoy its power!

Yes, I agree. I find POSH and CSS much simpler than splitting background images and stitching them back together in nested tables.

... I always hear though that setting div widths to an exact width are frowned upon and should always be fluid.

What? No. I don't agree. I find long lines tiring to read and I like to keep my browser open on most of the screen. It depends though. There is no rule on the subject.

[dresden_phoenix]

The main point is being overlooked.

Your PRIORITY SHOULDN'T BE based on what the default presentation of the element looks like. use tables for tabular data, and div's as non semantic dividers or extra hooks for CSS2.1. PERIOD.

In most modern browsers, you can make a TABLE look like a DIV table, tr, td{display:block}
You can make nested DIVs behave EXACTLY like tables, using display:table; display:table-row; display:table-cell; However I you are merely search-and-replacing table/tr/td with DIV ... you are missing the point of CSS entirely.

If you abandon the "copping the info for table cells" you will see that the same or similar look-and-feel can easily be achieved, albeit in an entirely different procedure. Start to consider floating elements, over-all wraps ( preferably, but not necessarily semantically linked) and faux-bgs. Really CSS is more of a mindset than anything else.

[sdt76]

Yes, I agree. I find POSH and CSS much simpler than splitting background images and stitching them back together in nested tables.

What? No. I don't agree. I find long lines tiring to read and I like to keep my browser open on most of the screen. It depends though. There is no rule on the subject.

Media Queries to the rescue (for browsers that support them, and for those that do not, there are javascript solutions to force the issue). What you can do is set a max width for the flexible DIV, then use media queries to make the text larger at certain screen widths. I have a huge screen so I was able to see that at my resolution text was looking a bit small. I know that resolution and screen width are not the same thing, but usually with a huge screen, resolutions are higher by default. You wouldn't get a giant screen set to 800x600 resolution by default. When I have tested it, it's worked out well to keep words per line down to a manageable amount.

[sdt76]

In most modern browsers, you can make a TABLE look like a DIV table, tr, td{display:block}
You can make nested DIVs behave EXACTLY like tables, using display:table; display:table-row; display:table-cell; However I you are merely search-and-replacing table/tr/td with DIV ... you are missing the point of CSS entirely.

That's true, but you would want to avoid that for tabular data would you? I mean for now, "modern" is a huge qualifier. But even if not, isn't the TABLE element more semantic than taking tabular data and placing it in DIVs set to display:table? I don't know, I am really just asking. Is it better for accessibility to use TABLE rather than DIVs for tabular data?

Also, it is worth pointing out, from what I have been told, that if you do use display:table/cell etc for page layout using DIVs, you do lose the ability to use positioning properties like absolute or relative, so you better be sure you don't need those.

[Paul O'B]

. Is it better for accessibility to use TABLE rather than DIVs for tabular data?

Yes it is much better to use tables for tabular data as there is a direction relationship between cells in row and columns and a plethora of attributes that can provide mechanisms for identifying cell contents and to where they belong. This is just not possible with divs. Screen readers know how tables work also and will look for the clues in the table and identify the data correctly (although you can still build bad tables if you don't do the job properly).

A table by its very nature makes access to the data within much more accessible than a series of unrelated divs could ever do except when talking about lists or definition lists which are special cases.

Also, it is worth pointing out, from what I have been told, that if you do use display:table/cell etc for page layout using DIVs, you do lose the ability to use positioning properties like absolute or relative, so you better be sure you don't need those.

If you create a table cell then it is illogical to be able to absolutely position it somewhere else and therefore browsers for the most part won't let you. Absolute positioning the content within table cells (not the actual cell) is ok but older versions of IE didn't like it much. You would still need to create a stacking context inside the cell itself as browsers are allowed to ignore position:relative on cells because the behaviour is undefined in the specs.

[sdt76]

If you create a table cell then it is illogical to be able to absolutely position it somewhere else and therefore browsers for the most part won't let you. Absolute positioning the content within table cells (not the actual cell) is ok but older versions of IE didn't like it much. You would still need to create a stacking context inside the cell itself as browsers are allowed to ignore position:relative on cells because the behaviour is undefined in the specs.

I see. I had misunderstood. I thought that you could not use positioning at all within a DIV that has a display of table/table-cell. Just never did my own test to check. It just means you can't set the positioning on a DIV that also has a display set to table. That does make sense.

[Paul O'B]

I see. I had misunderstood. I thought that you could not use positioning at all within a DIV that has a display of table/table-cell. Just never did my own test to check. It just means you can't set the positioning on a DIV that also has a display set to table. That does make sense.

There's a handy table here that explains what values apply when certain things are mixed. In the case of an absolutely positioned element its display is automatically set to block so if it was display:table-cell it should be become display:block and will no longer work as a table-cell. There are of course browser differences as actual table-cells could not be absolutely positioned although some modern browsers will let you set them to block but then you lose the table cell behaviour. It would be nice sometimes to shift a table cell up or down a bit on its own but still have it behave as a table-cell.

[sdt76]

It would be nice sometimes to shift a table cell up or down a bit on its own but still have it behave as a table-cell.

So in that case, if possible, you'd have to wrap it in another div.

[Paul O'B]

So in that case, if possible, you'd have to wrap it in another div.

You'd have to wrap the content in the cell in another div and then you can move it but the content won't be full cell-height or act like a cell though although it may produce an interesting effect.

I use absolute positioning in this very old fixed table header demo and it works pretty well.