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

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

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

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

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

table-css-1

Разметка HTML
<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>
Стили CSS
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

Разметка HTML
<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>
Стили CSS
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.

Стили CSS
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.

Стили CSS
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

Разметка HTML
<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>
Стили CSS
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

Разметка HTML
<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>
Стили CSS
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

Разметка HTML
<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>
Стили CSS
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

Разметка HTML
<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>
Стили CSS
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

Разметка HTML
<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>
Стили CSS
.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

Разметка HTML
<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>
Стили CSS
.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

Разметка HTML
<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>
Стили CSS
.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

Разметка HTML
<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>
Стили CSS
.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;
}
  • PaSHA SHeremetev

    10й пример весьма оригинальный.
    А то банальная подсветка при наведении на строку уже не так впечатляет. )

  • Александр

    Не подскажите как реализовать не горизонтальное (по принципу 10ой таблицы), а вертикальное размытие (по столбцам)?
    Примерно так: https://yadi.sk/i/l32AlDM8uF2Vw

    • Посмотрите пример http://codepen.io/nazarelen/pen/EyraAL.
      Работает это так:
      1) если нужно размыть только текст, используем при наведении .wrap:hover li:not(:hover) {color: transparent; text-shadow: 0 0 3px #a09f9d;}
      2) если нужно размыть только картинку, используем при наведении .wrap:hover img:not(:hover) {-webkit-filter: blur(3px); filter: blur(3px);}
      3) если нужно размыть всё сразу, используем .wrap:hover li:not(:hover) {-webkit-filter: blur(3px); filter: blur(3px);}
      Сложный селектор .wrap:hover li:not(:hover) означает: при наведении на блок элемент списка, на который не навели курсор мыши, принимает следующие свойства.

      • Александр

        огромное спасибо Елена! с псевдоклассами вроде знаком (впоане hover,active и тд) а вот с сложными пока что — «на вы и шепотом =) » Буду изучать)

        • Пожалуйста! На самом деле, это не так сложно, как кажется, нужно просто представить, что происходит с элементом. Все псевдоклассы описывают какое-либо состояние или характеристику элемента, подробнее можете почитать здесь https://html5book.ru/psevdoklassy/ и здесь https://html5book.ru/oformlenie-tablicy-psevdoklassami/.

          • Александр

            Елена, ещё небольшой вопрос. Пытаюсь перенести стили с примера, что Вы скинули на свою реализацию (если полностью перенести отображение не совсем нравиться).
            Могли бы посмотреть: http://lkm29.ru/ , вопрос в следующем,
            • Вы реализовали через маркированный список, у меня идет через таблицы. Обязательно ли делать «обертку div»?
            • И возможно ли применить размытие конкретно к изображению внутри таблицы (так как на странице присутствует ещё медиаконтент)? Через отношение селектора селекторов?

            Спасибо за ответ.

          • Обёртку делать не обязательно, посмотрите пример без неё. Я переделала этот же пример для размытия только изображения.

          • Александр

            спасибо ещё раз, вчера посидел и переделал свою таблицу..выдернув у из Вашего примера только размытие. Вы используете новые атрибуты (flex) и размещение элементов через @media, а я в этом пока, что очень слаб( В который раз удостоверяюсь css3 надо в срочном порядке штудировать, так как с помощью него можно реализовать достаточно интересные визуальные решения (которые ранее были доступны разве что через jquery)

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

  • Eminemc

    Помогите реализовать таблицу как на этом сайте. Буду очень благодарен.

  • Ваше красавцы!!! Блогадарю!!!

  • Eminemc

    Не подскажите как сделать что-то подобное? https://uploads.disquscdn.com/images/59445c9d0dcb02ae41a7af92b265891b44c6e772615b3bafd867f691f9e77cc5.png

    • Это не таблицы, сделано с помощью блоков. Ленточка сделана картинкой. Все остальное — блоки с обтеканием по левому краю.

  • Vyacheslav Vavilin

    css, в каком виде его нужно будет подключить к сайту по html? таблица 3

    • Не совсем понятен вопрос. Что у вас за сайт? Статичные страницы? Таблицы стилей style.css совсем нет?

      • Vyacheslav Vavilin

        конструктор lpmotor , исходника нет, но вставки html,сss можно делать в контейнер div

  • Вячеслав Коростин

    такое…

  • Adnin White

    Огромное спасибо!раньше я не мог понять табличную верстку, хотя хорошо верстал блоками, забросил — сейчас вернулся опять к HTML/CSS и теперь всё понятно и просто! Огромное спасибо!

  • Irisha

    Как правильно подключить код на странице сайта на WordPress. В визуальном редакторе вставляю каркас с содержимым, а стили спец секцию для html , иначе не получается, таблица вроде бы получается, но эти стили тогда влияют на форму заказа, она становится такого же цвета) Как лучше сделать вообще? Буду очень благодарна)

    • Не вижу, что вы у себя в коде написали. Может вы класс присвоили один и тот же для всех таблиц, может вы стили просто для table указали…

      • Irisha

        Код взят полностью из примера Таблица 4 css +html.
        Css в блоке для html вот так:

        код

        А сам html код тоже из вашего примера для таблицы 4.

        Но возможно css +html подключить в окне визуального редактора в режиме Текст и как, если да?) У меня не получилось или что-то не так делаю.

        • Опять недостаточно информации. Можно ссылку на сайт?

          • Irisha

            Уже вопрос решился, спасибо)

  • Ingvar Heinrich Lotz

    Привет. Не совсем понятно про вордпресс. Нужно вставить в одну статью 4 таблицы с разными стилями. В редакторе в текстовом режиме вставляем код html каждой таблицы. А куда css? Сразу под кодом html? Не будет ли css одной таблицы влиять на css другой?

    Буду очень благодарен за подсказку!

    • Привет. Есть такой инструмент — класс, с помощью которого можно задавать разные стили для одинаковых элементов, присваивая им разные значения этого атрибута, например, table class=»table-green», table class=»table-light», table class=»table-rounded» и т.д. То есть пишите такое название класса, которое характеризует внешний вид таблицы, чтобы вам было проще ориентироваться в коде. В стилях, вместо table пишете селектор класса .table-green {
      css-свойства
      }. Сам код не обязательно писать на странице, лучше и правильнее в файле стилей, обычно это style.css

      • Ingvar Heinrich Lotz

        Большое Спасибо!

        • Пожалуйста ☺

          • Ingvar Heinrich Lotz

            Ну вот, вроде, с css разобрался и вставил куда надо 🙂 Только https://uploads.disquscdn.com/images/c73d4b65725e3258bc865f9e49cba08bf45baf5a9e413d46186fc6e4d75df595.png внешний вид таблицы «Зебра» не совпадает с вашим. Проверил html, почистил кэш где нужно и не нужно 🙂 но так и не пойму, почему таблица всё же смотрится совсем по другому?.

            Code html:

            Frequency
            Percent
            Valid percent
            Cumulative percent

            9th Circuit
            1.0
            2.5
            2.5
            2.5

            Committee
            2.0
            5.0
            5.0
            7.5

            Democrats
            12.0
            30.0
            30.0
            37.5

            Hilary
            4.0
            10.0
            10.0
            47.5

            Justice Dept
            5.0
            5.0
            5.0
            52.5

            Obama
            10.0
            25.0
            25.0
            77.5

            Specific Person
            9.0
            22.5
            22.5
            100

            TOTAL
            40.0
            100.0
            100.0

          • Ingvar Heinrich Lotz

            Наверное, потому, что Вы подставили в самую нижнюю правую ячейку значение 325. 😉 Там должно быть пусто. Ну ладно, не выходит, так не выходит. И так красиво 🙂

  • Саша

    День добрый, Елена! Спасибо за отлично сделанный и полезный ресурс! Пользуюсь им уже пару лет. Но вот заметила, что раньше под постом и до ветки с обсуждением и комментариями был блок с несколькими ссылками и превью на схожие по теме материалы на вашем сайте… Было очень удобно им пользоваться — там не просто были материалы предыдущий-следующий, а были разрозненные по времени статьи… и очень часто попадалось на глаза что-то интересное… Было бы замечательно, если бы появилась возможность этот блок «восстановить», сделать доступным… По личному опыту, я частенько зависала над материалами из этого блока — просматривала их, а иначе необходимо гораздо больше времени, чтобы найти лучшее среди статей среди прочих равных… Спасибо за ресурс!

  • Саша

    Ой, надеюсь, что переделанный шаблон будет таким же светлым-легким по восприятию! Этот шаблон — очень нравится!

    • Не переживайте, дизайн не изменится, он мне и самой нравится ☺

  • Sergey Scherbakov

    Лена, все просто отлично, но.. Для совсем «грамотных» типа меня здорово привести весь код (т.е. полностью содержимое файлов) чтобы можно было увидеть привязку html к css

  • Sergey Scherbakov

    Лена, все отлично, но.. Хорошо бы для таких «грамотных», как я, привести полностью содержимое файлов css и html чтобы была четко видна привязка.

    • Вот вы совсем ленитесь. Как ни крути, основы нужно знать. Почитайте, пожалуйста, на сайте https://html5book.ru/osnovy-html/ и https://html5book.ru/osnovy-css/.

      • Sergey Scherbakov

        Не ожидал, что так быстро ответите — спасибо огромное ! Конечно, ссылки сохранил, мануалы почитаю. А лень, Леночка,- одно из самых больших удовольствий в жизни 🙂

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

  • Алексей Ларионов

    Здравствуйте! Подскажите пожалуйста как сделать эти таблицы адаптивными как у Вас?

    • Здравствуйте! Уточните, пожалуйста, вы смотрите на таблицы на страницах сайта, а не на эти, в примерах? А так, не существует универсального приёма для всех таблиц, в первую очередь это зависит от количества столбцов в ряду.

  • Dimka Dimka

    Вставил таблицу и все это дело в секцию, как на демо, прописал стили, но не отображается адаптивно. Виден только кусок таблицы при маленьком размере браузера.
    Попробовал другой вариант, обернул таблицу в div, которому задал максимальную ширину в 100% и overflow: auto. Так хотя бы горизонтальный скролл появляется.
    padding: 10px 20px; может мешает при уменьшении?