Создание диаграмм с помощью HTML

Если Вам приходилось размещать на страничках какие-либо диаграммы, то Вы меня поймете…

Для тех, кто пока не испытал такого кайфа, объясню.

Дело в том, что Internet – это не только (и не столько) сочетания цветов, картинки, разные классные прибамбульки, которые радуют глаз, это еще и обычная информация, за которой, собственно, люди заходят на сайт.

Предположим, ваш сайт посвящен компьютерам, и вы хотите положить туда свежую статейку о новом супер-модеме, которую вам вчера принесли (или вы ее сами написали) в формате Word (только не говорите, что вы всегда используете Notepad). В этой вашей статейке есть серьезное описание, пара таблиц и диаграмма. Деваться некуда, в HTML конвертируем Word’ом, получаем текст HTML, который после чистки весит 20K, и диаграммку в виде GIF’а, который весит 60K. Итого 80K. Одну четверть клиент платит за содержательную статью, три четверти – за удовольствие созерцать одну диаграмму.

Проблему можно решить тремя способами:

    1. Плюнуть на клиента (как обычно).
    2. Выкинуть диаграмму (тогда зачем было ее строить?)
    3. Построить диаграмму в виде таблицы HTML.
Новый
120
 
Другой
100
 
Совсем голимый
  10

Хотите – верьте, хотите – нет, но вся эта красота занимает ровно 903 байта!
Код этой диаграммы:


<table border="0" width="100%" bgcolor="#666666">
<tbody>
<tr>
<td width="15%">
<table border="0" width="100%">
<tbody>
<tr>
<td>
<span style="color: #000000;">
<span style="color: #ffffff;">Новый</span></span>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="height: 25px;" border="0" width="100%">
<tbody>
<tr>
<td width="100%" height="44" align="right" bgcolor="#aa5555">
<span style="color: #ffffff;">120</span>
</td>
<td height="44"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="15%" height="50">
<table border="0" width="100%">
<tbody>
<tr>
<td>
<span style="color: #000000;">
<span style="color: #ffffff;">Другой</span></span>
</td>
</tr>
</tbody>
</table>
</td>
<td height="50">
<table style="height: 25px;" border="0" width="100%">
<tbody>
<tr>
<td width="83%" height="45" align="right" bgcolor="#aaaa55">
<span style="color: #ffffff;">100</span>
</td>
<td height="45"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="15%" height="58">
<table border="0" width="100%">
<tbody>
<tr>
<td>
<span style="color: #000000;">
<span style="color: #ffffff;">Совсем голимый</span></span>
</td>
</tr>
</tbody>
</table>
</td>
<td height="58">
<table style="height: 25px;" border="0" width="100%">
<tbody>
<tr>
<td width="8%" height="45" align="right" bgcolor="#000000"></td>
<td height="45">
<span style="color: #000000;">
<span style="color: #ffffff;">10 </span></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Рубрика: Секреты HTML

Добавить комментарий

Вам надо войти, чтобы написать комментарий.