Красивые стили таблицы css – Красивое оформление таблиц

Таблицы — это удобный способ представить большое количество информации наиболее компактно. Например всевозможные рейтинги, прайс-листы, цены и так далее. Но важно то, что таблицы должны привлекать пользователя и быть удобными и приятными к просмотру. Поэтому мы сегодня рассмотрим создадим две симпатичные таблицы, а также я сделал видео об одном интересном сервисе.

Красивые таблицы на CSS

Первая таблица, которую мы создадим.

Пример меню можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

HTML каркас не содержит в себе ничего нового. Он выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<table cellspacing="0">
    <tr>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>100%</td>
        <td>Нет</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>100%</td>
        <td>Да</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>50%</td>
        <td>Да</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>0%</td>
        <td>Да</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>100%</td>
        <td>Да</td>
    </tr>
</table>

CSS часть

Сейчас добавим стили нашей таблице:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

table {
    overflow:hidden;
    border:1px solid #d3d3d3;
    background:#fefefe;
    width:70%;
    margin:5% auto 0;
    -moz-border-radius:5px; /* FF1+ */
    -webkit-border-radius:5px; /* Saf3-4 */
    border-radius:5px;
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
 
th, td {
    padding:18px 28px 18px; 
    text-align:center; 
}
 
th {
    padding-top:22px; 
    text-shadow: 1px 1px 1px #fff;
    background:#e8eaeb;
}
 
td {
    border-top:1px solid #e0e0e0; 
    border-right:1px solid #e0e0e0;
}
 
tr.odd-row td {
    background:#f6f6f6;
}
 
td.first, th.first {
    text-align:left
}
 
td.last {
    border-right:none;
}
 
td {
    background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
 
tr.odd-row td {
    background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
 
th {
    background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
    background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
 
tr:first-child th.first {
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px; /* Saf3-4 */
}
 
tr:first-child th.last {
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px; /* Saf3-4 */
}
 
tr:last-child td.first {
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}
 
tr:last-child td.last {
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}

Пример меню можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

Эта таблица немного больше прошлой, но структура очень похожа:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<table>
    <thead>
        <tr>
            <th>№</th>        
            <th>Top 10 фильмов</th>
            <th>Год</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>        
        <td>Побег из Шоушенка</td>
        <td>1994</td>
    </tr>        
    <tr>
        <td>2</td>         
        <td>Крестный отец</td>
        <td>1972</td>
    </tr>
    <tr>
        <td>3</td>         
        <td>Крестный отец: Часть II</td>
        <td>1974</td>
    </tr>    
    <tr>
        <td>4</td> 
        <td>Хороший, плохой, злой</td>
        <td>1966</td>
    </tr>
    <tr>
        <td>5</td> 
        <td>Криминальное чтиво</td>
        <td>1994</td>
    </tr>
    <tr>
        <td>6</td> 
        <td>12 разгневанных мужчин</td>
        <td>1957</td>
    </tr>
    <tr>
        <td>7</td> 
        <td>Список Шиндлера</td>
        <td>1993</td>
    </tr>    
    <tr>
        <td>8</td> 
        <td>Пролетая над гнездом кукушки</td>
        <td>1975</td>
    </tr>
    <tr>
        <td>9</td> 
        <td>Темный рыцарь</td>
        <td>2008</td>
    </tr>
    <tr>
        <td>10</td> 
        <td>Властелин колец: Возвращение Короля</td>
        <td>2003</td>
    </tr> 
</table>

CSS часть

Стили немного другие, потому что нам необходимо изменить цвет строки при наведении:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;         
}
 
.bordered tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    
 
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;    
}
 
.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}
 
.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}
 
.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
 
.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
 
.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
 
.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
 
.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

Существует специальный сервис, который позволяет генерировать стили для таблиц, лишь передвигая ползунки. Я сделал видео об этом сервисе, которое находится ниже. Сервис находится по ссылке — tablestyler.com (был найден новый сервис и ссылка обновлена 2 июня 2017 года). На видео идет видеообзор старого сервиса, но и с новым вы разберетесь 🙂 .

Вывод

Обязательно возьмите данную статью себе на заметку, потому что очень часто приходится оформлять таблицы, а с помощью последнего сервиса это можно сделать очень быстро и красиво :).

Успехов!

Красивые таблицы на CSS +Видео 5.00/5 (100.00%) 9 голос(ов)

Понравилась статья — расскажи друзьям! 🙂

Facebook

Twitter

Вконтакте

Одноклассники

Google+

www.sitehere.ru

CSS-таблицы | CSS

Внешний вид HTML-таблиц можно существенно усовершенствовать с помощью CSS:

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

Чтобы задать границы CSS таблицы, воспользуйтесь свойством border.

В примере ниже элементам <table>, <th> и <td> задается черная граница:

Пример

table, th, td {
   border: 1px solid black;
}

Посмотреть демо

Обратите внимание, что у таблицы в приведенном выше примере двойная граница. Это из-за того, что и у <table>, и у <th> и <td> выставлены отдельные свойства границы.

Свойство border-collapse определяет, нужно ли объединять двойную границу в одну:

Пример

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Посмотреть демо

Если вам нужна простая контурная рамка вокруг всей красивой таблицы CSS, то свойство border нужно применять к элементу <table>:

Пример

table {
    border: 1px solid black;
}

Посмотреть демо

Ширина и высота таблицы определяется свойствами width и height.

В приведенном ниже примере ширина таблицы выставлена на 100%, а высота элементов <th> на 50px:

Пример

table {
    width: 100%;
}

th {
    height: 50px;
}

Посмотреть демо

Свойство text-align предназначено для горизонтального выравнивания (по левому и правому краю, по центру) содержимого элементов <th> и <td>.

По умолчанию, содержимое элементов <th> выравнивается по центру, а элементов <td> — по левому краю.

В приведенном ниже примере оформления таблицы CSS к содержимому элементов <th> применяется выравнивание по левому краю:

Пример

Посмотреть демо

Свойство vertical-align предназначено для вертикального выравнивания (по верхней и нижней границе, а также посередине) содержимого внутри элементов <th> и <td>.

По умолчанию, содержимое <th> и <td> выравнивается посередине.

В приведенном ниже примере к содержимому элементов <td> применяется вертикальное выравнивание по нижней границе:

Пример

td {
    height: 50px;
    vertical-align: bottom;
}

Посмотреть демо

Для регулирования расстояния между границей элемента и его содержимым воспользуйтесь свойством padding (для элементов <td> и <th>):

Пример

th, td {
    padding: 15px;
    text-align: left;
}

Посмотреть демо

Можно использовать свойство border-bottom в элементах <th> и <td>, чтобы отделить строки CSS таблицы друг от друга горизонтальным разделителем:

Пример

th, td {
    border-bottom: 1px solid #ddd;
}

Посмотреть демо

Воспользуйтесь селектором :hover в элементе <tr>, чтобы подсветить ячейки при наведении на них курсора мыши.

Пример

tr:hover {background-color: #f5f5f5}

Посмотреть демо

Чтобы получить CSS таблицы со строками разного цвета, используйте селектор nth-child(), и задайте всем четным и нечетным строкам разный цвет.

Пример

tr:nth-child(even) {background-color: #f2f2f2}

Посмотреть демо

В приведенном ниже примере показано, как задавать цвет фона и текста для элементов <th>:

Пример

th {
    background-color: #4CAF50;
    color: white;
}

Посмотреть демо

Адаптивная таблица CSS будет показывать горизонтальный скроллинг, если окажется слишком большой для страницы или экрана.

Добавьте <div> с заданным свойством overflow-x: auto для элемента <table>, чтобы сделать таблицу адаптивной.

Пример

<div>

<table>
... содержимое таблицы ...
</table>

</div>

Посмотреть демо

Больше примеров

Создаем причудливую таблицу

В этом примере показано, как можно создать забавную таблицу с помощью каскадных таблиц стилей CSS.

Выставляем расположение подписи таблицы

В данном примере показано, как можно расположить подпись к таблице при помощи CSS.

CSS-свойства таблицы

Данная публикация представляет собой перевод статьи «CSS Tables» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Красивая таблица html с добавлением нескольких стилей

Сегодня я покажу пример, как благодаря нескольким стилям css, создается таблица html с нуля в блокноте. Весь процесс написания кода, какие теги используются при написании таблицы, стили оформления, несколько полезных советов и какими можно пользоваться генераторами для создания таблицы даже если вы не разбираетесь в html тегах.

к оглавлению ^

Как сделать таблицу в html

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

Для совсем новеньких, если вы вообще не понимаете что и как делается, ранее я уже приводил пример по созданию таблицы. Как вообще создается таблица, какие используются теги при ее создании, как можно разбивать ячейки и многое другое.

Что касается кода, некоторую часть можно было уменьшить, но я хотел показать, что можно применять к различным тегам и как это все работает при создании таблицы html. Готовую таблицу я взял из прошлой своей статьи, где я описывал, создание таблицы и давал описание тегам ( кто за что отвечает). Кому будет интересно, для общего развития, можете почитать.

Готовый шаблон для документа я уже делал, возьму его и вставлю сюда же, чтоб было все понятно. Решил показать пример по таблицам, в котором буду пользоваться DIV-ами и собственно стилями CSS. Способ не самый простой, в интернете полно легких примитивных вариантов. Но, такой способ, как у меня, я лично не нашел.

Из-за этого решил сделать таблицу по-другому. Такой вариант очень нравится женскому полу, судя по письмам. Сама таблица html получилось с округленными углами, своим цветом, отступами и шрифтом.

к оглавлению ^

Теги html таблицы

<p>Таблица html</p> <table cellspacing=»0″ cellpadding=»3″ border=»0″> <tr> <th>Иванов</th> <th>Петров</th> <th>Сидоров</th> <th>Лукашин</th> </tr> <tr> <td>3</td> <td>4</td> <td>8</td> <td>12</td> </tr> <tr> <td>1</td> <td>2</td> <td>5</td> <td>7</td> </tr> <tr> <td>0</td> <td>4</td> <td>9</td> <td>11</td> </tr> <tr> <td>11</td> <td>13</td> <td>17</td> <td>19</td> </tr> <tr> <td>13</td> <td>14</td> <td>20</td> <td>22</td> </tr> <tr> <td>23</td> <td>24</td> <td>11</td> <td>14</td> </tr> <tr> <td>13</td> <td>14</td> <td>18</td> <td>14</td> </tr> </table>

С помощью элемента table, который служит контейнером, создается таблица html. Любая таблица состоит из строк и ячеек. Задаются строки и ячейки с помощью тегов tr и td, как это было показано на моем примере. В самом конце таблицы данный элемент нужно обязательно закрывать.

Данный элемент может содержать в себе такие атрибуты. Многие из них используют очень часто, некоторые нет. Смотря, что вам нужно сделать. Задать ширину и высоту или задать фоновый рисунок для всей таблицы. Обязательно используйте отступы.

1. align — выравниваем таблицу.
2. background — задается фоновый рисунок для всей таблицы.
3. bgcolor — ставим цвет фона самой таблицы.
4. border — можно поставить рамку для всей таблицы или вообще ее убрать.
5. bordercolor — цвет самой рамки.
6. cellpadding — отступ от рамки до ячейки.
7. cellspacing — установить расстояние между ячейками.
8. cols — число колонок в таблице.
9. height — высота.
10. width — ширина.

Самой таблице в начале задал id="main" и указал некоторые значения.

cellspacing=»5px» – задает расстояние между внешними границами всех ячеек. Я установил 5 пикселей, чтоб было видно о чем идет речь.

cellpadding=»5px» – задает расстояние между границей ячейки и ее содержимым.

border=»0″ – задает границу таблице, в моем случае ее нет.

width=»40%» – тут просто, ширина таблицы. Можно задать ее в пикселях, в моем случае указано в процентах.

Вот, что из всего этого получится в самом конце. Как видно, сам код таблицы не такой уже и сложный. Единственный момент, в стилях используется свойство из CSS3, кто еще до сих пор про него не знал. Расстояние между ячейками, ширину, высоту, цвет и выравнивание задается уже в стилях.

к оглавлению ^

Таблица html с добавлением стилей

Что касается кода в html документе, на этом все. НаписАл название таблицы, задал количество столбиков и строчек, задал отступы и ширину. Теперь переходим в файл со стилями. Называется он (style.css) как указано в начале документа. Начнем с первого:

#main{ margin:0 auto 0 auto; font-family:Tahoma; text-align:center; }

В данном блоке указаны все свойства и значения этих свойств для #main. id="main" я прописал ранее для самой таблицы (table).Свойства для параграфа с названием таблицы:

p{ padding:7px 30px 7px 30px; margin:0 auto 15px auto; background-color:#9400D3; color:CCFF00; width:350px; text-align:center; font-size:30px; border-radius: 13px; }

padding:7px 30px 7px 30px; — отступы внутри ячейки от границ.

margin:0 auto 15px auto; — отступы от внешних элементов.

background-color:#9400D3; color:CCFF00; — задал цвет для блока и цвет для текста.

width:350px; — ширина.

text-align:center; — выровнял текст по центру.

font-size:30px; — задал размер шрифта.

border-radius: 13px; — округлил углы данного блока. Так же само я сделал для всех блоков.

th{ border-radius: 13px; background-color:#FA8072; color:#FFFAFA; font-size:18px; padding:7px 30px 7px 30px; }

border-radius: 13px; — округляем углы.

background-color:#FA8072; color:#FFFAFA; — указываем цвет блока и цвет шрифта в этом блоке.

font-size:18px; — размер шрифта.

padding:7px 30px 7px 30px; — отступы внутри ячеек.

Так же задал некоторые свойства для тега, в котором находятся все данные по таблице.

td{ border-radius: 10px; background-color:#800000; color:CCFF00; font-size:15px; padding:15px 30px 15px 30px; }

Все так же само, как и в прошлых вариантах…нового ничего нет.

border-radius: 10px; — закруглил углы.

background-color:#800000;

color:CCFF00; — задал цвет фона и цвет шрифта.

font-size:15px; — установил размер.

padding:15px 30px 15px 30px; — отступы внутри ячеек.

к оглавлению ^

Генератор html таблиц

Если вы не понимаете, что и как делается, не знаете тегов и не хотите тратить время, можно воспользоваться онлайн генераторами, с помощью которых быстро создаются таблицы. Вот несколько таких генераторов html таблиц, часто их еще называют онлайн конструкторы:

• apsolyamov.ru
• daruse.ru
• dezzi.ru

Все они практически одинаковые, выбрать можно абсолютно любой. Вы указываете количество строк и колонок, задаете расстояние между ячейками, расстояние между таблицей и ячейками, ставите ширину и размер границы.

Генератор или онлайн конструктор сделает все за вас. После нажатия кнопки Create table, на мониторе появится готовый результат такой таблицы и уже готовый код для вставки на страницу. Таким образом, даже без знаний html кода, у вас получится готовая таблица буквально на несколько секунд.

Легко и быстро можно создать абсолютно любое количество ячеек. Иногда бывает просто необходимая вещь, которой всегда можно воспользоваться. Если вы знаете получше генераторы, поделитесь названием в комментариях.

Результат самой таблицы вы уже видели выше. Вы можете добавить еще свои свойства. Если у вас остались вопросы, я с радостью на них отвечу. Буду благодарен за комментарий или репост в социальных сетях.

Евгений Несмелов

nesmelov.ru

Оформление таблиц | WebReference

Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Добавляя к таблицам всю мощь стилей можно весьма удачно вписать таблицы в дизайн сайта, наглядно и красиво представить табличные данные.

Ширина таблицы

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

table { width: 100%; }
.tbl-medium { width: 60%; }
.tbl-small { width: 200px; }

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small.

<table>

Выравнивание таблиц

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto, как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    margin: auto; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table>
   ...
  </table>
 </body>
</html>

В данном примере для всех таблиц на странице задано выравнивание по центру.

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору table. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th, то он и будет установлен в качестве фона (пример 3).

Пример 3. Цвет фона

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    background: #f5e8d0; /* Цвет фона таблицы */
    border-spacing: 0; /* Расстояние между ячеек */
   }
   th {
    background: #496791; /* Цвет фона ячеек */
    color: #fff; /* Цвет текста */
   }
   td, th {
    padding: 5px 10px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th rowspan="2">Вид соединения</th>
    <th colspan="2">Поля допусков ширины шпоночного паза</th>
   </tr>
   <tr>
    <th>Вал</th><th>Втулка</th>
   </tr>
   <tr>
    <td>Свободное</td><td>H9</td><td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td><td colspan="2">P9</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child, добавляя его к селектору tr. Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов <thead> и <tbody> (пример 4).

Пример 4. Создание зебры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии */
   }
   thead {
    background: #f5e8d0; /* Цвет фона заголовка */
   }
   td, th {
    padding: 5px; /* Поля в ячейках */
    border: 1px solid #333; /* Параметры рамки */
   }
   tbody tr:nth-child(even) {
    background: #f0f0f0; /* Зебра */
   }
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th rowspan="2">Интервалы размеров, мм</th>
     <th colspan="4">Допуск IT, мкм, для квалитетов</th>
    </tr>
    <tr>
     <th>5</th><th>6</th><th>7</th><th>8</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>До 3</td><td>4</td><td>6</td><td>10</td><td>14</td>
    </tr>
    <tr>
     <td>Св. 3 до 6</td><td>5</td><td>8</td><td>12</td><td>18</td>
    </tr>
    <tr>
     <td>Св. 6 до 10</td><td>6</td><td>9</td><td>15</td><td>22</td>
    </tr>
    <tr>
     <td>Св. 10 до 18</td><td>8</td><td>11</td><td>18</td><td>27</td>
    </tr>
    <tr>
     <td>Св. 18 до 30</td><td>9</td><td>13</td><td>21</td><td>33</td>
    </tr>
    <tr>
     <td>Св. 30 до 50</td><td>11</td><td>16</td><td>25</td><td>39</td>
    </tr>
    <tr>
     <td>Св. 50 до 80</td><td>13</td><td>19</td><td>30</td><td>46</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Зебра

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd, тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even).

Поля внутри ячеек

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding, которое работает с селектором td или th, как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing, добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

table {
 border-spacing: 3px; /* Расстояние между ячеек */
}
thead  th {
 background: #e08156; /* Цвет фона заголовка */
 color: #333; /* Цвет текста */
}
td, th {
 padding: 5px; /* Поля в ячейках */
 background: #4c715b; /* Цвет фона ячеек */
 color: #f5e8d0; /* Цвет текста */
}

Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse, то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

Границы и рамки

Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border, которое применяется к элементам (<td> или <th>). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse. В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table, а дальше оно всё сделает самостоятельно (пример 6).

Пример 6. Применение свойства border-collapse при создании рамок таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии */
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячеек */
   }
   td {
    border: 2px solid #333; /* Параметры границ */
    padding: 4px; /* Поля в ячейках */
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><td>O</td><td>X</td><td>X</td></tr>
   <tr><td>O</td><td>O</td><td>X</td></tr>
   <tr><td>X</td><td>X</td><td>O</td></tr>
  </table>
 </body>
</html>

Разница между границами таблицы при добавлении свойства border-collapse, а также без него, представлена на рис. 4.

а — свойство не установлено

б — свойство установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom, border-left и другие подобные. Применять границы к элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому добавляем их к селектору table и td (пример 7).

Пример 7. Линии между строк

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии */
    border-bottom: 2px solid #333; /* Линия снизу таблицы */
    border-top: 2px solid #333; /* Линия сверху таблицы */
   }
   td { 
    text-align: center; /* Выравнивание по центру */
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
   }
   td, th {
    padding: 5px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th rowspan="2">Вид соединения</th>
     <th colspan="2">Поля допусков ширины шпоночного паза</th>
    </tr>
    <tr>
     <th>Вал</th><th>Втулка</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Свободное</td><td>H9</td><td>D10</td>
    </tr>
    <tr>
     <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
    </tr>
    <tr>
     <td>Плотное</td><td colspan="2">P9</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 5.

Рис. 5. Таблица с горизонтальными линиями

Выравнивание текста в ячейках

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент <th>, он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии */
    width: 100%; /* Ширина таблицы */
   }
   th { 
    background: #dfebb7; /* Цвет фона ячейки */
    text-align: left; /* Выравнивание по левому краю */
   }
   td {
    text-align: center; /* Выравнивание по центру */
   }
   th, td {
    border: 1px solid black; /* Параметры рамки */
    padding: 4px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
   <tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

В данном примере содержимое <th> выравнивается по левому краю, а содержимое <td> — по центру. Результат примера показан ниже (рис. 6).

Рис. 6. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top, как показано в примере 9.

Пример 9. Выравнивание содержимого ячеек по вертикали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   th {
    background: #496791; /* Цвет фона ячеек заголовка */
    color: #fff; /* Цвет текста */
   }
   td { 
    background: #f5e8d0; /* Цвет фона ячеек */
    text-align: center; /* Выравниваем по центру */
   }
   td, th {
    padding: 5px 10px; /* Поля в ячейках */
    vertical-align: top; /* Выравниваем по верхнему краю */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th rowspan="2">Вид соединения</th>
    <th colspan="2">Поля допусков ширины шпоночного паза</th>
   </tr>
   <tr>
    <th>Вал</th><th>Втулка</th>
   </tr>
   <tr>
    <td>Свободное</td><td>H9</td><td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td><td colspan="2">P9</td>
   </tr>
  </table>
 </body>
</html>

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Рис. 7. Выравнивание текста в ячейках

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

webref.ru