Jump to content


Photo

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


  • Please log in to reply
8 replies to this topic

#1 akurtula

akurtula

    Member

  • Member
  • PipPipPip
  • 88 posts
  • Locationmancheter, uk

Posted 04 November 2011 - 10:26 PM

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
  • 0

#2 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 04 November 2011 - 11:45 PM

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.
  • 0
Lynne
180virtual

#3 akurtula

akurtula

    Member

  • Member
  • PipPipPip
  • 88 posts
  • Locationmancheter, uk

Posted 05 November 2011 - 02:49 AM

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
  • 0

#4 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 05 November 2011 - 05:13 AM

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.quirksmod...ss/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.
  • 0

#5 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,731 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 05 November 2011 - 06:32 AM

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.
  • 0

#6 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 05 November 2011 - 06:50 AM

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.
  • 0

#7 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,731 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 05 November 2011 - 07:03 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.


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?
  • 0

#8 akurtula

akurtula

    Member

  • Member
  • PipPipPip
  • 88 posts
  • Locationmancheter, uk

Posted 05 November 2011 - 07:58 AM

I agree that if you had tabular data then their is no reason why not to just use the <table> tags, where as the display:table; must be a general style that can be used for any type of data

Edited by akurtula, 05 November 2011 - 08:03 AM.

  • 0

#9 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 05 November 2011 - 08:34 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?


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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users