Суббота, 29 Декабря 2012 09:58

Стилизация заголовков таблицы

Written by 
Оцени эту запись
(1 Голос)

У каждой таблицы есть заголовки колонок. Им можно задать отдельные стили, если использовать для них тег <th>. Сегодня мы сделаем красивую табличку со стилизированными заголовками и изменением вида колонки при наведении.

 

Допустим есть у нас такая табличка:

 

 

Номер Имя Дата
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>
 
 
Как видите, заголовки "Номер", "Имя", "Дата", в отличие от других ячеек, находятся в тегах <th>. Благодаря этому, мы сможем их стилизировать. Чем и займемся! :-)
 
 
.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

 

Возможно, будет интересно, как сортировать строки этой таблицы при клике на заголовок колонки - Сортировка строк таблицы по имени

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов