R598551293139
Урок №10: оформление таблиц в CSS
При изучении HTML, мы уже имели дело с таблицами, поэтому данный урок будет не о создании таблиц. На этом уроке мы рассмотрим как красиво оформить таблицу с помощью CSS. Перед тем, как приступить к данному уроку, рекомендуется пересмотреть материал: Создание таблиц в HTML.
Рамка таблицы
За рамку таблицы отвечают такие свойства: border - задает ширину, стиль и цвет рамки и border-collapse - отвечает за объединение рамок ячеек в таблице. Для примера создадим две таблицы:
.table { border:1px solid blue;}.tab2 { border:3px solid red; border-collapse:collapse;}
|
|
В первой таблице двойные границы, так как элементы table, td и th, имеют собственные границы. Во-втором случае они имеют общую рамку, благодаря свойству border-collapse:collapse.
Ширина и высота
Ширину и высоту можно назначить как таблице, так и каждой ее ячейке. Ширина устанавливается значением свойства width, высота - значением height. Например:
table { width:100%;}th { height:50px; }
Такая таблица будет максимальной ширины, а ее ячейка для заголовков th, будет высотой в 50 пикселей
Выравнивание текста
Текст можно выровнять как в таблице в целом, так и в каждой ее ячейке. По умолчанию текст выравнивается по левой стороне. Свойство отвечающее за горизонтальное выравнивание текста - text-align, имеет следующие значения: left - выравнивание по левому краю, center - выравнивание по центру, right - выравнивание по правому краю. За вертикальное выравнивание отвечает свойство vertical-align. Данное свойство имеет такие значения: top - выравнивание по верхнему краю, bottom - выравнивание по нижнему краю, middle - выравнивание по середине.
td {text-align:right; height:70px; vertical-align:bottom;}Ячейка имеет высоту 70 пикселе, содержимой данной ячейки горизонтально выравнивается по правому краю и вертикально - по нижнему краю.
Фон таблицы и отступы от границ
Фон можно задать как таблице в целом, так и каждой ее строке или ячейке. Задается фон с помощью свойства background-color, значением которого будет ваш цвет фона. Не всегда красиво, когда содержимое ячеек находится вплотную к их границам, для этого существует свойство, которое отвечает за отступы от границ ячеек таблицы - padding, которое, как правило, задается в пикселах.
td, th {padding:5px; /* Внутренний отступ */
background-color:#478CFB; /* Фон */}
Ячейкам задан синий фон и отступ от границ в 5 пикселей. Создадим небольшую таблицу, используя все вышеперечисленные свойства.
| CSS | HTML-код |
|---|---|
| /* table */ .tab7 { width: 60%; border-collapse: collapse;} /* td */ .tab7td{ border: 1px solid #98bf21; padding: 3px 7px 2px 7px;} /* th */ .tab7th { text-align: left; padding: 5px; background-color: #A7C942; color: #fff; border: 1px solid #98bf21;} /* alernative tr*/ .tabalt { background-color: #EAF2D3; } |
<table class="tab7" align="center">
<tr><th class="tab7th">Фильм</th><th class="tab7th">Жанр</th> <tr> <td class="tab7td">Побег из Шоушенка</td> <td class="tab7td">Драма, криминал</td> </tr> <tr class="tabalt"><td class="tab7td">Крестный отец</td> <td class="tab7td">Драма, криминал</td> <tr> <td class="tab7td">Крестный отец 2</td> <td class="tab7td">Драма, криминал</td> </tr> <tr class="tabalt"><td class="tab7td">Хороший, плохой, злой</td> <td class="tab7td">Приключения, вестерн</td> </tr> </table> |
В результате получится такая таблица. На примере видно, каждому тегу таблицы были заданы определенные свойства с помощью классов CSS. Исходный код можно без проблем подредактировать под любой стиль сайта. Содержимое таблицы также можно красиво оформить.
| Фильм | Жанр |
|---|---|
| Побег из Шоушенка | Драма, криминал |
| Крестный отец | Драма, криминал |
| Крестный отец 2 | Драма, криминал |
| Хороший, плохой, злой | Приключения, вестерн |
В качестве фона таблицы или любой ее строки и ячейки, можно использовать изображение. За это отвечает свойство background-image, значение которого - путь к файлу вашего фонового изображения.
Округление таблицы
Иногда таблицы с округленными углами очень хорошо вписываются в дизайн сайта. Есть много способов округления таблицы с помощью (JavaScript или JQeury). Однако это можно без проблем сделать и с помощью таблиц стилей CSS. Самым эффективным методом округления углов таблицы - создать css классы для угловых ячеек с параметрами округления рамки. Для этого используется свойство border-radius. Также стоит запомнить, углы округлить можно только если у свойства border-collapse значение - separate (заменить значение collapse этого свойства можно так - border-spacing: 0). И все же границы между ячейками будут толще, чем при border-collapse:collapse.
Округлим предыдущую таблицу. Для этого внесем изменения в HTML-код и добавил CSS классы. Важные фрагменты будут выделены красным.
| CSS | HTML-код |
|---|---|
|
.tab8 {width: 60%; border-collapse: separate; border-spacing: 0; } .tab8td{ border: 1px solid #98bf21; padding: 3px 7px 2px 7px;} .verhleft { -moz-border-radius-topleft: 12px; border-top-left-radius: 12px; text-align: left; padding: 5px; background-color: #A7C942; color: #fff; border: 1px solid #98bf21;} .verhright { -moz-border-radius-topright: 12px; border-top-right-radius: 12px; text-align: left; padding: 5px; background-color: #A7C942; color: #fff; border: 1px solid #98bf21;} .nizleft { -moz-border-radius-bottomleft: 12px; border-bottom-left-radius: 12px; border: 1px solid #98bf21; padding: 3px 7px 2px 7px;} .nizright { -moz-border-radius-bottomright: 12px; border-bottom-right-radius: 12px; border: 1px solid #98bf21; padding: 3px 7px 2px 7px;} .tabalt8 { background-color: #EAF2D3; } |
<table class="tab8" align="center" > <tr> <th class="verhleft">Фильм</th> <th class="verhright">Жанр</th> </tr> <tr> <td class="tab8td">Побег из Шоушенка</td> <td class="tab8td">Драма, криминал</td> </tr> <tr class="tabalt8"> <td class="tab8td">Крестный отец</td> <td class="tab8td">Драма, криминал</td> </tr> <tr> <td class="tab8td">Крестный отец 2</td> <td class="tab8td">Драма, криминал</td> </tr> <tr class="tabalt8"> <td class="nizleft">Хороший, плохой, злой</td> <td class="nizright">Приключения, вестерн</td> </tr> </table> |
В результате получится такая таблица с закругленными углами на 12 пикселей. В данном примере мы закруглили лишь по одному углу крайних ячеек, которые и являлись углами самой таблицы.
| Фильм | Жанр |
|---|---|
| Побег из Шоушенка | Драма, криминал |
| Крестный отец | Драма, криминал |
| Крестный отец 2 | Драма, криминал |
| Хороший, плохой, злой | Приключения, вестерн |
Изменение фона ячейки при наведении курсора
Как видно в предыдущей таблице, при наведении курсора на определенную ячейку, меняется ее фон и цвет текста. Это можно провернуть несколькими способами. В данном случае добавлен псевдокласс hower, который назначен классам отвечающим за ячейки:
.tab8td:hover {
background: #f3bd48; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */}
.nizleft:hover {
background: #f3bd48; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */}
.nizright:hover {
background: #f3bd48; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */}
Также для этих целей можно использовать два события: onMouseOver - отвечает за изменение содержимого, при наведении на него курсором мышки и onMouseOut - отвечает за вид содержимого, если курсор мышки не наведен на него. Которые задаются без CSS, напрямую в HTML-код. Например:
<td bgcolor='pink' onmouseover="this.style.backgroundColor='#CC6633';"onmouseout="this.style.backgroundColor='pink' ">
| Наведите пожалуйста курсор мышки на данную ячейку |
К сожалению не все браузеры правильно отобразят данный результат, однако эти способы наиболее популярные и без проблем работают в популярных браузерах.
Далее рассмотрим блоки, блочные элементы и их свойства: Блоки в CSS
