Четверг, 03 Мая 2012 12:34

Красивая табличка средствами html, css

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

Сделаем красивую табличку, у которой выделяются заголовки колонок, отличаются четные и нечетные строки и изменяется цвет строки при наведении. Для этого будем использовать html и css. Это можно сделать красиво и при этом полезно, если таблица достаточно длинная.

 

 

Обозначения стран и территорий в интеренете
ad Андора
be Бельгия
bf Буркина-Фасо
bg Болгария
bh Бахрейн
bi Бурунди
cf Центральноафриканская республика
cg Конго
ch Швейцария
ci Кот-д'Ивуар
ck Кука острова
cl Чили
cm Камерун
cn Китай
co Колумбия
cr Коста-Рика
cs Чехословакия
cu Куба
cv Кабо-Верде
cx Рождества, о
cy Кипр
cz Чехия
de Германия
dj Джибути
dk Дания
dm Доминика
fj Фиджи

 

Для этого просто пишем табличку, какую нужно вывести на страничке, и задаем ей класс nice_table

 

 

<table class="nice_table" width="600">
<tbody>
<tr>
<th colspan="2">
Обозначения стран и территорий в интеренете</th>
</tr>
<tr>
<td>
ad</td>
<td>
Андора</td>
</tr>
...
</tbody>
</table>
 
 
В css-файле прописываем табличке с классом nice_table такие стили (подробнее о CSS):
 
.nice_table tr td {padding: 5px 10px; border: 1px solid #7D26CD; color: #000;}
.nice_table tr:nth-child(odd) {background: #9545de}
.nice_table tr:nth-child(even) {background: #5b159b}
.nice_table tr:hover {background: #b675f1}
.nice_table tr th {padding: 10px 15px; border: 1px solid #7D26CD; color: #000; text-transform: uppercase;}
 
Разберем их подробнее:
 
nice_table tr td {padding: 5px 10px; border: 1px solid #7D26CD; color: #000;}
 
каждой ячейке таблицы задаем внутренние отступы с помощью свойства padding, задаем цвет шрифта и обводку border.
 
Разные фоны для четных и нечетных строк задаем с помощью свойств :nth-child(odd) и :nth-child(even):
 
 
.nice_table tr:nth-child(odd) {background: #9545de}
.nice_table tr:nth-child(even) {background: #5b159b} 
 
 
Также зададим отдельный цвет фона для ячеек при наведении:
 
.nice_table tr:hover {background: #b675f1} 
 
 
При желании можно задать отличные стили для заголовков колонок таблицы. Для этого залоговки берем не в тег <td>, а в тег <th>. Тогда для него можно отдельно задать внешний вид:
 
.nice_table tr th {padding: 10px 15px; border: 1px solid #7D26CD; color: #000; text-transform: uppercase;}
 
По умоляанию, текст в <th>, в отличие от <td>, будет жирным. Если вам это не нужно, можно задать свойство font-weight: normal.
 
 
Значит, можете своей таблице задать класс nice_table вот таким образом:
 
<table class="nice_table">
 
и просто скопировать в свой css-файл мои стили. При желании можно легко изменить любой цвет, фон и т.д.

Additional Info

You have no rights to post comments

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