tables in css

Discussion in 'CSS' started by sudhakararaog, Sep 26, 2009.

  1. #1
    hi

    i normally code my html pages using div tags and css, however a few pages i build have a tabular data example 5 rows and 5 columns, normally this can be done using tables with 5 table rows and each having 5 table datas, however i would like to avoid using tables if possible

    if i were to use divs then in the case of 5 rows and 5 columns example i would have 5 outer divs for each row and each outer div will have 5 inner divs floating left with width and height which i think will be a lot of loating involved in the page and i guess this might impact the load time of the page however i am just guessing about the load time


    if i have only few rows and columns i guess i can use outer divs and inners divs however if i have for example 10 rows or 20 rows of tabular data to display then i guess the amount of floating will increasing drastically along with other divs which are floating in the entire page.

    can anyone provide a solution for this table rows and columns situation that i can apply for few rows or multiple rows example 20 or 30 rows.

    thanks a lot for your help.
     
    sudhakararaog, Sep 26, 2009 IP
  2. myst_dg

    myst_dg Active Member

    Messages:
    224
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    58
    #2
    For your question, I will absolutely use tables.

    As you can see that default WordPress calendar function also outputs a table, as well as some other mature projects.
    Avoiding tables in all cases whatsoever is not a good idea I guess. Conversely, using tables to do the right thing doesn't mean you're amateur in design.
     
    myst_dg, Sep 26, 2009 IP
  3. appleranger

    appleranger Peon

    Messages:
    339
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I would avoid the tables if possible. I might also be a good idea to fix your design a bit.
     
    appleranger, Sep 28, 2009 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi,

    If your data is tabular data as you suggest, then use a table, this is what tables are made for. There is no advantage in not using tables, in-fact it's at a disadvantage if you don't because your not using the correct element.

    The problem with tables is when people use it for non-tabular data like layouts, and other things like a list of products...but say if you have like a football/cricket league table, which are great examples of what tabular data is, this should go in a table.

    I think you are wrong in suggesting that the additional floating will have an impact on the loading time. Extra markup can have a minimal effect on loading time, as obviously more charcters need to be loaded and understood, but it'd take some seirous bloated code to notice the effects.

    There is nothing wrong with floating, or lots of floating, it doesn't change anything there's nothing to be worried about. Give us an exmaple of the data you are talking about, and the layout you want to achieve and we can advise you further.
     
    wd_2k6, Sep 28, 2009 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    ... and that's the thing - as wd_2k6 and myst_dg said, there's nothing wrong with using a table for tabular data... as in each column is the same type of information and each row is related as well. Only the die-hard whackos who never bothered to learn what a table is for will tell you to never use a table - the tag exists for a reason, learn when and when not to use it!

    Do you have an example of the information to be plugged into the layout? We could probably give you a more definite answer on whether that's layout or data structure.

    Also be aware that there are other tags you can use in a table besides TR and TD. <td class="heading"> == MISERABLE **** FAIL, that's what a TH (and possibly THEAD) is for. <tr><td colspan="5"><font size="+3"><b> == MISERABLE **** FAIL, that's what LEGEND is for, etc, etc, etc...
     
    deathshadow, Sep 28, 2009 IP
  6. devji

    devji Peon

    Messages:
    31
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Good answer. The best method of displaying tabular data is in a table, no question. Tables were only considered 'bad' when used to control the layout of a page (i.e. non-tabular data).

    I think too many people are worrying about implementing CSS to replace tables. At present, it doesn't matter whether you use tables or CSS for layout however, avoiding tables altogether even when displaying data is certainly taking it to far.
     
    devji, Oct 1, 2009 IP
  7. Masterful

    Masterful Well-Known Member

    Messages:
    1,653
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    140
    #7
    We've all got it in our heads that using tables is amateurish, to the point where we don't even want to use them for tabular data!

    Use the table, dude. That's what it's for. ;)
     
    Masterful, Oct 2, 2009 IP
  8. david_web

    david_web Greenhorn

    Messages:
    54
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #8
    Tables are not bad. IMHO, tables should be used to represent data where required. However, it shouldnt be used for setting the layout of a whole site. There is an excellent article on snook.ca about styling tables. Do read that :)
     
    david_web, Oct 2, 2009 IP
  9. goliath

    goliath Active Member

    Messages:
    308
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    60
    #9
    First of all, for god's sake use a table for a table of data. Just like so many here are saying, and it's music to my ears that we are finally moving past the "tables are evil" backlash.

    However, to answer your question, you don't need so many divs.

    Since float can only fill the available container width, you only need one container div.

    If your container is 1000px and your floating cells are each about 198px, they will line up in rows of five no matter how many rows it takes. They don't have to be the same size, but it's easiest to explain that way.

    Also, float is the best way to do this, and has absolutely no impact on load time. Adding the extra container divs for each row will add to your load time, since it is just a bit more code to load.

    I will say, however, that CSS works in table, and just because you are using a table to display your tabular data does not mean you should be using FONT and such tags inside of your table.
     
    goliath, Oct 3, 2009 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Using a table (correctly, not tr/td alone) will also let assistive devices get the data out nicely as well... for instance, proper use of th, scope, and sometimes even axis or the headers attributes (for a complex table) can ensure that a screen reader doesn't just spew out a bunch of gobbeldytext with no order, rhyme or reason.

    At this point I'm a bit afraid to even mention display: table since someone, somewhere, will try to use CSS in place of a semantic table. : ) Unfortunately, people are calling these "CSS tables" which I think is a terrible phrase and confusing at best.
     
    Stomme poes, Oct 5, 2009 IP
  11. david_web

    david_web Greenhorn

    Messages:
    54
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #11
    You are extremely right. Semantic tables must be used where it is required. I am not really for the idea "table less code". Tables should be used where required. :)
     
    david_web, Oct 5, 2009 IP
    kk5st likes this.
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    I have long eschewed the idea of tableless coding, and prefer to argue in favor of well structured, semantic, and well formed markup.

    cheers,

    gary
     
    kk5st, Oct 5, 2009 IP