once again div vs tables

Question

In my project, I have come across a situation where we have to create table (expandable).
I have implemented using divs and spans.
my senior is asking ti implement it using td,tr

<div class="header"><div class="colLabel" style="width: 24%;">continent</div><div class="colLabel" style="width: 24%;">country</div><div class="colLabel" style="width: 24%;">population</div><div class="colLabel" style="width: 24%;">gdp</div></div>

my implementation is http://jsfiddle.net/agasthyanavaneeth/eLf5K/6/embedded/result/
please help me
thanks :)

How are we supposed to help? It looks like a table, it should probably be done as a table... — Pez Cuckow, Sep 12 '12 at 11:34
@Fred: I am asking about general preference of implementing that type of component(plz check the JSFiddle link I provided). — Navaneeth, Sep 12 '12 at 11:39
Ah I see! In this example I would say tables as tables are meant for displaying tabular data. However that is just my opinion I dare say this is an argument that will never end! — Fred, Sep 12 '12 at 11:44

score 2 · Accepted Answer · answered Sep 12 '12 at 15:28

Yes use a table for tabular data rather than a generic <div>. You could also use the new HTML5 tags: <details> and <summary>

Then do something like the following:

<details>
   <summary>Continent name</summary>
    <p>Country, population and gdp content here</p>
</details>

http://html5doctor.com/the-details-and-summary-elements/

score 1 · Answer 2 · answered Sep 12 '12 at 13:45

Although you might have heard tables arent to be used on a website... it just means you shouldnt use them to create a layout for your page.

If you have to show data, or somehow use a raster, most of the time a table is just best. If you want to build a page, use div's.

If you have a more specific question, feel free to ask!

ps: I think your teacher is right, from what i can see. You want to show data in a raster/table like page. just use tables, its meant for it.

score 0 · Answer 3 · answered Sep 12 '12 at 12:43

You example looks to me like the ideal application for a <table> element. It's tabular data. To see where I'm coming from, turn off CSS and scripting, then look at your page:

continent country population gdp asia+26826

india1004

china13020

pakisthan201

bangladesh181 Europe+1152

UK215

France416

Germany521

It's not very clear, is it? Now present it as a <table>:

continent | country    | population | gdp
-----------------------------------------
asia      | india      | 100        | 4
          | china      | 130        | 20
          | pakistan   | 20         | 1
          | bangladesh | 18         | 1
-----------------------------------------
europe    | UK         | 2          | 15
          | france     | 1          | 16
          | germany    | 2          | 21

The data makes much more sense, and you can layer the extra features on top using CSS and javascript. Much better.

A sw have more number of hierarchies, doesn't it require more number of tds?? and we may need more calls of hide() function?? — Navaneeth, Sep 12 '12 at 12:49
You can use `` elements to break a table down into sections (is that what you mean by hierarchies?). `` elements (instead of `td`) to mark a cell as a heading. You can use script to show/hide an entire `tbody`, `tr` or a whole collection of `tr` elements (you'd only need to call `hide()` once if you got the selector right). Additionally a `` or `` can span multiple rows and columns (`rowspan` and `colspan`) attributes if necessary. — Olly Hodgson, Sep 12 '12 at 15:37

once again div vs tables

3 Answers3