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

Answer 1

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/

Answer 2

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.

Answer 3

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.