Стили для таблиц

Оцените материал
(0 голосов)

Здравствуйте! От стилизации списков плавно переходим к заданиям стилей для таблиц. В этом уроке мы рассмотрим стили для таблиц.

CSS предоставляет ряд свойств, которые помогают стилизовать таблицу:

  • border-collapse: устанавливает, как будет стилизоваться граница смежных ячеек

  • border-spacing: устанавливает промежутки между границами смежных ячеек

  • caption-side: устанавливает положение элемента caption

  • empty-cells: задает режим отрисовки для пустых ячеек

  • table-layout: определяет размеры таблицы

 

 

Установка таблицы

Ранее для установки границы в таблице широко использовался атрибут border, например:

<table border="2px" >

Сейчас же тенденция для стилизации использовать только стили CSS, поэтому граница также задается через CSS с помощью стандартного свойства border:

 table {
    border: 1px solid #ccc;  /* граница всей таблицы */
}
tr {
    border: 1px solid #ccc;  /* границы между строками */
}
td, th {
    border: 1px solid #ccc;  /* границы между столбцами */
}

При установке границ между столбцами с помощью свойства border-collapse можно установить общую или раздельную границу между смежными ячейками:

  • collapse: смежные ячейки имеют общую границу

  • separate: смежные ячейки имеют отдельные границы, которые разделяются пространством

Если смежные ячейки имеют раздельные границы, то с помощью свойства border-spacing можно установить пространство между границами:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизаци таблиц в CSS3</title>
        <style>
        table {
            border: 1px solid #ccc;
            border-spacing: 3px;
        }
         
        td, th{
            border: solid 1px #ccc;
        }
        .collapsed{
            border-collapse: collapse;
        }
        .separated{
            border-collapse: separate;
        }
        </style>
    </head>
    <body>
        <h3>Collapse</h3>
        <table class="collapsed">
            <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
            <tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
            <tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>
            <tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
        </table>
        <h3>Separate</h3>
        <table class="separated">
            <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
            <tr><td>G 5</td><td>LG</td><td>44900</td></tr>
            <tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>
            <tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>
        </table>
    </body>
</html>

Просмотреть  пример

Пустые ячейки

Свойство empty-cells позволяет стилизовать пустые ячейки с помощью одного из следующих значений:

  • show: пустые ячейки отображаются, значение по умолчанию

  • hide: пустые ячейки не отображаются

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизаци таблиц в CSS3</title>
        <style>
        table {
            border: 1px solid #ccc;
            border-spacing: 3px;
        }
         
        td, th{
            border: solid 1px #ccc;
        }
        .hidden-empty-cells{
            empty-cells: hide;
        }
        </style>
    </head>
    <body>
        <h3>Show</h3>
        <table>
            <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
            <tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
            <tr><td>iPhone 6S</td><td></td><td></td></tr>
            <tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
        </table>
        <h3>Hide</h3>
        <table class="hidden-empty-cells">
            <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
            <tr><td>G 5</td><td>LG</td><td>44900</td></tr>
            <tr><td>HTC 10</td><td></td><td></td></tr>
            <tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>
        </table>
    </body>
</html>

Просмотреть  пример

Позиционирование заголовка

Свойство caption-side управляет позицией заголовка и может принимать следующие значения:

  • top: позиционирование заголовка вверху (значение по умолчанию)

  • bottom: позиционирование заголовка внизу

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизаци таблиц в CSS3</title>
        <style>
        table {
            border: 1px solid #ccc;
            border-spacing: 3px;
        }
         
        caption {
         
            font-weight: bold;
        }
         
        td, th{
            border: solid 1px #ccc;
        }
        .captionBottom{
            caption-side: bottom;
        }
        </style>
    </head>
    <body>
        <h3>Top</h3>
        <table>
            <caption>Флагманы 2015 года</caption>
            <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
            <tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
            <tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>
            <tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
        </table>
        <h3>Bottom</h3>
        <table class="captionBottom">
            <caption>Новинки 2016 года</caption>
            <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
            <tr><td>G 5</td><td>LG</td><td>44900</td></tr>
            <tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>
            <tr><td>iPhone SE</td><td>Apple</td><td>37000</td></tr>
        </table>
    </body>
</html>

Просмотреть  пример

Управление размером таблицы

С помощью свойства table-layout можно управлять размером таблицы. По умолчанию это свойство имеет значение auto, при котором браузер устанавливает ширину столбцов таблицы автоматически, исходя из ширины самой шиокой ячейки в столбце. А из ширины отдельных столбцов складывается ширина всей таблицы.

Однако с помощью другого значения - fixed можно установить фиксированную ширину:

table {
    border: 1px solid #ccc;
    border-spacing: 3px;
    table-layout: fixed;
    width:350px;
}

Вертикальное выравнивание ячеек

Как правило, содержимое ячеек таблицы выравнивается по центру ячейки. Но с помощью свойства vertical-align это поведение можно переопределить. Это свойство принимает следующие значения:

  • top: выравнивание содержимого по верху ячейки

  • baseline: вырвнивание перой строки текста по верху ячейки

  • middle: выравнивание по центру (значение по умолчанию)

  • bottom: выравнивание по низу

Свойство vertical-align применяется только к элементам <th> и <td>:

td, th{
    border: solid 1px #ccc;
    vertical-align: bottom;
    height: 30px;
}
Прочитано 623 раз Последнее изменение Воскресенье, 10 июля 2016 10:13
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+