Урок №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
|