чилка HTML
 
Каскадные таблицы стилей (CSS)

Стилевые параметры Таблицы

Параметры стиля Значение Описание
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) - Все четные номера элементов.
<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>

 

 

 

 

 

Copyright © Москва
Училка HTML: сайт  u4ilka.kcbux.ru