И така вече отбелязвсам цял месец като човек с web blog

за което заслужавам поздравления предполагам. Винаги съм се чудел на хората, които намират време и желание да ги попълват старателно. Е аз определено не съм от тези хора, но пък ... пиша само за едни и същи работи

И в този смисъл да побързам да се похваля с последното си "откритие" -
CSS графики. Това е поредното ми откритие на скритите възможности на
CSS-а. Засега искам да уточня един мотив залегнал в идеята ми, а именно използването на таблици. <TABLE> тагър описва таблица, която трябва да използваме само и ЕДИНСТВЕНО за да описваме информация и дебело подчертавам трябва да спрем да правим layout на страници с таблици, както и да ги използваме, защото ни е по-лесно - ТОВА НЕ Е НАЧИНЪТ.
След като вече съм уточнил най-важното (

) сега мога да премина към по-лесното - реализацията.
Какво сме решили да правим?
Искаме да показваме статистики и графики, като ги направим приятни за окото, а същевременно се придържаме към валидния код и общоприетите стандарти за писане и описване да информация. Ето какво ще покажа сега:

Пример 1: какъв процент от продажбите се осъжествяват през дните от седмицата

Температури през различните месеци
Така вече съм дал два примера за това какво ще се прави

. Искам да кажа едно от предимствата на такава графика, която всъщност перфектно замества тази от електронната таблица и умрелите възможности на .doc файловете. Първо - не използваме нито една картинка за сега (не че е лошо, но боравим само с текстови средства) и второ: спазваме подреждането на информацията - информация, подредена в таблица и цветен
CSS - добро съчетание
Ето
HTML кода на първия пример горе:
<b>Продажби през месеците</b>
<table>
<thead>
<th width="50px">Ден</th>
<th><abbr title="Процент">%</abbr></th>
<th width="100%" style="text-align:left;padding-left: 10px"> Продажби</th>
</thead>
<tr>
<td>Понеделник</td>
<td>30</td>
<td><div class="graph" style="width:30%"> </div></td>
</tr>
<tr>
<td>Вторник</td>
<td>24</td>
<td><div class="graph" style="width:24%"> </div></td>
</tr>
<tr>
<td>Сряда</td>
<td>6</td>
<td><div class="graph" style="width:6%"> </div></td>
</tr>
<tr>
<td>Четвъртак</td>
<td>20</td>
<td><div class="graph" style="width:20%"> </div></td>
</tr>
<tr>
<td>Петък</td>
<td>5</td>
<td><div class="graph" style="width:5%"> </div></td>
</tr>
<tr>
<td>Събота</td>
<td>5</td>
<td><div class="graph" style="width:5%"> </div></td>
</tr>
<tr>
<td>Неделя</td>
<td>10</td>
<td><div class="graph" style="width:10%"> </div></td>
</tr>
</table>
А сега и съвсем малкия
CSS:
div.graph {
background-color: #0F0;
display: block;
border: outset black 1px;
-moz-border-radius: 17px;
}
Незнам дали казах, но простичкия код ни улеснява по-нататъчното окрасяване на тази графика. Сложил съм за пример радиусите за Mozilla браузера, вие можете съвсем спокоино да сложите вместо тях:
BACKGROUND: url(XXXXX) repeat-x ...;
Възможностите за дооформяне не са малки и точно затова пиша целия този пост. добавил съм двата примера, като съвсем нагледни примера за това с какво се занимава в тази статия. Можете да видите тук:
Горните примери в действие
Втория пример не е чак толкова добър колкото първия, но съм го сложил за да покажа още една възможност, за това как може да се случат нещата.