kate-land

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

У нее такой код:

<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;

}

Теперь можно изменить цвет текста и добавить скругленные уголки:

.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;

}

А теперь добавим еще выделение строки при наведении:

.table_header_styling tr:hover td {

background: #666;

}

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