Сетка таблиці
Сітка - це набір горизонтальних і вертикальних ліній між комірками таблиці, які відділяють вміст комірок один від одного. Якщо включити відображення меж за допомогою атрибуту border тега table, то сітка використовується за замовчуванням. Однак такі лінії відображаються по-різному в різних браузерах, тому застосування стилів дозволить зручно керувати виглядом таблиць і зробить їх однотипними.
Для створення таблиці, показаної на малюнку 1, потрібно зробити дуже мало: встановити стильовий атрибут border для кожної комірки і скористатися атрибутом border-collapse.
При додаванні властивості border до селектора TD або TH між комірками з'являються подвійні лінії, які утворюються завдяки зіткненню рамок навколо комірок. Щоб цього не сталося, для селектора TABLE вказується властивість border-collapse із значенням collapse, як показано в прикладі 1.
Приклад 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-collapse: collapse; /* Прибираємо подвійні лінії між комірками */
}
TD, TH {
padding: 3px; /* Поля навколо вмісту таблиці */
border: 1px solid black; /* Параметри рамки */
}
TH {
background: #b0e0e6; /* Колір фону */
}
</style>
</head>
<body>
<table>
<tr>
<th> </th><th>2004</th><th>2005</th><th>2006</th>
</tr>
<tr>
<td>Рубіни</td><td>43</td><td>51</td><td>79</td>
</tr>
<tr>
<td>Ізумруди</td><td>28</td><td>34</td><td>48</td>
</tr>
<tr>
<td>Сапфіри</td><td>29</td><td>57</td><td>36</td>
</tr>
</table>
</body>
</html>У цьому прикладі також встановлюється колір фону для комірок заголовка (тег th) через властивість background.
Як варіант, можна зовсім вилучити рамку навколо таблиці, залишивши лише лінії всередині неї (малюнок 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">
BODY {
background: white; /* Колір фону веб-сторінки */
}
TABLE {
width: 300px; /* Ширина таблиці */
border-collapse: collapse; /* Прибираємо подвійні лінії між комірками */
border: 2px solid white; /* Ховаємо рамку навколо таблиці */
}
TD, TH {
padding: 3px; /* Поля навколо вмісту таблиці */
border: 1px solid maroon; /* Параметри рамки */
text-align: left; /* Вирівнювання по лівому краю */
}
</style>
</head>
<body>
<table>
<tr>
<th> </th><th>2004</th><th>2005</th><th>2006</th>
</tr>
<tr>
<td>Рубіни</td><td>43</td><td>51</td><td>79</td>
</tr>
<tr>
<td>Ізумруди</td><td>28</td><td>34</td><td>48</td>
</tr>
<tr>
<td>Сапфіри</td><td>29</td><td>57</td><td>36</td>
</tr>
</table>
</body>
</html>У цьому прикладі товщина ліній між комірками складає один піксель, а біла рамка навколо - два пікселя, тобто на один піксель більше. Це потрібно для надійного схову зовнішньої межі навколо таблиці.