Колонки таблиці
Для того, щоб очі читача безперервно переглядали дані, представлені у стовпцях таблиці, не перескакуючи на сусідній розділ, можна зручно виділити стовпці кольором фону або вертикальними лініями. При цьому кольори парних і непарних стовпців можуть відрізнятися.
Оскільки формування таблиці відбувається по рядках, а не по стовпцях, то для зміни вигляду стовпців доводиться задавати стиль практично для кожної комірки. У цьому випадку зручно використовувати різні класи — один для комірок парних стовпців, а другий — для непарних. На таблиці, яка формується саме таким способом, показано на малюнку 1.
Колір непарних стовпців можна задати шляхом додавання стилей до селектора TABLE, а для парних стовпців введемо новий клас, назвемо його even. Перший стовпець зазвичай використовується для заголовків рядків, тому для нього має сенс задати стиль, відмінний від стилю інших комірок. У цьому випадку вводимо ще один клас, назвемо його lc і для нього визначимо вирівнювання за лівим краєм та колір тексту. Залишається для комірок першого стовпця додати до тегу <td> атрибут class="lc", а для комірок парних стовпців class="even".
Приклад 1. Стовпці різного кольору
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
<style type="text/css">
TABLE {
width: 300px; /* Ширина таблиці */
border: 2px solid black; /* Рамка навколо таблиці */
background: #778899; /* Колір фону */
color: white; /* Колір тексту */
}
TD, TH {
text-align: center; /* Вирівнювання по центру */
padding: 3px; /* Поля навколо тексту */
}
TH {
color: white; /* Колір тексту */
border-bottom: 4px double black; /* Подвійна лінія знизу */
}
.even { /* Стиль для парних стовпців */
background: #ffe4b5; /* Колір фону */
color: black; /* Колір тексту */
}
.lc { /* Стиль для першого стовпця */
text-align: left; /* Вирівнювання за лівим краєм */
color: #fffacd; /* Колір тексту */
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th> </th><th class="even">2004</th><th>2005</th><th class="even">2006</th>
</tr>
<tr>
<td class="lc">Рубіни</td><td class="even">43</td><td>51</td><td class="even">79</td>
</tr>
<tr>
<td class="lc">Ізумруди</td><td class="even">28</td><td>34</td><td class="even">48</td>
</tr>
<tr>
<td class="lc">Сапфіри</td><td class="even">29</td><td>57</td><td class="even">36</td>
</tr>
</table>
</body>
</html>Щоб відокремити перший рядок з заголовком від даних таблиці в прикладі використовується подвійна лінія. Вона формується за рахунок додавання властивості border-bottom до селектора TH.
Розглянемо ще один спосіб формування вигляду стовпців — не тільки за рахунок різного кольору фону, але й застосуванням ліній між стовпцями (малюнок 2).
Малюнок 2. Виділення стовпців за допомогою ліній та кольору
Структура коду залишиться практично такою ж, як було показано в прикладі 1. А саме, для комірок парних стовпців використовуємо клас even, а для першого стовпця — клас lc. Щоб встановити лінію між стовпцями, до селектора TD додаємо властивість border-left, вона створює лінію зліва від комірки. Одначе при цьому виникає непотрібна лінія зліва в першому стовпці, тому для класу lc використовуємо border: none, ця властивість прибере зайві межі (приклад 2).
Приклад 2. Лінії між стовпцями
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
<style type="text/css">
TABLE {
width: 300px; /* Ширина таблиці */
border: 1px solid black; /* Рамка навколо таблиці */
}
TD, TH {
text-align: center; /* Вирівнювання по центру */
padding: 3px; /* Поля навколо тексту */
}
TH {
color: white; /* Колір тексту */
background: #daa520; /* Колір фону */
}
TD {
border-left: 1px dashed black; /* Лінія зліва від комірки */
}
.even { /* Стиль для парних стовпців */
background: #dcdcdc; /* Колір фону */
}
.lc { /* Стиль для першого стовпця */
text-align: left; /* Вирівнювання за лівим краєм */
border: none; /* Немає зайвих ліній */
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th> </th><th>2004</th><th>2005</th><th>2006</th>
</tr>
<tr>
<td class="lc">Рубіни</td><td class="even">43</td><td>51</td><td class="even">79</td>
</tr>
<tr>
<td class="lc">Ізумруди</td><td class="even">28</td><td>34</td><td class="even">48</td>
</tr>
<tr>
<td class="lc">Сапфіри</td><td class="even">29</td><td>57</td><td class="even">36</td>
</tr>
</table>
</body>
</html>На жаль, робота зі стовпцями таблиці не так зручна, як хотілося б. Якщо застосовувати стилі, то фактично всі комірки таблиці пестять вказівками на певний стилевий клас. Це знижує зручність по розширенню табличних даних і підвищує обсяг коду. Існують спеціальні теги <col> і <colgroup>, які спрямовані на полегшення роботи зі стовпцями таблиці. Проте їх можливості обмежені, і потрібний результат буде відображатися не в усіх браузерах. Тому на даному етапі для створення таблиць бажаного вигляду доводиться звертатися до стилів.