О полосатых таблицах, или как их еще называют "Зебровые таблицы" все думают по-разному. Кому-то они облегчают поиск (особенно если таблица большая), кому-то доставляют эстетическое удовольствие (они выглядят куда лучше, чем обычные однотонные таблицы).
По результатам исследований и экспериментов стало ясно, что большей части пользователей удобнее работать с полосатыми таблицами, в то время как представителям оставшейся меньшей части просто нет разницы, в каком виде они получат табличные данные.
На своем опыте могу сказать, что зебровые таблицы хоть и незначительно, но ускоряют процесс анализа информации. Помимо скорости, меньше устают глаза.
Как вы уже наверное поняли, не стоит пренебрегать такого рода оформлением, поэтому я вам расскажу, как сделать у себя на сайте конфетные таблицы (Да-да, их еще и так называют), причем не просто полосатые, а с подсветкой строк, на которые наведен курсор мыши.
Хочу сразу предупредить, что подсветка не будет работать в IE6, так как мы используемый легкий CSS. Как вариант, можно использовать событие onmouseover, но это существенно утяжелит код, а если учесть, что основная цель - сделать полосатую таблицу, и мы ее достигнем во всех браузерах приведенным ниже методом, то отсутствие подсветки не повлияет ни на что, ведь пользователи IE также не заметят никаких изъянов в таблице.
Конечно же, можно воспользоваться стилями и задавать поочередно классы таблицы через строчку, либо просто в параметры строки вписывать фон и шрифт. Но, во-первых, это очень нудно и долго, а во-вторых, представьте, что вам нужно вставить в таблицу одну строчку где-нибудь посередине. Что вы будете делать? Переписывать свойства/классы у всех строчек ниже? Не кажется ли вам это нецелесообразным?
Мы будем использовать CSS и javascript.
Итак, создаем файл, называем его, к примеру, stripes.js со следующим содержанием:
Для загрузки скрипта вписываем между <HEAD> и </HEAD> следующий код:
В файл со стилями пишем:
Далее в <BODY> странички пишем:
А таблице присваиваем идентификатор, указанный выше (в нашем случае, это tab1):
Что из этого получилось, можно посмотреть ЗДЕСЬ.
Если вы хотите сделать на одной странице несколько таблиц одного вида, то необходимо присваивать разным таблицам разние идентификаторы.
То есть, в <BODY> пишем для двух таблиц:
А второй таблице, соответственно, присваиваем id="tab2". Аналогично и для большего количества таблиц на одной странице.
По результатам исследований и экспериментов стало ясно, что большей части пользователей удобнее работать с полосатыми таблицами, в то время как представителям оставшейся меньшей части просто нет разницы, в каком виде они получат табличные данные.
На своем опыте могу сказать, что зебровые таблицы хоть и незначительно, но ускоряют процесс анализа информации. Помимо скорости, меньше устают глаза.
Как вы уже наверное поняли, не стоит пренебрегать такого рода оформлением, поэтому я вам расскажу, как сделать у себя на сайте конфетные таблицы (Да-да, их еще и так называют), причем не просто полосатые, а с подсветкой строк, на которые наведен курсор мыши.
Хочу сразу предупредить, что подсветка не будет работать в IE6, так как мы используемый легкий CSS. Как вариант, можно использовать событие onmouseover, но это существенно утяжелит код, а если учесть, что основная цель - сделать полосатую таблицу, и мы ее достигнем во всех браузерах приведенным ниже методом, то отсутствие подсветки не повлияет ни на что, ведь пользователи IE также не заметят никаких изъянов в таблице.
Конечно же, можно воспользоваться стилями и задавать поочередно классы таблицы через строчку, либо просто в параметры строки вписывать фон и шрифт. Но, во-первых, это очень нудно и долго, а во-вторых, представьте, что вам нужно вставить в таблицу одну строчку где-нибудь посередине. Что вы будете делать? Переписывать свойства/классы у всех строчек ниже? Не кажется ли вам это нецелесообразным?
Мы будем использовать CSS и javascript.
Итак, создаем файл, называем его, к примеру, stripes.js со следующим содержанием:
function makeStripe(tab)
{
var rows = tab.getElementsByTagName("tr");
if (!rows)
return;
for(var i=0; i<rows.length; i++)
rows[i].className = ((i%2)==0 ? "odd" : "even");
}
{
var rows = tab.getElementsByTagName("tr");
if (!rows)
return;
for(var i=0; i<rows.length; i++)
rows[i].className = ((i%2)==0 ? "odd" : "even");
}
Для загрузки скрипта вписываем между <HEAD> и </HEAD> следующий код:
<script type="text/javascript" src="Путь_к_файлу/strips.js"></script>
В файл со стилями пишем:
thead { /* Заголовок таблицы */
color: #fff; /* Цвет текста */
background-color: #7b7b7b; /* Цвет фона */
}
tr.odd:hover { /* Нечетные строки при наведении курсора */
color: #fff;
background-color: #7b7b7b;
}
tr.even:hover { /* Четные строки при наведении курсора */
color: #fff;
background-color: #777777;
}
tbody .odd { /* Нечетные строки без наведения курсора */
color: #000;
background-color: #ececec;
}
tbody .even { /* Четные строки без наведения курсора */
color: #000;
background-color: #bbbbbb;
}
color: #fff; /* Цвет текста */
background-color: #7b7b7b; /* Цвет фона */
}
tr.odd:hover { /* Нечетные строки при наведении курсора */
color: #fff;
background-color: #7b7b7b;
}
tr.even:hover { /* Четные строки при наведении курсора */
color: #fff;
background-color: #777777;
}
tbody .odd { /* Нечетные строки без наведения курсора */
color: #000;
background-color: #ececec;
}
tbody .even { /* Четные строки без наведения курсора */
color: #000;
background-color: #bbbbbb;
}
Далее в <BODY> странички пишем:
<body onload="makeStripe(document.getElementById('tab1'));">
А таблице присваиваем идентификатор, указанный выше (в нашем случае, это tab1):
<table id="tab1" cellpadding="0" cellspacing="0" border="1">
<thead>
<tr>
<th>Заголовок1</th>
<th>Заголовок2</th>
<th>Заголовок3</th>
</tr>
</thead>
<tbody>
<tr><td>Ячейка11</td><td>Ячейка12</td><td>Ячейка13</td></tr>
<tr><td>Ячейка21</td><td>Ячейка22</td><td>Ячейка23</td></tr>
<tr><td>Ячейка31</td><td>Ячейка32</td><td>Ячейка33</td></tr>
<tr><td>Ячейка41</td><td>Ячейка42</td><td>Ячейка43</td></tr>
<tr><td>Ячейка51</td><td>Ячейка52</td><td>Ячейка53</td></tr>
<tr><td>Ячейка61</td><td>Ячейка62</td><td>Ячейка63</td></tr>
<tr><td>Ячейка71</td><td>Ячейка72</td><td>Ячейка73</td></tr>
<tr><td>Ячейка81</td><td>Ячейка82</td><td>Ячейка83</td></tr>
<tr><td>Ячейка91</td><td>Ячейка92</td><td>Ячейка93</td></tr>
</tbody>
</table>
<thead>
<tr>
<th>Заголовок1</th>
<th>Заголовок2</th>
<th>Заголовок3</th>
</tr>
</thead>
<tbody>
<tr><td>Ячейка11</td><td>Ячейка12</td><td>Ячейка13</td></tr>
<tr><td>Ячейка21</td><td>Ячейка22</td><td>Ячейка23</td></tr>
<tr><td>Ячейка31</td><td>Ячейка32</td><td>Ячейка33</td></tr>
<tr><td>Ячейка41</td><td>Ячейка42</td><td>Ячейка43</td></tr>
<tr><td>Ячейка51</td><td>Ячейка52</td><td>Ячейка53</td></tr>
<tr><td>Ячейка61</td><td>Ячейка62</td><td>Ячейка63</td></tr>
<tr><td>Ячейка71</td><td>Ячейка72</td><td>Ячейка73</td></tr>
<tr><td>Ячейка81</td><td>Ячейка82</td><td>Ячейка83</td></tr>
<tr><td>Ячейка91</td><td>Ячейка92</td><td>Ячейка93</td></tr>
</tbody>
</table>
Что из этого получилось, можно посмотреть ЗДЕСЬ.
Если вы хотите сделать на одной странице несколько таблиц одного вида, то необходимо присваивать разным таблицам разние идентификаторы.
То есть, в <BODY> пишем для двух таблиц:
<body onload="makeStripe(document.getElementById('tab1')); makeStripe(document.getElementById('tab2'));">
А второй таблице, соответственно, присваиваем id="tab2". Аналогично и для большего количества таблиц на одной странице.
Уважаемый посетитель, вы зашли на сайт как незарегистрированный пользователь. Оставленные комментарии отправляются на модерацию. После регистрации появится возможность попасть в список Комментаторов.
Другие новости по теме:
Просмотров: 2669
