Стилевые параметры Таблицы
| Параметры стиля |
Значение |
Описание |
border-spacing
(задает расстояние между границами ячеек в таблице) | значение1 [значение2] | Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.
Пример:
table {border-collapse: separate;
width: 90%;
border-spacing: 7px 12px;}
|
border-collapse
(устанавливает, как отображать границы вокруг ячеек таблицы) |
collapse | Линия между ячейками отображается только одна. |
| separate | Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. |
caption-side
Определяет положение заголовка таблицы,
который задается с помощью тега <caption> |
top | Располагает заголовок по верхнему краю таблицы. |
| bottom | Заголовок располагается под таблицей.
Пример:
<style>
caption {caption-side: bottom;}
</style>
<body>
<table>
<caption>Заголовок таблицы</caption>
<tr> <td>Текст</td> </tr>
</table>
|
Чередование цвета строк Таблицы
| Вид на Web-странице: | Пишем в документе на HTML: |
| Имя | Фамилия | Зарплата |
|---|
| Иван | Иванов | 50000 руб. |
| Петр | Петров | 45000 руб. |
| Мария | Иванова | 10000 руб. |
| Татьяна | Петрова | 30000 руб. |
Для чередования цвета строк Таблицы
в CSS используется
псевдокласс :nth-child
Значение (odd) - Все нечетные номера
Значение (even) - Все четные номера элементов.
|
<![CDATA[
<style>
#tab_ch table {
width: 70%;
border-collapse: collapse;
}
#tab_ch td, #tab_ch th {
border: 1px solid #7e5a25;
padding: 3px 7px 2px 7px;
}
#tab_ch th {
text-align: left;
padding: 15px;
background-color: #b56a6a;
color: #ffffff;
}
/* нечетные номера */
#tab_ch tr:nth-child(odd) {background-color: #ecd9d9; }
/* четные номера */
#tab_ch tr:nth-of-type(even){background:#e8e3d4;}
</style>
<body>
<table id=tab_ch cellspacing="0" cellpadding="0" width=70%>
<tr><th>Имя</th><th>Фамилия</th><th>Зарплата</th></tr>
<tr><td>Иван</td><td>Иванов</td><td>50000 руб.</td></tr>
<tr><td>Петр</td><td>Петров</td><td>45000 руб.</td></tr>
<tr><td>Мария</td><td>Иванова</td><td>10000 руб.</td></tr>
<tr><td>Татьяна</td><td>Петрова</td><td>30000 руб.</td></tr>
</table>
</body>
]]>
|
