once again div vs tables
Domanda
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 :)
Soluzione
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>
Altri suggerimenti
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.
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.