Красивая табличка – Красивое оформление таблиц

Содержание

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

.simple-little-table {

font-family:Arial, Helvetica, sans-serif;

color:#666;

font-size:12px;

text-shadow: 1px 1px 0px #fff;

background:#eaebec;

margin:20px;

border:#ccc 1px solid;

border-collapse:separate;

 

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

 

-moz-box-shadow: 0 1px 2px #d1d1d1;

-webkit-box-shadow: 0 1px 2px #d1d1d1;

box-shadow: 0 1px 2px #d1d1d1;

}

 

.simple-little-table th {

font-weight:bold;

padding:21px 25px 22px 25px;

border-top:1px solid #fafafa;

border-bottom:1px solid #e0e0e0;

 

background: #ededed;

background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));

background: -moz-linear-gradient(top,  #ededed,  #ebebeb);

}

.simple-little-table th:first-child{

text-align: left;

padding-left:20px;

}

.simple-little-table tr:first-child th:first-child{

-moz-border-radius-topleft:3px;

-webkit-border-top-left-radius:3px;

border-top-left-radius:3px;

}

.simple-little-table tr:first-child th:last-child{

-moz-border-radius-topright:3px;

-webkit-border-top-right-radius:3px;

border-top-right-radius:3px;

}

.simple-little-table tr{

text-align: center;

padding-left:20px;

}

.simple-little-table tr td:first-child{

text-align: left;

padding-left:20px;

border-left: 0;

}

.simple-little-table tr td {

padding:18px;

border-top: 1px solid #ffffff;

border-bottom:1px solid #e0e0e0;

border-left: 1px solid #e0e0e0;

 

background: #fafafa;

background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));

background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);

}

.simple-little-table tr:nth-child(even) td{

background: #f6f6f6;

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));

background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);

}

.simple-little-table tr:last-child td{

border-bottom:0;

}

.simple-little-table tr:last-child td:first-child{

-moz-border-radius-bottomleft:3px;

-webkit-border-bottom-left-radius:3px;

border-bottom-left-radius:3px;

}

.simple-little-table tr:last-child td:last-child{

-moz-border-radius-bottomright:3px;

-webkit-border-bottom-right-radius:3px;

border-bottom-right-radius:3px;

}

.simple-little-table tr:hover td{

background: #f2f2f2;

background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));

background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);

}

 

.simple-little-table a:link {

color: #666;

font-weight: bold;

text-decoration:none;

}

.simple-little-table a:visited {

color: #999999;

font-weight:bold;

text-decoration:none;

}

.simple-little-table a:active,

.simple-little-table a:hover {

color: #bd5a35;

text-decoration:underline;

}

blog.harrix.org

Красивые таблицы на 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 голос(ов)

Чтобы получать свежие статьи — выберите любой удобный для вас мессенджер ниже — просто кликните по нему:

www.sitehere.ru

Создание таблицы в HTML — красивые примеры

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

Раньше HTML таблицы использовались для вёрстки сайтов. Она так и называлась – табличная вёрстка. Потом на смену ей пришла вёрстка дивами (при помощи тегов div ) которая оказалась намного удобнее и проще. А сейчас наступает эра вёрстки сайтов по технологии flexbox, которая призвана еще больше упростить жизнь web-мастерам.

Однако, несмотря на всё выше сказанное, таблицы в html по-прежнему современны, актуальны и вовсю используются на сайтах. Правда уже не как структура, а как элемент статей сайта.

Создание таблиц в html примеры

Перед началом обучения создания таблицы в HTML, что бы мои и ваши таблицы смотрелись одинаково — сделайте 3 простые вещи:

  1. Создайте файл index.html
  2. Откройте его в браузере
  3. Добавьте туда следующий код:
<style>
  table{
    margin: 50px 0;
    text-align: left;
    border-collapse: separate;
    border: 1px solid #ddd;
    border-spacing: 10px;
    border-radius: 3px;
    background: #fdfdfd;
    font-size: 14px;
    width: auto;
  }
  td,th{
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 3px;
  }
  th{
    background: #E4E4E4;
  }
  caption{
    font-style: italic;
    text-align: right;
    color: #547901;
  }
</style>

Создание простой HTML таблички

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

<table></table>

Но использование одного этого тега мало, ведь таблицу ещё надо наполнить. И там тоже есть свои правила, которые надо неукоснительно соблюдать.

Как вы знаете, в каждой таблице есть свои строки и колонки, которые на пересечении формируют ячейки. Однако в HTML – таблицы строятся немного по другому принципу. Изначально мы задаём им строки, а внутри строк задаём ячейки. И именно от количества ячеек в строке и будет завесить количество столбцов. Давайте попробуем сделать таблицу в html в блокноте.

Создание строк и ячеек

Строки задаются при помощи тегов tr. И внутри строк мы задаём ячейки тегами td. А сейчас мы по-быстрому забабахаем простую таблицу, с одной строкой и четырьмя ячейками. Вот её код:

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

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

Ячейка 1Ячейка 2Ячейка 3Ячейка 4

А сейчас я предлагаю немного её усложнить, и добавить ещё три строки!

<table>
  <tr>
    <td>Строка1 Ячейка1</td>
    <td>Строка1 Ячейка2</td>
    <td>Строка1 Ячейка3</td>
    <td>Строка1 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка2 Ячейка1</td>
    <td>Строка2 Ячейка2</td>
    <td>Строка2 Ячейка3</td>
    <td>Строка2 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка3 Ячейка1</td>
    <td>Строка3 Ячейка2</td>
    <td>Строка3 Ячейка3</td>
    <td>Строка3 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка1</td>
    <td>Строка4 Ячейка2</td>
    <td>Строка4 Ячейка3</td>
    <td>Строка4 Ячейка4</td>
  </tr>
</table>

Выглядеть она у нас будет вот так:

Строка1 Ячейка1Строка1 Ячейка2Строка1 Ячейка3Строка1 Ячейка4
Строка2 Ячейка1Строка2 Ячейка2Строка2 Ячейка3Строка2 Ячейка4
Строка3 Ячейка1Строка3 Ячейка2Строка3 Ячейка3Строка3 Ячейка4
Строка4 Ячейка1Строка4 Ячейка2Строка4 Ячейка3Строка4 Ячейка4

Кода получилось довольно много, однако оно того стоило! Думаю, теперь вам ясно, как работает создание таблиц в HTML. Однако это далеко не всё, мы ещё с вами только начали и дальше нас ждёт еще много интересного

Название таблицы — тег caption

Давайте мы немного модернизируем табличку и добавим ей небольшое название. Это делается при помощи тега caption. Этот тег надо размещать самым первым, сразу после открывающего тега table. Вот как это выглядит в коде:

<table>
  <caption>Пример таблицы с названием</caption>
  <tr>
    <td>Строка1 Ячейка1</td>
    <td>Строка1 Ячейка2</td>
    <td>Строка1 Ячейка3</td>
    <td>Строка1 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка2 Ячейка1</td>
    <td>Строка2 Ячейка2</td>
    <td>Строка2 Ячейка3</td>
    <td>Строка2 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка3 Ячейка1</td>
    <td>Строка3 Ячейка2</td>
    <td>Строка3 Ячейка3</td>
    <td>Строка3 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка1</td>
    <td>Строка4 Ячейка2</td>
    <td>Строка4 Ячейка3</td>
    <td>Строка4 Ячейка4</td>
  </tr>
</table>

А вот, что у нас получится в итоге:

Пример таблицы с названием
Строка1 Ячейка1Строка1 Ячейка2Строка1 Ячейка3Строка1 Ячейка4
Строка2 Ячейка1Строка2 Ячейка2Строка2 Ячейка3Строка2 Ячейка4
Строка3 Ячейка1Строка3 Ячейка2Строка3 Ячейка3Строка3 Ячейка4
Строка4 Ячейка1Строка4 Ячейка2Строка4 Ячейка3Строка4 Ячейка4

Как видите, несмотря на то, что мы разместили тег caption внутри таблицы. Он располагается над ней.

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

Видео 1: HTML таблицы – тег table

Управление ячейками таблицы

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

  1. Вывести заголовочную строку
  2. Объединить некоторые ячейки по вертикали
  3. А другие объединить по горизонтали

Вот этим мы и займёмся. И начнем мы, пожалуй, с…

Ячейки-заголовки в таблице

Конечно, мы могли бы всунуть внутрь ячеек первой строки какие-нибудь заголовки, или оформить их жирными через стили. Однако это будет неправильно!

Так как специально для этих целей был создан тег th, который задается вместо обычных ячеек (тег td). И указывает на то, что это ячейки-заголовки, которые используются для названия столбцов.

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

Давайте в таблице из прошлого примера в первой строке заменим теги td на th . А также чуточку изменим их содержимое:

<table>
  <caption>Таблица с тегом th</caption>
  <tr>
    <th>Столбец 1</th>
    <th>Столбец 2</th>
    <th>Столбец 3</th>
    <th>Столбец 4</th>
  </tr>
  <tr>
    <td>Строка2 Ячейка1</td>
    <td>Строка2 Ячейка2</td>
    <td>Строка2 Ячейка3</td>
    <td>Строка2 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка3 Ячейка1</td>
    <td>Строка3 Ячейка2</td>
    <td>Строка3 Ячейка3</td>
    <td>Строка3 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка1</td>
    <td>Строка4 Ячейка2</td>
    <td>Строка4 Ячейка3</td>
    <td>Строка4 Ячейка4</td>
  </tr>
</table>

А вот и результат кода выше, выполненный в браузере:

Таблица с тегом th
Столбец 1Столбец 2Столбец 3Столбец 4
Строка2 Ячейка1Строка2 Ячейка2Строка2 Ячейка3Строка2 Ячейка4
Строка3 Ячейка1Строка3 Ячейка2Строка3 Ячейка3Строка3 Ячейка4
Строка4 Ячейка1Строка4 Ячейка2Строка4 Ячейка3Строка4 Ячейка4

Как видите, текст в этих ячейках автоматически делается жирным.

Объединение ячеек по горизонтали и вертикали

Ребята, прежде, чем начать объяснять, хочу оговориться – если информация по объединению ячеек будет для Вас слегка запутанной. А с непривычки это именно так, уж поверьте мне. Ниже есть видео, где я показываю и объясняю всё в живом режиме и на практике.

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

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

  1. Атрибут colspan – указывает сколько надо объединить ячеек по столбцам (горизонталь), начиная с текущей
  2. Атрибут rowspan – указывает сколько надо объединить ячеек по стокам (вертикаль) начиная с текущей

Эти атрибуты должны иметь целое число, начиная с 1 и более.

Помните! Если Вы объединяете ячейку с другими ячейками таблицы, она их замещает собой и растягивается. А это значит, что ячейки, которые замещены – надо удалить из HTML кода.

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

Давайте попробуем в нашей таблице объединить 2 ячейки:

  1. Ячейку 1 в строке 2 объединим по столбцам (горизонталь) с ячейками 2 и 3 в той же строке. Для этого мы зададим ей атрибут rowspan=“3”
  2. Ячейку 4 в строке 2 объединим по строкам (вертикаль) с ячейками 4 в строках 3 и 4. Для этого мы зададим ей атрибут colspan=“3”

И теперь, для правильного отображения таблицы, нам необходимо удалить из кода ячейки, которые были добавлены при объединении. То есть для первого примера мы удаляем из кода ячейки 2 и 3 в строке 2. А для второго – удаляем ячейку 4 в строке 3 и ячейку 4 в строке 4.

В итоге у нас получится вот такой код:

<table>
  <caption>Объединение ячеек таблицы</caption>
  <tr>
    <th>Столбец 1</th>
    <th>Столбец 2</th>
    <th>Столбец 3</th>
    <th>Столбец 4</th>
  </tr>
  <tr>
    <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
    <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
  </tr>
  <tr>
    <td>Строка3 Ячейка1</td>
    <td>Строка3 Ячейка2</td>
    <td>Строка3 Ячейка3</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка1</td>
    <td>Строка4 Ячейка2</td>
    <td>Строка4 Ячейка3</td>
  </tr>
</table>

А на деле, наша таблица будет выглядеть следующим образом:

Объединение ячеек таблицы
Столбец 1Столбец 2Столбец 3Столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1Строка3 Ячейка2Строка3 Ячейка3
Строка4 Ячейка1Строка4 Ячейка2Строка4 Ячейка3

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

Видео 2: HTML таблицы — ячейки и управление ими

Объединение ячеек сразу по 2-ум направлениям

Так же мы можем объединять ячейки не только по какой-либо одной стороне. Но и сразу по двум! Что мы сейчас и проделаем с нашей таблицей.

Давайте объединим ячейку 1 строки 3:

  1. С ячейкой 2 строки 3
  2. С ячейкой 1 строки 4
  3. С ячейкой 2 строки 4

Для этого мы пропишем ячейке 1 строки 3 следующие 2 атрибута:

  1. colspan=“2”
  2. rowspan=“2”

Помним, что объединённые ячейки замещаются, поэтому ячейки из списка выше, нам надо будет удалить из кода. В итоге вот такой код будет у нашей таблички:

<table>
  <caption>Объединение ячеек по 2-ум направлениям</caption>
  <tr>
    <th>Столбец 1</th>
    <th>Столбец 2</th>
    <th>Столбец 3</th>
    <th>Столбец 4</th>
  </tr>
  <tr>
    <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
    <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
    <td>Строка3 Ячейка3</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка3</td>
  </tr>
</table>

А вот так, будет выглядеть наша таблица сейчас:

Объединение ячеек по 2-ум направлениям
Столбец 1Столбец 2Столбец 3Столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)Строка3 Ячейка3
Строка4 Ячейка3

Шапка, тело и подвал HTML таблицы.

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

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

Тег thead — шапка HTML таблицы

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

Фишки тега thead:

  1. Он должен встречаться только один раз на одну таблицу!
  2. Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в начале таблицы.

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

<table>
  <caption>Тег thead в таблице</caption>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tr>
    <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
    <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
    <td>Строка3 Ячейка3</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка3</td>
  </tr>
</table>

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

Тег tfoot – подвал HTML таблицы

Хоть это и подвальчик, но помните, что этот тег рекомендуется размещать сразу после тега thead .

Фишки тега tfoot:

  1. Он должен встречаться только один раз на одну таблицу!
  2. Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в конце таблицы.

Давайте мы заведём ещё одну строку в таблице, и завернём её с ячейками сразу в тег tfoot :

<table>
  <caption>Тег tfoot в таблице</caption>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tr>
    <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
    <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
    <td>Строка3 Ячейка3</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка3</td>
  </tr>
</table>

А вот и наша табличка:

Тег tfoot в таблице
Столбец 1Столбец 2Столбец 3Столбец 4
Подвал столбец 1Подвал столбец 2Подвал столбец 3Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)Строка3 Ячейка3
Строка4 Ячейка3

Посмотрите внимательно, несмотря на то, что мы разместили тег tfoot в середине таблицы, его содержимое выводится в её конце!

Тег tbody – тело таблицы.

В отличии от первых двух – этот тег может встречать в таблице сколько угодно раз. Фишек у него никаких нет. Он просто семантически указывает для поисковых роботов, что в нём идёт контент таблицы.

Вот такой код получится в итоге:

<table>
  <caption>Тег tbody в таблице</caption>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
      <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
      <td>Строка3 Ячейка3</td>
    </tr>
    <tr>
      <td>Строка4 Ячейка3</td>
    </tr>
  </tbody>
</table>

Внешне, наша таблица никак не изменилась! Поэтому и приводить её я здесь не буду.

И как обычно, для закрепления материала на практике, советую Вам глянуть видео №3.

Видео 3. HTML таблицы – шапка, тело и подвал

Кроме разбора на практике самих тегов, в этом видео, дополнительно, вы увидите, как оформить шапку, контент и подвал таблицы при помощи стилей.

Управление колонками в HTML таблицах

Осталось совсем немного ребята. Уже очень скоро таблицы полностью покоряться ваши рукам, головам, ногам или что там у вас ещё имеется в арсенале?

Мы рассмотрим ещё 2 тега, которые позволяют управлять колонками в таблицах.

Тег col

Этот тег позволяет задать определённые стили и атрибуты для определённой колонки. Задаётся он сразу после тега caption . И количество этих тегов может быть столько, сколько и колонок в таблице. То есть каждый последующий тег col отвечает за следующую колонку.

Что бы понять, как это всё работает, давайте первым двум колонкам — зададим ширину в 100 пикселей, третьей 150, а четвертой 200 пикселей. Для этого мы заведём 4 тега col , и каждому из них пропишем свой атрибут style с определённым значением ширины:

<table>
  <caption>Тег col в таблице</caption>
  <col>
  <col>
  <col>
  <col>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
      <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
      <td>Строка3 Ячейка3</td>
    </tr>
    <tr>
      <td>Строка4 Ячейка3</td>
    </tr>
  </tbody>
</table>

В итоге наша таблица выглядит уже так (обратите внимание на ширину каждой колонки):

Тег col в таблице
Столбец 1Столбец 2Столбец 3Столбец 4
Подвал столбец 1Подвал столбец 2Подвал столбец 3Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)Строка3 Ячейка3
Строка4 Ячейка3

Тег col можно сократить, если у него одинаковые параметры при помощи атрибута span . В нашем случае, у нас заданы одинаковые параметры для первой и второй колонки. Давайте сократим эти теги и допишем атрибут, вот такой код выйдет:

<table>
  <caption>Тег col в таблице</caption>
  <col span="2">
  <col>
  <col>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
      <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
      <td>Строка3 Ячейка3</td>
    </tr>
    <tr>
      <td>Строка4 Ячейка3</td>
    </tr>
  </tbody>
</table>

Таблицу приводить в пример не буду, так как она совершенно не поменялась.

Тег colgroup

Этот тег используется для объединения колонок по группам. Что бы понять, как он работает, давайте мы первые 3 колонки объединим в этот тег и зададим им какой-нибудь общий стиль. Например, сделаем заливку ячеек другим цветом.

Вот какой код ввёл я:

<table>
  <caption>Тег colgroup в таблице</caption>
  <colgroup>
    <col span="2">
    <col>
  </colgroup>
  <col>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
      <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
      <td>Строка3 Ячейка3</td>
    </tr>
    <tr>
      <td>Строка4 Ячейка3</td>
    </tr>
  </tbody>
</table>

В результате ячейки первых 3-ёх колонок окрасились в указанный нами цвет:

Тег colgroup в таблице
Столбец 1Столбец 2Столбец 3Столбец 4
Подвал столбец 1Подвал столбец 2Подвал столбец 3Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)Строка3 Ячейка3
Строка4 Ячейка3

Для закрепления материала рекомендую посмотреть последнее видео из этой серии под номером 4.

Видео 4. HTML таблицы – управление колонками

Как видите, ничего сложного в том, чтобы создать сложную функциональную таблицу нет. Главное знать теги и применять их в правильном назначении. Всё остальное – дело техники

На этом всё, мои дорогие друзья. Если будут вопросы касательно создания HTML таблиц – задавайте их в комментариях.

master-css.com

«Распечатать и повесить на работе!» (прикольные таблички)

 

 

 

 

 

 

Сылка для копирования на другие сайты

http://umor37.mirtesen.ru/blog/43112779408/%22Raspechatat-i-povesit-na-rabote!%22-(prikolnyie-tablichki)

Понравился наш сайт? Присоединяйтесь или подпишитесь (на почту будут приходить уведомления о новых темах) на наш канал в МирТесен!

umor37.mirtesen.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>

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

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

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

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

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

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

Самые красивые и креативные вывески

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

26 ФОТО

Материал подготовлен при поддержке сайта rk-radiance.ru, где можно заказать потрясающие интерьерные вывески по доступной цене.

1. Дом красоты Дэвида А. Смитта.

 

2. Вывеска студии Beam & Anchor.

 

3. Вывеска в кафе Drop Coffee.

 

4. Вывеска гриль-бара Iron Grill.

 

5. Вывеска ресторана Mama G’s.

 

6. Вывеска ресторана и бара Second Home.

 

7. Магазин женской одежды в Саскатуне, Канада – twofiftytwo.

 

8. Трехмерный знак выхода.

 

9. Вывеска пятизвездочного отеля The Darling в Сиднее.

 

10. Оригинальная вывеска-фонарь.

 

11. Вывеска обувного магазина Vans в Лондоне.

 

12. Вывеска кафе States Coffee & Mercantile в США.

 

13. Вывеска магазина мужской одежды в Москве Costume Code.

 

14. Вывеска Society Tower от дизайн-студии Pentagram.

 

15. New York, New York.

 

16. Вывеска Нью-Йоркского Музеум оф Гласс от дизайнера Лео Порто.

 

17. Вывеска бара The Phoenix Bar от дизайнера Ника Райли.

 

18. Вывеска Duck Building от дизайн-студии podolux.

 

19. Вывеска известного ночного клуба The Hoxton Pony в Лондоне.

 

20. Вывеска бельгийского кафе-мороженного oyya от дизайн-студии skinn.

 

21. Вывеска американского ресторана-пивоварни Edmund’s Oast от дизайн-компании Stitch Design Co.

 

22. Вывеска кафе The Kettle Black в Мельбурне, Австралия, от дизайн-студии You Me.

 

23. Вывеска кафе в виде выложенного плиткой коврика на входе.

 

24. Вывеска University House.

 

25. Вывеска ресторана итальянской кухни в Нью-Йорке Scarpetta от студии I AM.

 

26. Вывеска кафе уличной еды O’PETIT EN’K от дизайн-студии Hekla.

fullpicture.ru

Красивая стилизация таблицы на CSS – Di-Grand

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

}

di-grand.com