Наука + Бизнес = $$$

Карта Сайта

Суббота, 21.10.2017, 11:31
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №10: оформление таблиц в CSS

Оформление таблиц в 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 пикселей. Создадим небольшую таблицу, используя все вышеперечисленные свойства.

CSSHTML-код
/* 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 классы. Важные фрагменты будут выделены красным.

CSSHTML-код
.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


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru