Jump to content

can css tables to be instead of floats (all the time)?


akurtula

Recommended Posts

Hi

 

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

Link to comment
Share on other sites

Clearing a float by whatever method is not a bug. When you float a div you take it out of the regular flow (it's floating in the air, so not physically occuping space on the page) so basically you need to clear it so that whatever follows will display where you are expecting it to. I hope that makes sense. It's just something that becomes automatic after a while.

 

Tables are used for information that is presented like a spreadsheet and not for layout purposes, which is the purpose of a floated div.

Link to comment
Share on other sites

Thanks virtual,

 

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

Link to comment
Share on other sites

When I have tabular data to code I always use a conventional table (with CSS styling) as display: table isn't supported by IE6 and IE7, see this:-

http://www.quirksmode.org/css/display.html

 

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.

Link to comment
Share on other sites

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 still a few people using IE6 and the old type of table will not have problems in any browser.

 

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.

Link to comment
Share on other sites

A good reason to use tables (or display: table) instead of columns of divs for data is for screen readers or small screen devices.

 

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.

Link to comment
Share on other sites

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.

 

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?

Link to comment
Share on other sites

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?

 

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).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...