Главная
»
Уроки
»
Красивое оформление таблиц

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

Опубликовано: 29 января 2015 Обновлено: 30 апреля 2019 61 комментарий

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

Перейти на страницу с примерами

Содержание:
1. Таблица с раздельными строками
2. Цветная таблица
3. Таблица с закругленными углами
4. Таблица с раздельными ячейками
5. Таблица-календарь
6. Таблица-жалюзи
7. Таблица-зебра
8. Таблица-меню
9. Таблица с акцентом на первый столбец
10. Таблица с эффектом размытия строк при наведении
11. Таблица-прайс
12. Таблица с темным фоном и с подчеркиванием текста при наведении

1. Таблица с раздельными строками

Таблицы с промежутками между строк помогают сконцентрироваться на связанной информации, расположенной в этой же строке таблицы, но в соседних ячейках. Для того, чтобы отделить текст от картинки, помещаем его в другую ячейку, объединив при этом две ячейки в заголовке таблицы (<th colspan="2">Модель</th>), а правую границу между ячейками убираем.

table-css-1

<table>
<tr>
  <th colspan="2">Модель</th>
  <th>Цена</th>
  <th>Количество</th>
  <th>Итого</th>
</tr>
<tr>
  <td><img src="https://html5book.ru/wp-content/uploads/2015/04/dress-2.png"></td>
  <td>Платье с цветочным принтом</td>
  <td>2500</td>
  <td>1</td>
  <td>2500</td>
</tr>
<tr>
  <td><img src="https://html5book.ru/wp-content/uploads/2015/04/dress-3.png"></td>
  <td>Платье с боковыми вставками</td>
  <td>3000</td>
  <td>1</td>
  <td>3000</td>
</tr>
</table>

table {
border-spacing: 0 10px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
th {
padding: 10px 20px;
background: #56433D;
color: #F9C941;
border-right: 2px solid; 
font-size: 0.9em;
}
th:first-child {
text-align: left;
}
th:last-child {
border-right: none;
}
td {
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
}
td:first-child {
border-left: 2px solid #56433D;
border-right: none;
}
td:nth-child(2){
text-align: left;
}

2. Цветная таблица

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

table-css-2

<table>
<tr>
  <th>Company</th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
  <th>Q4</th>
  </tr>
 <tr>
  <td>Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td>23.5</td>
  <td>40.3</td>
 </tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
  <td>39.3</td>
</tr>
<tr>
  <td>Apple</td>
  <td>25.4</td>
  <td>30.2</td>
  <td>33.3</td>
  <td>36.7</td>
</tr>
<tr>
  <td>IBM</td>
  <td>20.4</td>
  <td>15.6</td>
  <td>22.3</td>
  <td>29.3</td>
</tr>
</table>

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
th:first-child, td:first-child {
text-align: left;
}

3. Таблица с закругленными углами

Благодаря добавлению в спецификацию CSS3 свойства border-radius, появилась возможность закругления углов таблицы без использования фоновых изображений. Чтобы добиться такого эффекта, нужно закруглить углы соответствующих ячеек.

table-css-3

Разметка HTML аналогично с примером 2.

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
}
th {
background: #BCEBDD;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
th:first-child, td:first-child {
text-align: left;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
border-right: none;
}
td {
padding: 10px 20px;
background: #F8E391;
}
tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
tr td:last-child {
border-right: none;
}

4. Таблица с раздельными ячейками

table-css-4

Разметка HTML аналогично с примером 2.

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
}
th {
font-size: 18px;
padding: 10px;
}
td {
background: #F5D7BF;
padding: 10px;
}

5. Таблица-календарь

table-css-5

<table>
<tr><th colspan="5">My working weeks, March 2015</th></tr>
 <tr>
  <td>Monday</td>
  <td>Tuesday</td>
  <td>Wednesday</td>
  <td>Thursday</td>
  <td>Friday</td>
 </tr>
<tr>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
</tr>
<tr>
  <td>16</td>
  <td>17</td>
  <td>18</td>
  <td>19</td>
  <td>20</td>
</tr>
  <tr>
  <td>23</td>
  <td>24</td>
  <td>25</td>
  <td>26</td>
  <td>27</td>
</tr>
  <tr>
  <td>30</td>
  <td>31</td>
  <td colspan="3"></td>
</tr>
 </table>

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: center;
border-collapse: collapse;
border-spacing: 5px;
background: #E1E3E0;
border-radius: 20px;
}
th {
font-size: 22px;
font-weight: 300;
padding: 12px 10px;
border-bottom: 2px solid #F56433;
color: #F56433;
}
tbody tr:nth-child(2) {
border-bottom: 2px solid #F56433;
}
td {
padding: 10px;
color: #8D8173;
}

6. Таблица-жалюзи

table-css-6

<table>
<tr>
<th>Employee</th>
<th>Salary</th>
<th>Bonus</th>
<th>Supervisor</th>
</tr>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</table>

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
text-align: left;
border-collapse: collapse;
border-radius: 20px;
box-shadow: 0 0 0 10px #F2906B;
color: #452F21;
}
th {
padding: 10px 8px;
background: white;
}
table th:first-child {
border-top-left-radius: 20px;
}
table th:last-child {
border-top-right-radius: 20px;
}
td {
border-top: 10px solid #F2906B;
padding: 8px;
background: white;
}
table td:first-child {
border-bottom-left-radius: 20px;
}
table td:last-child {
border-bottom-right-radius: 20px;
}

7. Таблица-зебра

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

table-css-7

<table class="zebra">
<tr>
  <th></th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
  <th>Q4</th>
  </tr>
 <tr>
  <td class="round-top">Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td>23.5</td>
  <td>40.3</td>
 </tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
  <td>39.3</td>
</tr>
<tr>
  <td>Apple</td>
  <td>25.4</td>
  <td>30.2</td>
  <td>33.3</td>
  <td>36.7</td>
</tr>
<tr>
  <td class="round-bottom">IBM</td>
  <td>20.4</td>
  <td>15.6</td>
  <td>22.3</td>
  <td>29.3</td>
</tr>
</table>

table {
border-spacing: 0;
empty-cells: hide;
}
td {
padding: 10px 20px;
text-align: center;
border-bottom: 1px solid #F4EEE8;
transition: all 0.5s linear;
}
td:first-child {
text-align: left;
color: #3D3511;
font-weight: bold;
}
th {
padding: 10px 20px;
color: #3D3511;
border-bottom: 1px solid #F4EEE8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td:nth-child(even) {
background: #F6D27E;
}
td:nth-child(odd) {
background: #D1C7BF;
}
th:nth-child(even)  {
background: #F6D27E;
}
th:nth-child(odd)  {
background: #D1C7BF;
}
.round-top {
border-top-left-radius: 5px;
}
.round-bottom {
border-bottom-left-radius: 5px;
}
tr:hover td{
background: #D1C7BF;
font-weight: bold;
}

8. Таблица-меню

table-css-8

<table>
  <caption>
    Холодные закуски
  </caption>
  <tr>
    <th>Наименование</th>
    <th>Выход, гр.</th>
    <th>Цена, руб.</th>
  </tr>
  <tr>
    <td>Ассорти из овощей, зелени и сыра</td><td>250</td>
    <td>190</td>
  </tr>
  <tr>
    <td>Ассорти мясное</td>
    <td>250</td>
    <td>300</td>
  </tr>
  <tr>
    <td>Ассорти рыбное (семга с/с, форель с/с)</td>
    <td>250</td>
    <td>350</td>
  </tr>
  <tr>
    <td>Ассорти грибное</td>
    <td>120</td>
    <td>150</td>
  </tr>
  <tr>
    <td>Соления из бочки (помидоры, огурцы, перец, чеснок, капуста)</td>
    <td>250</td>
    <td>180</td>
  </tr>
</table>

table {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  border-collapse: collapse;
  color: #686461;
}
caption {
  padding: 10px;
  color: white;
  background: #8FD4C1;
  font-size: 18px;
  text-align: left;
  font-weight: bold;
}
th {
  border-bottom: 3px solid #B9B29F;
  padding: 10px;
  text-align: left;
}
td {
  padding: 10px;
}
tr:nth-child(odd) {
  background: white;
}
tr:nth-child(even) {
  background: #E8E6D1;
}

9. Таблица с акцентом на первый столбец

table_col

<table class="table_col">
  <colgroup>
      <col style="background:#C7DAF0;">
  </colgroup>
  <tr>
    <th>Comedy</th>
    <th>Adventure</th>
    <th>Action</th>
    <th>Children</th>
    </tr>
  <tr>
    <td>Scary Movie</td>
    <td>Indiana Jones</td>
    <td>The Punisher</td>
    <td>Wall-E</td>
    </tr>
  <tr>
    <td>Epic Movie</td>
    <td>Star Wars</td>
    <td>Bad Boys</td>
    <td>Madagascar</td>
    </tr>
  <tr>
    <td>Spartan</td>
    <td>LOTR</td>
    <td>Die Hard</td>
    <td>Finding Nemo</td>
    </tr>
  <tr>
    <td>Dr. Dolittle</td>
    <td>The Mummy</td>
    <td>300</td>
    <td>A Bug's Life</td>
    </tr>
</table>

.table_col {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 14px;
  width: 660px;
  background: white;
  text-align: left;
  border-collapse: collapse;
  color: #3E4347;
}
.table_col th:first-child, .table_col td:first-child {
color: #F5F6F6;
border-left: none;
}
.table_col th {
font-weight: normal;
border-bottom: 2px solid #F5E1A6;
border-right: 20px solid white;
border-left: 20px solid white;
padding: 8px 10px;
}
.table_col td {
border-right: 20px solid white;
border-left: 20px solid white;
padding: 12px 10px;
color: #8b8e91;
}

10. Таблица с эффектом размытия строк при наведении

table_blur

<table class="table_blur">
  <tr>
    <th>Company</th>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
    <th>Q4</th>
    </tr>
  <tr>
    <td>Microsoft</td>
    <td>20.3</td>
    <td>30.5</td>
    <td>23.5</td>
    <td>40.3</td>
    </tr>
  <tr>
    <td>Google</td>
    <td>50.2</td>
    <td>40.63</td>
    <td>45.23</td>
    <td>39.3</td>
    </tr>
  <tr>
    <td>Apple</td>
    <td>25.4</td>
    <td>30.2</td>
    <td>33.3</td>
    <td>36.7</td>
    </tr>
  <tr>
    <td>IBM</td>
    <td>20.4</td>
    <td>15.6</td>
    <td>22.3</td>
    <td>29.3</td>
    </tr>
</table>

.table_blur {
  background: #f5ffff;
  border-collapse: collapse;
  text-align: left;
}
.table_blur th {
  border-top: 1px solid #777777;	
  border-bottom: 1px solid #777777; 
  box-shadow: inset 0 1px 0 #999999, inset 0 -1px 0 #999999;
  background: linear-gradient(#9595b6, #5a567f);
  color: white;
  padding: 10px 15px;
  position: relative;
}
.table_blur th:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 25%;
  height: 25%;
  width: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255,255,255,.08));
}
.table_blur tr:nth-child(odd) {
  background: #ebf3f9;
}
.table_blur th:first-child {
  border-left: 1px solid #777777;	
  border-bottom:  1px solid #777777;
  box-shadow: inset 1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur th:last-child {
  border-right: 1px solid #777777;
  border-bottom:  1px solid #777777;
  box-shadow: inset -1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur td {
  border: 1px solid #e3eef7;
  padding: 10px 15px;
  position: relative;
  transition: all 0.5s ease;
}
.table_blur tbody:hover td {
  color: transparent;
  text-shadow: 0 0 3px #a09f9d;
}
.table_blur tbody:hover tr:hover td {
  color: #444444;
  text-shadow: none;
}

11. Таблица-прайс

table_pricing

<table class="table_price">
<caption>Plans&Pricing</caption>
<tr>
  <th>Plan</th>
  <th colspan="2">Price</th>
</tr>
<tr>
  <td>Basic</td>
  <td>10$</td>
  <td><a>Select</a></td>
</tr>
<tr>
  <td>Professional</td>
  <td>20$</td>
  <td><a>Select</a></td>
</tr>
<tr>
  <td>Premium</td>
  <td>30$</td>
  <td><a>Select</a></td>
</tr>
<tr>
  <td>Platinum</td>
  <td>60$</td>
  <td><a>Select</a></td>
</tr>
</table>

.table_price {
  border-collapse: collapse;
  border-left: 3px solid #F79361;
  border-right: 3px solid #F79361;
  border-bottom: 3px solid #F79361;
  font-family: "Lucida Grande", sans-serif;
 }
.table_price caption {
  background: #F79361; 
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px  4px 0 rgba(0,0,0,.3);
  color: white;
  font-family: "Roboto Slab",serif;
  font-style: normal;
  font-size: 26px;
  text-align: center;
  margin: 0;
}
.table_price td, .table_price th {
  padding: 10px;
}
.table_price th {
  text-align: left;
  font-size: 18px;
}
.table_price tr:nth-child(2n) {
  background: #E5E5E5;
}
.table_price td:last-of-type {
  text-align: center;
}
.table_price a {
  display: inline-block;
  padding: 5px 10px;
  background: #F79361;
  box-shadow: 2px 2px 0 0 #a22800;
  position: relative;
}
.table_price a:hover {
  box-shadow: none;
  top: 2px;
  left: 2px;
}

12. Таблица с темным фоном и с подчеркиванием текста при наведении

table_dark

<table class="table_dark">
  <tr>
    <th>Company</th>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
    <th>Q4</th>
    </tr>
  <tr>
    <td>Microsoft</td>
    <td>20.3</td>
    <td>30.5</td>
    <td>23.5</td>
    <td>40.3</td>
    </tr>
  <tr>
    <td>Google</td>
    <td>50.2</td>
    <td>40.63</td>
    <td>45.23</td>
    <td>39.3</td>
    </tr>
  <tr>
    <td>Apple</td>
    <td>25.4</td>
    <td>30.2</td>
    <td>33.3</td>
    <td>36.7</td>
    </tr>
  <tr>
    <td>IBM</td>
    <td>20.4</td>
    <td>15.6</td>
    <td>22.3</td>
    <td>29.3</td>
    </tr>
  </table>

.table_dark {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 14px;
  width: 640px;
  text-align: left;
  border-collapse: collapse;
  background: #252F48;
  margin: 10px;
}
.table_dark th {
  color: #EDB749;
  border-bottom: 1px solid #37B5A5;
  padding: 12px 17px;
}
.table_dark td {
  color: #CAD4D6;
  border-bottom: 1px solid #37B5A5;
  border-right:1px solid #37B5A5;
  padding: 7px 17px;
}
.table_dark tr:last-child td {
  border-bottom: none;
}
.table_dark td:last-child {
  border-right: none;
}
.table_dark tr:hover td {
  text-decoration: underline;
}

Горизонтальное меню для сайта

Псевдоэлемент ::selection