Синтаксис
border-collapse: collapse | separate | inherit
Значения
- collapse
- Линия между ячейками отображается только одна.
- separate
- Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения
ячеек показываются сразу две линии.
- inherit
- Наследует значение родителя.
Пример
<!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>border-collapse</title>
<style type="text/css">
TABLE {
width: 100%; /* Ширина таблицы */
border: 4px double black; /* Рамка вокруг таблицы */
border-collapse: collapse; /* Отображать только одинарные линии */
}
TH {
text-align: left; /* Выравнивание по левому краю */
background: #ccc; /* Цвет фона ячеек */
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black; /* Граница вокруг ячеек */
}
TD {
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black; /* Граница вокруг ячеек */
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th> </th><th>2003</th>
<th>2004</th><th>2005</th>
</tr>
<tr>
<td>Нефть</td><td>43</td>
<td>51</td><td>79</td>
</tr>
<tr>
<td>Золото</td><td>29</td>
<td>34</td><td>48</td>
</tr>
<tr>
<td>Дерево</td><td>38</td>
<td>57</td><td>36</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse
|
