Tässä tehdään tämmöinen "prosenttitaulukko", käyttötarpeen voi keksiä itse. Tässä käytän esimerkkinä "kettujen levinnäisyydestä suomessa". Tätä voi käyttää vaikka diagrammin tekoon jossain koulutyössä. Tai ihan mihin vain keksit
http://sivupohjat.internetiin.org/muuta/prosenttitaulukko.phpTässä oppii myös hieman lisää, miten voi käyttää css eri tarkoituksiin
Aloitetaanpas html:lla, ptaulukko.html:
<html lang="fi">
<head>
<link rel="stylesheet" type="text/css" href="prosentti.css">
</head>
<body>
<table class="taulukko">
<tr><th>Etelä-Suomen lääni</th><td class="pros">12 %</td><td class="maara"><div style="width:12%">_</div></td></tr>
<tr><th>Länsi-Suomen lääni</th><td class="pros">8 %</td><td class="maara"><div style="width:8%"></div></td></tr>
<tr><th>Itä-Suomen lääni</th><td class="pros">14 %</td><td class="maara"><div style="width:14%"></div></td></tr>
<tr><th>Oulun lääni</th><td class="pros">6 %</td><td class="maara"><div style="width:6%"></div></td></tr>
<tr><th>Lapin lääni</th><td class="pros">52 %</td><td class="maara"><div style="width:52%"></div></td></tr>
<tr><th>Ahvenanmaan lääni</th><td class="pros">8 %</td><td class="maara"><div style="width:8%"></div></td></tr>
</table>
</body>
</html>
Sitten css koodia, prosentti.css:
th{text-align:left;padding-right:1em;}
.pros{
text-align:right;
}
.taulukko td div{
background-color:black;
height:20px;
}
.maara{
width:200px;
border:1px solid red;
}
