Допустим есть у нас такая табличка:
Номер | Имя | Дата |
---|---|---|
9 | Саша | 12.03.10 |
1 | Маша | 19.05.10 |
10 | Алена | 17.06.10 |
8 | Андрей | 04.03.10 |
2 | Петя | 21.01.10 |
7 | Лена | 15.08.10 |
3 | Света | 25.03.10 |
11 | Вася | 02.05.10 |
4 | Коля | 13.06.10 |
6 | Паша | 01.04.10 |
5 | Катя | 15.03.10 |
У нее такой код:
<table class="table_header_styling"><tbody><tr><th>Номер</th><th>Имя</th><th>Дата</th></tr><tr><td>9</td><td>Саша</td><td>12.03.10</td></tr><tr><td>1</td><td>Маша</td><td>19.05.10</td></tr><tr><td>10</td><td>Алена</td><td>17.06.10</td></tr><tr><td>8</td><td>Андрей</td><td>04.03.10</td></tr><tr><td>2</td><td>Петя</td><td>21.01.10</td></tr><tr><td>7</td><td>Лена</td><td>15.08.10</td></tr><tr><td>3</td><td>Света</td><td>25.03.10</td></tr><tr><td>11</td><td>Вася</td><td>02.05.10</td></tr><tr><td>4</td><td>Коля</td><td>13.06.10</td></tr><tr><td>6</td><td>Паша</td><td>01.04.10</td></tr><tr><td>5</td><td>Катя</td><td>15.03.10</td></tr></tbody></table>
.table_header_styling {width: 400px;font-family: Arial;}.table_header_styling tr th, .table_header_styling tr td {width: 33%;background: #eee;border: 1px solid #666;text-align: center;}.table_header_styling tr th {background: #999;border: none;}
Номер | Имя | Дата |
---|---|---|
9 | Саша | 12.03.10 |
1 | Маша | 19.05.10 |
10 | Алена | 17.06.10 |
8 | Андрей | 04.03.10 |
2 | Петя | 21.01.10 |
7 | Лена | 15.08.10 |
3 | Света | 25.03.10 |
11 | Вася | 02.05.10 |
4 | Коля | 13.06.10 |
6 | Паша | 01.04.10 |
5 | Катя | 15.03.10 |
Теперь можно изменить цвет текста и добавить скругленные уголки:
.table_header_styling tr th:nth-child(1) {-moz-border-top-left-radius: 10px;border-top-left-radius: 10px;}.table_header_styling tr th:nth-child(3) {-moz-border-top-right-radius: 10px;border-top-right-radius: 10px;}.table_header_styling tr th {color: blueviolet;height: 40px;}.table_header_styling tr th:hover {background: #333;color: white;}
Номер | Имя | Дата |
---|---|---|
9 | Саша | 12.03.10 |
1 | Маша | 19.05.10 |
10 | Алена | 17.06.10 |
8 | Андрей | 04.03.10 |
2 | Петя | 21.01.10 |
7 | Лена | 15.08.10 |
3 | Света | 25.03.10 |
11 | Вася | 02.05.10 |
4 | Коля | 13.06.10 |
6 | Паша | 01.04.10 |
5 | Катя | 15.03.10 |
А теперь добавим еще выделение строки при наведении:
.table_header_styling tr:hover td {background: #666;}
Номер | Имя | Дата |
---|---|---|
9 | Саша | 12.03.10 |
1 | Маша | 19.05.10 |
10 | Алена | 17.06.10 |
8 | Андрей | 04.03.10 |
2 | Петя | 21.01.10 |
7 | Лена | 15.08.10 |
3 | Света | 25.03.10 |
11 | Вася | 02.05.10 |
4 | Коля | 13.06.10 |
6 | Паша | 01.04.10 |
5 | Катя | 15.03.10 |
Возможно, будет интересно, как сортировать строки этой таблицы при клике на заголовок колонки - Сортировка строк таблицы по имени