Tablecloth - стильные таблицы
Я уже писал про свою "любовь" к таблицам, но на всякий случай напомню - таблицы используем для отображения информации, а не для дизайна страницы. Но это не значит, что если есть какие данные, то можно их просто запихать в таблицу и всё будет отлично. Эта таблица ещё и должна хорошо выглядеть. Конечно, если хватает познаний в CSS, и есть время то можно запросто сделать очень красивую таблицу. Но если времени и умений не хватает?
В этом случае поможет Tablecloth. Нужно всего лишь добавить 2 строчки кода и посетители будут в восторге от ваших таблиц.
Возможности Tablecloth:
- Добавляет соответствующие классы к чётным и нечётным рядам.
- Добавляет эффекты mouseover и mouseout.
- Может выделять весь ряд при наведении мышкой.
- При нажатии, может селектировать ряд или колонку.
- Можно писать свою имплементацию для события click.
Установка:
1) Добавим css и джаваскрипт.
JavaScript:
-
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
-
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
2) Теперь нужна только таблица.
HTML:
-
<table cellspacing="0" cellpadding="0">
-
<th>Title</th>
-
<th>Title</th>
-
<th>Title</th>
-
<th>Title</th>
-
</tr>
-
<td>Data</td>
-
<td>Data</td>
-
<td>Data</td>
-
<td>Data</td>
-
</tr>
-
<td>Data</td>
-
<td>Data</td>
-
<td>Data</td>
-
<td>Data</td>
-
</tr>
-
<td>Data</td>
-
<td>Data</td>
-
<td>Data</td>
-
<td>Data</td>
-
</tr>
-
</table>
Готово. Получается вот такая красивая табличка.
6 Comments so far
Leave a reply
Не нравится то, что если заголовки сбоку таблицы, то при нажатии на них строки не выделяются.
У меня выделяются. (Firefox 2)
Офигенная штука!
Отлисная штука, но не могу понять как сделать, чтобы какую-то таблицу скрипт не трогал? table class=”empty” Не помогает.
Он ведь все таблицы на странице раскрашивает))
придётся лезть в исходники
Otsenka 5!