can css tables to be instead of floats (all the time)? ie. dispaly:table
Posted 04 November 2011 - 10:26 PM
I normally use floats and never used css tables (apart from when I played around with them).
Now as far as I know using this method (display:table; ) instead of float:left could be a better solution.
For example one little bug that I find I get with floats is that I need to remember to add a clear:both to various elements or/and have a <div class="clear">. I have a feeling that the display table might be a lot easier - however I am not sure
So is there a reason to use floats rather than css tables? I am asking as to be honest I haven't seen it being used that much when ever I try to look at the code on different site (then again for some reason I don't do that as much as I should)
Thanks for your help
Posted 04 November 2011 - 11:45 PM
Tables are used for information that is presented like a spreadsheet and not for layout purposes, which is the purpose of a floated div.
Posted 05 November 2011 - 02:49 AM
yes it was wrong of me to call that a bug and the reasons to use floats over tables sounds logical (and I guess that's why I have not used it) however, I had a look at the source code of the new boagworld website (amazing design) and I noticed that he uses css tables a lot, for things that do not look like table related - So I wondered if that was the new trend
Posted 05 November 2011 - 05:13 AM
Otherwise, I use floats for text, images, etc. which aren't tabular data.
Display: table was quite a good idea, but lack of support in IE6 and IE7 means that it can't be used yet unless you know your users will all have IE8 or above. I think there is a .htc file that can enable IE7 to use display: table, but there are stil a few people using IE6 and the old type of table will not have problems in any browser.
Posted 05 November 2011 - 06:32 AM
I played around with display: table a while back, and I really liked how easy it made things (where it worked) - BUT because of those compatibility issues, I decided that for me, it was just as easy to use floats, which I know work everywhere.
Posted 05 November 2011 - 06:50 AM
If you have data shown in rows like Name, address, tel. no. then a screen reader will read across each row in turn reading out each name, address and tel. no. but if you use divs as columns the screen reader will read down all the names first, then down all the addresses, etc. which makes it impossible to link an address and tel. no. with a name.
Small screen devices can usually break up each table row showing each cell below the previous one, so a name is followed by address and tel. no. then the next name, address and tel. no. whereas columns of divs would be shown down each column before the next column like a screen reader. Opera has "View - Fit to width" to simulate small screen devices if you make the window narrower.
Posted 05 November 2011 - 07:03 AM
I understand the display table method to be used for layout purposes, IMO, for your example, the 'old-fashioned' <table> would be the proper way (displaying data) - or not?
Posted 05 November 2011 - 07:58 AM
This post has been edited by akurtula: 05 November 2011 - 08:03 AM
Posted 05 November 2011 - 08:34 AM
Old tables and display: table work the same way, except that display: table has a problem with IE6 and IE7 so I don't use it.
Floated divs would also be read across each div horizontally by a screen reader, and then across the next row of floated divs, but what I was trying to say is that if you have a lot of names vertically in one floated div, and then a lot of addresses vertically in the next floated div beside it, then a screen reader will read out all the names before all the addresses, so you can't relate one name to one address. The solution with floated divs would be to have only one name in a floated div, then one address, then one tel. no., then start another row of floated divs. but it's generally reckoned to be better to put tabular data in a table (or display: table).