Красивое оформление таблиц 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

<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>

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 */
}

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>

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;
}

CSS: Оформление HTML таблиц — рамка, размер, выравнивание текста

Табличные данные — информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег <table>, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега <tr> и заканчивается закрывающим тегом </tr>.

Внутри тега <tr> располагаются ячейки таблицы, представленные тегами <th> или <td>. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу <table>, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов <th> и <td>.

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

Попробовать »

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

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing, то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

Размер таблицы

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

th, td { padding: 7px; }

Попробовать »

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

table { width: 70%; }
th { height: 50px; }

Попробовать »

Выравнивание текста

По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:

• top: текст выравнивается по верхней границе ячейки
• middle: выравнивает текст по центру (значение по умолчанию)
• bottom: текст выравнивается по нижней границе ячейки

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th {
        border: 1px solid black; 
        border-collapse: collapse;
      }
      table { width: 70% }
      td { text-align: right; }
      th { height: 50px; }
      .test1 { vertical-align: top; }
      .test2 { vertical-align: bottom; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

Чередование фонового цвета строк таблицы

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      .alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>

Попробовать »

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }

Попробовать »

Изменение фона строки при наведении курсора

Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

tr:hover { background-color: #E0E0FF; }

Попробовать »

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

Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin, задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:

table { margin: 10px auto; }

Попробовать »

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

table { margin: 10px auto 30px; }

Оформление таблиц | 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> <tr><td>…</td></tr> </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_s9</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_s9</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_s9</td> </tr> <tr> <td>Плотное</td><td colspan=»2″>P9</td> </tr> </table> </body> </html>

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

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

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

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

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

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

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-свойства таблицы

Свойства	Описание
border	Позволяет одним выражением установить сразу все границы
border-collapse	Позволяет объединять двойные границы в одну
border-spacing	Позволяет указать расстояние между смежными ячейками
caption-side	Отвечает за положение подписи к таблице
empty-cells	Позволяет показать или скрыть границы для пустых ячеек в таблице
table-layout	Позволяет использовать в таблице шаблонный алгоритм

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

CSS оформление таблиц — ширина, высота, выравнивание, размер и другие параметры

Про HTML-таблицы читайте здесь, а в этой статье я расскажу об их оформлении с помощью CSS. Для форматирования таблиц каскадные стили используют перечисленные ниже свойства.

width и height

Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера <table>. Значения устанавливаются в любых единицах длины CSS, но зачастую используются пиксели (px) и проценты (%). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.

table {width: 450px; height: 80%;}

caption-side

Указывает, где будет размещён заголовок таблицы, описанный тегом <caption>. Свойству можно задавать значения:

• top — расположить над таблицей.
• bottom — разместить под таблицей.

Эксклюзивно для обозревателя Firefox доступны значения left (заголовок слева) и right (справа от таблицы), но другие браузеры их не понимают.

table {caption-side: top;}

border-collapse

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

Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate; даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse; (результат показан на рисунке ниже).

border-spacing

Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе — по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}.

CSS-код

   table { 
    border: 4px double #FCA360;
    border-collapse: separate;
    border-spacing: 10px 20px;
   }
   td {
    padding: 3px;
    border: 1px solid #FCA360;
   }

Задаёт таблице следующее оформление:

empty-cells

Указывает, будет ли отображаться фон и границы ячейки, если она пуста. Значение у свойства может быть одно из двух:

• show — показывать границы и фон (по умолчанию).
• hide — скрыть их. Если все ячейки строки пусты, то будет скрыта, соответственно, вся строка. Если таблице задано правило border-collapse: collapse;, то свойство игнорируется.

table-layout

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

• auto. Ширина определяется автоматически. При этом либо суммируется ширина всех столбцов, либо берётся значение свойства width, если таблице оно задано. Браузер сначала загружает таблицу, потом анализирует её, определяя ширину, и только после этого отображает.
• fixed. Фиксированная ширина, которая определяется по первой строке.

Пример оформления таблицы

Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height) и шириной (width).

Помня это, оформим несложную таблицу, частично прокомментировав код.

<!DOCTYPE html>
<html>
 <head>
  <title>border-collapse</title>
  <style>
   table {
    width: 50%;
    caption-side: bottom;
    border: 4px solid #006400;
    border-collapse: collapse;
    table-layout: fixed;
   }
   th {
    font-size: 13px;
    font-weight: bold;
    background: #ADFF2F;
    border-top: 4px solid #006400;
    border-bottom: 3px solid #FF8C00;
    color: #039;
    padding: 8px;
   }
   td {
    background: #E0FFFF;
    border-bottom: 1px solid #FF8C00;
    border-top: 1px solid transparent;
    padding: 8px;
   </style>
 </head>
 <body>   
  <table>
   <caption>Пример таблицы</caption>
   <tr> 
    <th>Цены</th><th>2014</th>
    <th>2015</th><th>2016</th>
   </tr>
   <tr> 
    <td>Хлеб</td><td>16</td>
    <td>18</td><td>21</td>
   </tr>
   <tr> 
    <td>Сахар</td><td>35</td>
    <td>44</td><td>50</td>
   </tr>
   <tr> 
    <td>Соль</td><td>8</td>
    <td>8,50</td><td>9</td>
   </tr>
  </table> 
 </body>
</html>

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

width: 50%;

Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера <body>, потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера.

caption-side: bottom;

Размещаем заголовок снизу, под таблицей.

border: 4px solid #006400;

Задаём таблице цветную рамку толщиной 4 пикселя.

border-collapse: collapse;

Объединяем границы ячеек.

table-layout: fixed;

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

font-size: 13px;

Задаём размер шрифта заглавных ячеек.

font-weight: bold;

Делаем текст внутри них жирным.

background: #ADFF2F;

Устанавливаем цвет фона ячеек.

border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;

Настраиваем верхние и нижние рамки.

color: #039;

Определяем цвет текста.

padding: 8px;

Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.

Полезные ссылки:

таблиц стилей CSS

---

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

Компания	Контакт	Страна
Альфред Футтеркисте	Мария Андерс	Германия
Berglunds snabbköp	Кристина Берглунд	Швеция
Торговый центр Moctezuma	Франциско Чанг	Мексика
Эрнст Гендель	Роланд Мендель	Австрия
Island Trading	Елена Беннетт	Великобритания
Königlich Essen	Филипп Крамер	Германия
винных яиц Bacchus	Йоши Таннамури	Канада
Magazzini Alimentari Riuniti	Джованни Ровелли	Италия

Попробуй сам »

---

Стол Границы

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

В приведенном ниже примере указывается черная граница для элементов

,, чтобы выделить строки мыши более

и	: Обратите внимание, что таблица в приведенном выше примере имеет двойные границы. Это потому что и таблица, и элементы	и	имеют разные границы. Свернуть границы стола Свойство border-collapse определяет, будут ли границы таблицы следует свернуть в одну границу: Пример стол { коллапс границы: коллапс; } стол, тыс, тд { граница: 1px сплошной черный; } Попробуй сам » Если вы хотите, чтобы только граница вокруг таблицы, укажите только border свойство для <таблица>: Ширина и высота стола Ширина и высота стола определяются свойствами ширина и высота . Пример ниже устанавливает ширину таблицы на 100% и высоту	элементов до 50px: Горизонтальное выравнивание Свойство text-align устанавливает горизонтальное выравнивание (как слева, справа или по центру) содержимого в	или	. По умолчанию содержимое элементов	выравнивается по центру, а содержимое элементов	выравнивается по левому краю. Следующий пример выравнивает по левому краю текст в элементах	: Выравнивание по вертикали Свойство вертикальное выравнивание устанавливает вертикальное выравнивание (например, верх, низ или середина) содержимого в	или	. По умолчанию вертикальное выравнивание содержимого в таблице является средним (для обоих	и	элементы). В следующем примере вертикальное выравнивание текста задается для элементов	снизу: Обивка стола Чтобы контролировать расстояние между границей и содержимым таблицы, используйте padding собственности на Элементы	и	: Горизонтальные разделители Имя Фамилия Экономия Питер Гриффин $ 100 лоис Гриффин $ 150 Джо Свонсон $ 300 Добавьте свойство border-bottom в	и	для горизонтальных разделителей: Hoverable Table Используйте селектор : hover на

Имя	Фамилия	Экономия
Питер	Гриффин	$ 100
лоис	Гриффин	$ 150
Джо	Свонсон	$ 300

---

Полосатые столы

Имя	Фамилия	Экономия
Питер	Гриффин	$ 100
лоис	Гриффин	$ 150
Джо	Свонсон	$ 300

Для таблиц с полосками зебры используйте селектор nth-child () и добавьте фонового цвета ко всем четным (или нечетным) строкам таблицы:

---

Цвет стола

Пример ниже определяет цвет фона и цвет текста элементов:

Имя	Фамилия	Экономия
Питер	Гриффин	$ 100
лоис	Гриффин	$ 150
Джо	Свонсон	$ 300

---

Отзывчивый Стол

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

Имя	Фамилия	Баллов	Баллов	Баллов	Баллов	Баллов	Баллов	Баллов	Баллов	Баллов	Баллов	Баллов	Баллов
Джилл	Смит	50	50	50	50	50	50	50	50	50	50	50	50
Ева	Джексон	94	94	94	94	94	94	94	94	94	94	94	94
Адам	Джонсон	67	67	67	67	67	67	67	67	67	67	67	67

Добавьте элемент контейнера (например,

) с overflow-x: auto вокруг элемента, чтобы сделать его отзывчивым:

Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлен параметр «overflow: scroll»).

---

Дополнительные примеры

Сделай нарядный стол
Этот пример демонстрирует, как создать необычную таблицу.

Установить положение заголовка таблицы
В этом примере показано, как расположить заголовок таблицы.

---

Проверьте себя с помощью упражнений!

---

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

.

Недвижимость	Описание
границы	Устанавливает все свойства границы в одном объявлении
обрушение границы	Указывает, следует ли свернуть границы таблицы.
интервал границы	Указывает расстояние между границами соседних ячеек
заголовок	Определяет размещение заголовка таблицы
пустых ячеек	Указывает, следует ли отображать границы и фон для пустых ячеек в таблице
сервировка стола	Устанавливает алгоритм раскладки для таблицы

,

37 CSS таблиц

22 мая 2020 г.

Коллекция бесплатных таблиц HTML и CSS. примеров кода: простых, отзывчивых, ценовых, периодических и т. Д. Обновление коллекции за апрель 2019 года. 5 новый предмет.

1. Столы
2. Периодические таблицы
3. Таблицы цен

1. Таблицы начальной загрузки

Автор

• Крис Смит
• 17 октября 2019

О коде

Зигзагообразный Стол

Таблица, отформатированная в зигзагообразной диагонали.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: да

Зависимости: —

Автор

• Estelle Weyl
• 11 июня 2018 года

О коде

Стол с застывшим заголовком стола и левой колонной

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: нет

Зависимости: —

Автор

• Натан Кокерилл
• 1 февраля 2018 года

Сделано с

• HTML
• CSS / SCSS
• JavaScript (JQuery.JS)

О коде

Сортировка строк таблицы по заголовкам таблицы

Сортировка строк таблицы по заголовкам таблицы — по возрастанию и по убыванию.

Автор

• Faiz Ahme
• 11 января 2018 года

О коде

адаптивных таблиц с использованием li

Я использовал li для создания таблиц, потому что стилизация li проще и позволяет больше настроек.

Автор

• Флор Антара
• 15 июня 2017 г.

О коде

Отзывчивый Таблица только HTML и CSS

HTML таблица сделана адаптивной только с CSS. На мобильном телефоне строка заголовка фиксируется слева, а содержимое прокручивается по горизонтали.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: да

Зависимости: —

Демонстрационное изображение: Отзывчивый стол с Flexbox Адаптивный стол

с Flexbox

Идея состояла в том, чтобы создать хороший рабочий стол, который будет работать и на небольших экранах.
Made by Matys
6 апреля 2017 г.

Демонстрационное изображение: адаптивный макет таблицы CSS

Адаптивный CSS макет таблицы

Использование CSS для адаптивных таблиц вместо плавающих. Отзывчивый (все сводится к одному ряду) тоже.
Made by Luke Peters
21 февраля 2017 г.

Демо-изображение: фиксированный заголовок таблицы

Фиксированный заголовок стола

Исправлен заголовок таблицы с простым кодом jQuery.
Made by Nikhil Krishnan
3 ноября 2016 г.

Демо-изображение: Отзывчивый стол

Отзывчивый стол

CSS трюки метод адаптивной таблицы.
Сделано Alico
11 апреля 2016 г.

Демо-изображение: Pure CSS Table Highlight

Pure CSS Highlight

Простой (и неприятный) трюк для выделения вертикальной и горизонтальной подсветки при наведении на столы, выполненные с использованием чистого CSS.
Сделано Александром Эрландссоном
22 марта 2016 г.

Автор

• Вольф Вортманн
• 30 апреля 2015 г.

О коде

Заголовки липкого стола по позиции : липкий;

Попытка создать красивую таблицу с липкими заголовками таблиц, если их таблица находится в области просмотра (например, имена имен в iOS начинаются с заглавной буквы).

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: нет

Зависимости: —

Демо-изображение: Отзывчивый стол

Отзывчивый стол

Отзывчивый стол с шаблонами RWD-таблиц.
Сделано в SitePoint
15 апреля 2015 г.

Демонстрационное изображение: Отзывчивая таблица CSS и подробный вид

Адаптивная таблица CSS и подробный вид

Пример таблицы и подробный вид сценария.
Made by Heather Buchel
29 июня 2014 г.

Демо-изображение: Отзывчивый стол

Отзывчивый стол

Стол сворачивается в «список» на маленьких экранах. Заголовки извлекаются из атрибутов данных.
Made by Geoff Yuen
25 марта 2014 г.

Автор

• Чарли Кэткарт
• 13 марта 2014 г.

О коде

Отзывчивая и доступная таблица данных

Первая в мире мобильная и доступная таблица данных.В более узких портах просмотра thead скрыт, строки превращаются в карточки с метками, показанными с использованием атрибута data- * .

Демо-изображение: таблица в HTML и CSS

Таблица в HTML и CSS

Таблица фактов питания в HTML и CSS.
Сделано Крисом Койером
9 сентября 2013 г.

Автор

• Рубен С. Гарсия
• 24 февраля 2019

О коде

Grid CSS Периодическая таблица

Периодическая таблица элементов с CSS Grid.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: нет

Зависимости: -

Автор

• Оливия Нг
• 21 ноября 2018 года

О коде

Сетка CSS: Периодическая таблица

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: нет

Зависимости: простые-линейные иконки.css

Автор

• Майк Голус
• 9 августа 2018 года

О коде

Периодическая таблица элементов

Адаптивная и анимированная периодическая таблица элементов в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: да

Зависимости: -

Автор

• Линдсей Гриззард
• 11 июня 2018 года

О коде

Периодическая таблица типа CSS Grid

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: нет

Зависимости: -

Автор

• Томми Ходгинс
• 16 февраля 2016 г.

О коде

Периодическая таблица

Периодическая таблица в HTML и JavaScript.

Автор

• Альма Мадсен
• 15 января 2014 г.

О коде

Периодическая таблица

Периодическая таблица HTML и CSS .

Автор

• франческо 9001
• 19 сентября 2019

О коде

Адаптируемая панель ценообразования

Tailwind

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: да

Зависимости: попутный ветер.css

Автор

• Арис Кукович
• 27 апреля 2019

О коде

Таблицы цен

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: да

Зависимости: -

Автор

• Florin Pop
• 25 февраля 2019

О коде

тарифных планов

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: да

Зависимости: -

Автор

• Пауло Рибейро
• 27 октября 2018 г.

О коде

Табличка ценообразования

Чистая таблица цен CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзывчивый: да

Зависимости: -

Автор

• Джамал Хассонуи
• 14 февраля 2018 г.

О коде

Таблица цен UI

Простая таблица цен.

Автор

• Chouaib Blgn
• 16 сентября 2017 г.

О коде

Ценовая таблица UI Design

Ценовая таблица с анимацией.

Автор

• Трэвис Уильямсон
• 15 августа 2017 г.

О коде

Табличка ценообразования

Таблица цен, сравнивающая 3 различных плана для мистической компьютерной компании.

Демонстрационное изображение: таблица цен HTML и CSS

Таблица цен HTML и CSS

Таблицы цен Bootstrap.
Сделано Сахар Али Раза
10 декабря 2016 г.

Демо-изображение: таблица адаптивных цен

Таблица адаптивных цен

Таблица адаптивных цен HTML / CSS.
Сделано Alex
31 июля 2016 г.

Демо GIF: таблица цен

Таблица цен

Ценовая таблица с HTML и CSS.
Сделано Матиасом Мартином
7 апреля 2016 г.

Демо-изображение: Таблицы цен материалов

Таблицы цен на материалы

Таблицы цен, адаптированные к материалам в HTML и CSS.
Сделано Kreso Galic
14 января 2016 г.

Демо-изображение: таблица цен

Ценовой стол

Таблицу цен с HTML и CSS.
Сделано Майком Торосяном
25 февраля 2015 г.

Демо-изображение: Отзывчивый флип-ценообразование

Отзывчивый флип ценовой таблицы

Адаптивный флип-ценообразование для просмотра цены за месяц или год.
Сделано Шейном Хейнсом
12 января 2015 г.

Демо-изображение: Таблицы цен

Таблицы цен

Простые таблицы цен.
Сделано Джозефом Виктори
15 февраля 2014 г.

Демо-изображение: таблица цен

Ценовой стол

Играя со столами.
Made by Daniel Riemer
13 сентября 2013 г.

,

Как создать красивые таблицы в CSS

/ **

* CSS СТИЛИ ДЛЯ ТАБЛИЦ

* /

table {

text-align: left;

ширина

: 100%;

Граница

: 0;

отступы: 0;

маржа: 0;

межстрочный интервал: 0;

Семейство шрифтов

: Arial, "Helvetica Neue", Helvetica, без засечек;

}

/ *

Это заголовки таблицы, иначе первая строка в нашей таблице

изменится на «table tr: first-child tr», если у вас нет заголовков таблицы

* /

таблица tr: первый ребенок th {

фон: #ffffff;

фон: URL (данные: изображения / SVG + XML; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ + CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc +);

фон: -moz-linear-Gradient (сверху, #ffffff 0%, # f6f6f6 30%, # f6f6f6 30%, # e5e5e5 100%);

фон: -webkit-градиент (линейный, левый верхний, левый нижний, остановка цвета (0%, # ffffff), остановка цвета (30%, # f6f6f6), остановка цвета (30%, # f6f6f6), цвет-стоп (100%, # e5e5e5));

фон: -webkit-linear-Gradient (сверху, #ffffff 0%, # f6f6f6 30%, # f6f6f6 30%, # e5e5e5 100%);

фон: -o-линейный градиент (top, #ffffff 0%, # f6f6f6 30%, # f6f6f6 30%, # e5e5e5 100%);

фон: -ms-линейный градиент (top, #ffffff 0%, # f6f6f6 30%, # f6f6f6 30%, # e5e5e5 100%);

фон: линейный градиент (снизу: #ffffff 0%, # f6f6f6 30%, # f6f6f6 30%, # e5e5e5 100%);

Фильтр

: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# e5e5e5', GradientType = 0);

отступы: 8px 10px;

цвет: # 000;

border-top: 1px solid #cecece;

граница снизу: 1px solid # E6E6E6;

}

/ * каждая ячейка в таблице * /

таблица tr td {

цвет фона: # F2F2F2;

отступы: 5px 10px;

}

/ * добавляет край и радиус границы к верхним крайним левым ячейкам * /

таблица tr: первый-дочерний th: первый-дочерний {

border-left: 1px solid #cecece;

border-top-left-radius: 5px;

}

/ * добавляет край и радиус границы к верхним крайним правым ячейкам * /

таблица tr: первый-дочерний th: последний-дочерний {

border-right: 1px solid #cecece;

border-top-right-radius: 5px;

}

/ * добавляет левую границу ко всем крайним левым ячейкам * /

таблица tr td: first-child {

border-left: 1px solid #cecece;

}

/ * добавляет правую границу ко всем крайним правым ячейкам * /

таблица tr td: last-child {

border-right: 1px solid #cecece;

}

/ * Добавить нижнюю границу ко всем ячейкам в последней строке * /

таблица tr: last-child td {

border-bottom: 1px solid #cecece;

}

/ * добавляет радиус границы в нижнюю левую ячейку * /

таблица tr: последний-ребенок td: first-child {

border-bottom-left-radius: 5px;

}

/ * добавляет радиус границы в нижнюю правую ячейку * /

таблица tr: last-child td: last-child {

border-bottom-right-radius: 5px;

}

.

CSS Styling Lists

---

заказанные списки:

1. Кофе
2. Чай
3. Coca Cola

1. Кофе
2. Чай
3. Coca Cola

---

Списки HTML и Свойства Списка CSS

В HTML есть два основных типа списков:

• неупорядоченных списков (
  ) - элементы списка помечены маркерами
  • упорядоченных списков (
    ) - элементы списка помечены цифрами или буквами

  Свойства списка CSS позволяют:

  • Установить разные маркеры элементов списка для упорядоченных списков
  • Установить разные маркеры элементов списка для неупорядоченных списков
  • Установить изображение в качестве маркера элемента списка
  • Добавление цветов фона к спискам и элементам списка

  ---

  Различные маркеры списка предметов

  Свойство list-style-type определяет тип элемента списка маркер.

  В следующем примере показаны некоторые доступные маркеры элементов списка:

  Пример

  ul.a {
  list-style-type: circle;
  }

  ul.b {
  тип стиля списка: квадратный;
  }

  ol.c {
  тип стиля списка: верхнеримский;
  }

  ol.d {
  тип стиля списка: низшая альфа;
  }

  Попробуй сам "

  Примечание. Некоторые значения предназначены для неупорядоченных списков, а некоторые - для упорядоченных списков.

  ---

  ---

  Изображение как маркер элемента списка

  Свойство list-style-image определяет изображение в качестве списка Маркер товара:

  ---

  Позиционирование маркеров позиций списка

  Свойство list-style-position определяет положение маркеров элемента списка (отверстия от пуль).

  "list-style-position: outside;" означает, что точки пули будут снаружи элемент списка. Начало каждой строки элемента списка будет выровнено по вертикали. Это по умолчанию:

  • Кофе - Сваренный напиток из жареных кофейных зерен ...
  • Чай
  • кока-кола

  "list-style-position: inside;" означает, что точки пули будут внутри элемент списка. Так как он является частью элемента списка, он будет частью текста и нажмите текст в начале:

  • Кофе - Заваренный напиток, приготовленный из жареных кофейных зерен...
  • Чай
  • кока-кола

  Пример

  ul.a {
  list-style-position: outside;
  }

  ul.b {
  list-style-position: inside;
  }

  Попробуй сам "

  ---

  Удалить настройки по умолчанию

  Тип списка : отсутствует свойство используется для удаления маркеров / пуль. Обратите внимание, что список также имеет поле по умолчанию и обивка. Чтобы удалить это, добавьте поля: 0 и отступы : 0 к

  или
  :

  ---

  Список - Сокращенное свойство

  Свойство в стиле списка является сокращенным.Он используется для установки всех список свойств в одной декларации:

  При использовании сокращенного свойства, порядок значений свойства:

  • тип стиля списка (если указан стиль списка, значение этого свойства будет отображаться, если изображение по какой-либо причине не может быть отображено)
  • list-style-position (указывает, должны ли маркеры элементов списка появляться внутри или вне потока контента)
  • list-style-image (указывает изображение в качестве элемента списка маркер)

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

  ---

  Список стилей с цветами

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

  Все, что добавляется в тег

  или
  , влияет на весь список, а Свойства, добавленные в тег
  • , влияют на отдельные элементы списка:

    Пример

    ol {
    background: # ff9999;
    отступы: 20 пикселей;
    }

    ul {
    фон: # 3399ff;
    отступы: 20 пикселей;
    }

    ол {
    фон: # ffe5e5;
    отступов: 5 пикселей;
    поле слева: 35 пикселей;
    }

    ul li {
    Справочная информация: # Cce5ff; Маржа
    : 5px;
    }

    Результат:

    Попробуй сам "

    ---

    Дополнительные примеры

    Индивидуальный список с красной левой границей
    Этот пример демонстрирует, как создать список с красной левой границей.

    Полноразмерный список
    Этот пример демонстрирует, как создать ограниченный список без маркеров.

    Все различные маркеры элементов списка для списков
    Этот пример демонстрирует все различные маркеры элементов списка в CSS.

    ---

    Проверь себя упражнениями!

    ---

    Все свойства списка CSS

    
    ,