🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

между важными местами

Shift

между
разворотами

Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова

2021

Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова

2021

удк 004.42

ббк З973.42

П52

Василий Половнёв, Игорь Петров

П52

ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—

М.: Изд‑во Бюро Горбунова, 2021

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.

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

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

Атрибут alt

У тега img есть атрибут alt — это альтернативный текст, который описывает, что изображено на картинке.

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

<img 
  src="https://cats.com/persian/9001.jpg" 
  alt="Рыжая персидская кошка точит когти об когтеточку">

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

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

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

Таблицы

Таблица состоит из строк tr (table row) и ячеек td (table data cell) или th (table heading). Ячейки можно вкладывать только в строки и нельзя напрямую в тег таблицы.

<table>
  <tr>
    <td>…</td>
    <td>…</td>
    <td>…</td>
  </tr>

  <tr>
    <td>…</td>
    <td>…</td>
    <td>…</td>
  </tr>
</table>

Для наглядности подсветим границы ячеек:

td, th {
  background: #ebebeb;
}

Чтобы отдельно выделить шапку, тело или подвал‑итог таблицы, используют обёртки: thead, tbody и tfoot. С этими обёртками проще ориентироваться в коде и стилизовать отдельные части таблицы.

<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>

  <tbody>
    <tr>…</tr>
    
    <tr>…</tr>
  </tbody>

  <tfoot>
    <tr>
      <td>…</td>
      <td>…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

Атрибут colspan скажет ячейке занимать несколько колонок:

<table>
  <thead>
    …
  </thead>

  <tbody>
    …
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

Атрибут rowspan скажет занимать несколько строк:

<table>
  <thead>
    …
  </thead>

  <tbody>
    <tr>
      <td rowspan="2">…</td>
      <td>…</td>
      <td>…</td>
    </tr>

    <!-- 
      Если в предыдущей строке первая ячейка занимает две строки, то в следующей строке первую ячейку нужно убрать 
    -->
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <td colspan="2">…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

При стилизации простых таблиц можно обходиться без лишних классов и стилизовать напрямую по тегам — внутри правильно свёрстанной таблицы всегда будет структура из tr и вложенных td/th.

table {
  font-family: Helvetica, sans-serif;
  border-collapse: collapse; /* Особое свойство убирает отступы между ячейками */
}

/* Подкрасим нечётные строки таблицы */
tr:nth-child(odd) {
  background: #e5f5ff;
}

tfoot tr {
  border-top: 1px solid #e5f5ff;
}

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

tfoot td,
td:last-child,
th:last-child {
  text-align: right;  
}

Раньше из‑за технических ограничений целые сайты верстали как большую таблицу из колонок и строк. Сейчас появились более удобные инструменты вёрстки и таблицы используют только по их прямому назначению — для представления табличных данных

Таблицы

Таблица состоит из строк tr (table row) и ячеек td (table data cell) или th (table heading). Ячейки можно вкладывать только в строки и нельзя напрямую в тег таблицы.

<table>
  <tr>
    <td>…</td>
    <td>…</td>
    <td>…</td>
  </tr>

  <tr>
    <td>…</td>
    <td>…</td>
    <td>…</td>
  </tr>
</table>

Раньше из‑за технических ограничений целые сайты верстали как большую таблицу из колонок и строк. Сейчас появились более удобные инструменты вёрстки и таблицы используют только по их прямому назначению — для представления табличных данных

Для наглядности подсветим границы ячеек:

td, th {
  background: #ebebeb;
}

Чтобы отдельно выделить шапку, тело или подвал‑итог таблицы, используют обёртки: thead, tbody и tfoot. С этими обёртками проще ориентироваться в коде и стилизовать отдельные части таблицы.

<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>

  <tbody>
    <tr>…</tr>
    
    <tr>…</tr>
  </tbody>

  <tfoot>
    <tr>
      <td>…</td>
      <td>…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

Атрибут colspan скажет ячейке занимать несколько колонок:

<table>
  <thead>
    …
  </thead>

  <tbody>
    …
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

Атрибут rowspan скажет занимать несколько строк:

<table>
  <thead>
    …
  </thead>

  <tbody>
    <tr>
      <td rowspan="2">…</td>
      <td>…</td>
      <td>…</td>
    </tr>

    <!-- 
      Если в предыдущей строке первая ячейка занимает две строки, то в следующей строке первую ячейку нужно убрать 
    -->
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <td colspan="2">…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

При стилизации простых таблиц можно обходиться без лишних классов и стилизовать напрямую по тегам — внутри правильно свёрстанной таблицы всегда будет структура из tr и вложенных td/th.

table {
  font-family: Helvetica, sans-serif;
  border-collapse: collapse; /* Особое свойство убирает отступы между ячейками */
}

/* Подкрасим нечётные строки таблицы */
tr:nth-child(odd) {
  background: #e5f5ff;
}

tfoot tr {
  border-top: 1px solid #e5f5ff;
}

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

tfoot td,
td:last-child,
th:last-child {
  text-align: right;  
}

<table>
  <thead>
    <tr>
      <th>Год</th>
      <th>Страна</th>
      <th>Название</th>
      <th>Режиссёр</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1968</td>
      <td>СССР</td>
      <td>Золотой телёнок</td>
      <td>Михаил Швейцер</td>
    </tr>

    <tr>
      <td>1969</td>
      <td>Чехословакия</td>
      <td>Командовать парадом буду я</td>
      <td>Ярослав Мах</td>
    </tr>

    <tr>
      <td>1974</td>
      <td>Венгрия</td>
      <td>Золотой телёнок</td>
      <td>Миклош Синетар</td>
    </tr>

    <tr>
      <td>1993</td>
      <td>Россия, Франция</td>
      <td>Мечты идиота</td>
      <td>Василий Пичул</td>
    </tr>

    <tr>
      <td>2006</td>
      <td>Россия</td>
      <td>Золотой телёнок</td>
      <td>Ульяна Шилкина</td>
    </tr>
  </tbody>
</table>

table {
  /*
  * Убираем отступы между
  * ячейками таблицы.
  */
  border-collapse: collapse;
}

td {
  /*
  * Настраиваем шрифт для ячеек:
  * Бюросанс, 14/17 пк.
  */
  font-family: Bureausans, Helvetica Neue,
    sans-serif;
  font-size: 14px;
  line-height: 17px;
  /*
  * Добавляем ячейкам отступы:
  * 14 пк справа, 7 пк сверху.
  */
  padding: 7px 14px 0 0;
  /*
  * Выравниваем содержимое ячеек
  * влево вверх.
  */
  text-align: left;
  vertical-align: top;
}

thead th {
  /*
  * Настраиваем шрифт для шапки:
  * жирный Бюросанс, 14/17 пк.
  */
  font-family: Bureausans, Helvetica Neue,
    sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  /*
  * Добавляем нижнюю рамку к шапке.
  * Толщиной в 0,5 пикселя, сплошная,
  * черного цвета с прозрачностью 25%.
  */
  border-bottom: .5px solid rgba(0, 0, 0, .25);
  /*
  * Добавляем ячейкам шапки отступ
  * 14 пк справа.
  */
  padding: 0 14px 0 0;
  /*
  * Выравниваем содержимое шапки
  * влево вниз.
  */
  text-align: left;
  vertical-align: bottom;
}

Год	Страна	Название	Режиссёр
1968	СССР	Золотой телёнок	Михаил Швейцер
1969	Чехословакия	Командовать парадом буду я	Ярослав Мах
1974	Венгрия	Золотой телёнок	Миклош Синетар
1993	Россия, Франция	Мечты идиота	Василий Пичул
2006	Россия	Золотой телёнок	Ульяна Шилкина

Сверстаем компактную таблицу с экранизациями погони Остапа Бендера за гражданином Корейко.

Внимательно изучите код, в нём встречается несколько новых свойств и полезных приёмов.

Попробуйте скопировать код и поэкспериментировать со стилями таблицы

Год	Страна	Название	Режиссёр
1968	СССР	Золотой телёнок	Михаил Швейцер
1969	Чехословакия	Командовать парадом буду я	Ярослав Мах
1974	Венгрия	Золотой телёнок	Миклош Синетар
1993	Россия, Франция	Мечты идиота	Василий Пичул
2006	Россия	Золотой телёнок	Ульяна Шилкина

Сверстаем компактную таблицу с экранизациями погони Остапа Бендера за гражданином Корейко.

Внимательно изучите код, в нём встречается несколько новых свойств и полезных приёмов.

<table>
  <thead>
    <tr>
      <th>Год</th>
      <th>Страна</th>
      <th>Название</th>
      <th>Режиссёр</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1968</td>
      <td>СССР</td>
      <td>Золотой телёнок</td>
      <td>Михаил Швейцер</td>
    </tr>

    <tr>
      <td>1969</td>
      <td>Чехословакия</td>
      <td>Командовать парадом буду я</td>
      <td>Ярослав Мах</td>
    </tr>

    <tr>
      <td>1974</td>
      <td>Венгрия</td>
      <td>Золотой телёнок</td>
      <td>Миклош Синетар</td>
    </tr>

    <tr>
      <td>1993</td>
      <td>Россия, Франция</td>
      <td>Мечты идиота</td>
      <td>Василий Пичул</td>
    </tr>

    <tr>
      <td>2006</td>
      <td>Россия</td>
      <td>Золотой телёнок</td>
      <td>Ульяна Шилкина</td>
    </tr>
  </tbody>
</table>

table {
  /*
  * Убираем отступы между
  * ячейками таблицы.
  */
  border-collapse: collapse;
}

td {
  /*
  * Настраиваем шрифт для ячеек:
  * Бюросанс, 14/17 пк.
  */
  font-family: Bureausans, Helvetica Neue,
    sans-serif;
  font-size: 14px;
  line-height: 17px;
  /*
  * Добавляем ячейкам отступы:
  * 14 пк справа, 7 пк сверху.
  */
  padding: 7px 14px 0 0;
  /*
  * Выравниваем содержимое ячеек
  * влево вверх.
  */
  text-align: left;
  vertical-align: top;
}

thead th {
  /*
  * Настраиваем шрифт для шапки:
  * жирный Бюросанс, 14/17 пк.
  */
  font-family: Bureausans, Helvetica Neue,
    sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  /*
  * Добавляем нижнюю рамку к шапке.
  * Толщиной в 0,5 пикселя, сплошная,
  * черного цвета с прозрачностью 25%.
  */
  border-bottom: .5px solid rgba(0, 0, 0, .25);
  /*
  * Добавляем ячейкам шапки отступ
  * 14 пк справа.
  */
  padding: 0 14px 0 0;
  /*
  * Выравниваем содержимое шапки
  * влево вниз.
  */
  text-align: left;
  vertical-align: bottom;
}

Попробуйте скопировать код и поэкспериментировать со стилями таблицы

Аркадий Мильчин и Людмила Чельцова. Справочник издателя и автора

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

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

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

Таблица с иллюстрациями

Для сдвига элементов группы «Виброустойчивость» заводим отдельный класс. Чтобы запретить переносы в названиях колонок и ячейках, используем атрибут nowrap, в отдельных значениях — тег nobr.

<h3>
  Кнопки и переключатели кнопочные
</h3>

<table>
  <thead>
    <tr>
      <th width="30%">Показатели</th>
      <th nowrap>МПК 1-1, 2-1</th>
      <th nowrap>КН</th>
      <th nowrap>КМ А1-IV, 1-1, 2-1</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Схема коммутации</td>
      <td><img src="schemes/mpk.svg"></td>
      <td><img src="schemes/kn.svg"></td>
      <td><img src="schemes/km.svg"></td>
    </tr>

    <tr>
      <td>Напряжение коммутации, В</td>
      <td>30</td>
      <td>50</td>
      <td>=30~220</td>
    </tr>

    <tr>
      <td>Ток коммутации, A</td>
      <td>0,5</td>
      <td>1,5 (250 Вт)</td>
      <td>=4~3</td>
    </tr>

    <tr>
      <td>Температура, ˚C</td>
      <td>−60…+100</td>
      <td>−60…+85</td>
      <td>−60…+85</td>
    </tr>

    <tr>
      <td>Виброустойчивость:</td>
    </tr>

    <tr class="indented">
      <td>частота, Гц</td>
      <td>10…2 500</td>
      <td>5…80</td>
      <td>5…200</td>
    </tr>

    <tr class="indented">
      <td>ускорение, g, <nobr>м/с²</nobr></td>
      <td>12</td>
      <td>6</td>
      <td>7</td>
    </tr>

    <tr>
      <td>Ускорение при ударной нагрузке, g, <nobr>м/с²</nobr></td>
      <td>75</td>
      <td>7</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

html {
  font-family: Helvetica;
}

/* Стилизуем заголовок под обычный курсивный текст. Честный заголовок, а не просто теги p и i лучше в плане семантики */
h3 {
  font-weight: normal;
  font-style: italic;
}

/* Базовая дизайнерская гигиена таблицы: ужимаем по ширине, выравниваем всё по левому верхнему краю */
table {
  border-collapse: collapse;
  width: min-content;
  font-size: inherit;
}

th,
td {
  vertical-align: top;
  text-align: left;
}

th,
tr td {
  padding: 18px 18px 0 0;
}

/* Нижняя граница шапки задаётся в её ячейках */
th {
  padding-top: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid;
}

/* Правый падинг у последних ячеек не нужен */
td:last-child, 
th:last-child {
  padding-right: 0;
}

/* Трюки с группой, сдвигаем элементы группы правее */
tr.indented td:first-child {
  padding-left: 18px;
}

/* Уменьшаем верхние отступы группы и элементов */
tr:not(.indented) + tr.indented td {
  padding-top: 9px;
}

tr.indented td {
  padding-top: 13px;
}

Сдваивание длинной таблицы

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

<div class="doubleTable">
  <table>
    <thead>
      <tr>
        <th>Тип панели</th>
        <th>Высота цилиндрической части баллона лампы, мм</th>
      </tr>
    </thead>            

    <tbody>
      <tr>
        <td nowrap>ПЛК9-Д-31</td>
        <td>28—31</td>
      </tr> 
      <tr>
        <td nowrap>ПЛК9-Д-40</td>
        <td>37—43</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Д-55</td>
        <td>52—58</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Д-60</td>
        <td>57—63</td>
      </tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th>Тип панели</th>
        <th>Высота цилиндрической части баллона лампы, мм</th>
      </tr>
    </thead>            

    <tbody>
      <tr>
        <td nowrap>ПЛК9-Э-46</td>
        <td>28—34</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-55</td>
        <td>37—43</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-70</td>
        <td>52—58</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-75</td>
        <td>57—63</td>
      </tr>
    </tbody>
  </table>
</div>
<p>
  <i>Примечание.</i> Размер H<sub>макс</sub> (мм) — последние две цифры марки.
</p>

/* Основные стили таблицы как в прошлых примерах */

.doubleTable {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.doubleTable table:not(:last-child) {
  border-right: 1px solid;
  margin-right: 18px;
}

Таблица с группами

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

<table>
  <thead>
    <tr>
      <th rowspan="2">Вид литья и литейные сплавы (металлы)</th>
      <th classname="borderBottom" colspan="7">Площадь сплошной поверхности отливки, см²</th>
    </tr>
    <tr>
      <td>≤25</td>
      <td>>25</td>
      <td>>100</td>
      <td>>225</td>
      <td>>400</td>
      <td>>1000</td>
      <td>>1600</td>
    </tr>
  </thead>            

  <tbody>
      <tr classname="groupStart">
        <td colspan="8">В песчаные формы</td>
      </tr>
      <tr>
        <td>АЛ2</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
      </tr>

      <tr>
        <td>МЛ5</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>4,5</td>
        <td>5,0</td>
        <td>6,0</td>
        <td>7,0</td>
      </tr>

      <tr>
        <td>Чугун</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td>7,0</td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">В кокиль</td>
      </tr>
      <tr>
        <td>АЛ2</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>МЛ5</td>
        <td>3,0</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td></td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">В оболочковые формы</td>
      </tr>
      <tr>
        <td>Алюминиевые</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
      </tr>
      <tr>
        <td>Медные</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
      </tr>
      <tr>
        <td>Сталь</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">Под давлением</td>
      </tr>
      <tr>
        <td>Оловянистые</td>
        <td>0,6</td>
        <td>0,7</td>
        <td>1,1</td>
        <td>1,5</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Цинковые</td>
        <td>0,8</td>
        <td>1,0</td>
        <td>1,5</td>
        <td>2,0</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Магниевые</td>
        <td>1,3</td>
        <td>1,8</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Алюминиевые</td>
        <td>1,0</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Медные</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>3,0</td>
        <td>3,5</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">По выплавляемым моделям</td>
      </tr>
      <tr>
        <td>Сталь</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

/* Основные стили таблицы как в прошлых примерах */

/* Конкретно в этой таблице нужна первая колонка пошире, задаём ей минимальную ширину */
th:first-child {
  min-width: 200px;
}

/* Увеличенный верхний отступ между группами */
tr.groupStart td {
  padding-top: 18px;
}

/* По умолчанию сдвигаем все первые ячейки, если они в теле таблицы и не вложены в .groupStart */
tbody tr:not(.groupStart) td:first-child {
  padding-left: 18px;
}

.borderBottom {
  border-bottom: 1px solid;
}

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

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

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

Таблица с иллюстрациями

Для сдвига элементов группы «Виброустойчивость» заводим отдельный класс. Чтобы запретить переносы в названиях колонок и ячейках, используем атрибут nowrap, в отдельных значениях — тег nobr.

<h3>
  Кнопки и переключатели кнопочные
</h3>

<table>
  <thead>
    <tr>
      <th width="30%">Показатели</th>
      <th nowrap>МПК 1-1, 2-1</th>
      <th nowrap>КН</th>
      <th nowrap>КМ А1-IV, 1-1, 2-1</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Схема коммутации</td>
      <td><img src="schemes/mpk.svg"></td>
      <td><img src="schemes/kn.svg"></td>
      <td><img src="schemes/km.svg"></td>
    </tr>

    <tr>
      <td>Напряжение коммутации, В</td>
      <td>30</td>
      <td>50</td>
      <td>=30~220</td>
    </tr>

    <tr>
      <td>Ток коммутации, A</td>
      <td>0,5</td>
      <td>1,5 (250 Вт)</td>
      <td>=4~3</td>
    </tr>

    <tr>
      <td>Температура, ˚C</td>
      <td>−60…+100</td>
      <td>−60…+85</td>
      <td>−60…+85</td>
    </tr>

    <tr>
      <td>Виброустойчивость:</td>
    </tr>

    <tr class="indented">
      <td>частота, Гц</td>
      <td>10…2 500</td>
      <td>5…80</td>
      <td>5…200</td>
    </tr>

    <tr class="indented">
      <td>ускорение, g, <nobr>м/с²</nobr></td>
      <td>12</td>
      <td>6</td>
      <td>7</td>
    </tr>

    <tr>
      <td>Ускорение при ударной нагрузке, g, <nobr>м/с²</nobr></td>
      <td>75</td>
      <td>7</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

Аркадий Мильчин и Людмила Чельцова. Справочник издателя и автора

html {
  font-family: Helvetica;
}

/* Стилизуем заголовок под обычный курсивный текст. Честный заголовок, а не просто теги p и i лучше в плане семантики */
h3 {
  font-weight: normal;
  font-style: italic;
}

/* Базовая дизайнерская гигиена таблицы: ужимаем по ширине, выравниваем всё по левому верхнему краю */
table {
  border-collapse: collapse;
  width: min-content;
  font-size: inherit;
}

th,
td {
  vertical-align: top;
  text-align: left;
}

th,
tr td {
  padding: 18px 18px 0 0;
}

/* Нижняя граница шапки задаётся в её ячейках */
th {
  padding-top: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid;
}

/* Правый падинг у последних ячеек не нужен */
td:last-child, 
th:last-child {
  padding-right: 0;
}

/* Трюки с группой, сдвигаем элементы группы правее */
tr.indented td:first-child {
  padding-left: 18px;
}

/* Уменьшаем верхние отступы группы и элементов */
tr:not(.indented) + tr.indented td {
  padding-top: 9px;
}

tr.indented td {
  padding-top: 13px;
}

Сдваивание длинной таблицы

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

<div class="doubleTable">
  <table>
    <thead>
      <tr>
        <th>Тип панели</th>
        <th>Высота цилиндрической части баллона лампы, мм</th>
      </tr>
    </thead>            

    <tbody>
      <tr>
        <td nowrap>ПЛК9-Д-31</td>
        <td>28—31</td>
      </tr> 
      <tr>
        <td nowrap>ПЛК9-Д-40</td>
        <td>37—43</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Д-55</td>
        <td>52—58</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Д-60</td>
        <td>57—63</td>
      </tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th>Тип панели</th>
        <th>Высота цилиндрической части баллона лампы, мм</th>
      </tr>
    </thead>            

    <tbody>
      <tr>
        <td nowrap>ПЛК9-Э-46</td>
        <td>28—34</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-55</td>
        <td>37—43</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-70</td>
        <td>52—58</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-75</td>
        <td>57—63</td>
      </tr>
    </tbody>
  </table>
</div>
<p>
  <i>Примечание.</i> Размер H<sub>макс</sub> (мм) — последние две цифры марки.
</p>

/* Основные стили таблицы как в прошлых примерах */

.doubleTable {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.doubleTable table:not(:last-child) {
  border-right: 1px solid;
  margin-right: 18px;
}

Таблица с группами

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

<table>
  <thead>
    <tr>
      <th rowspan="2">Вид литья и литейные сплавы (металлы)</th>
      <th classname="borderBottom" colspan="7">Площадь сплошной поверхности отливки, см²</th>
    </tr>
    <tr>
      <td>≤25</td>
      <td>>25</td>
      <td>>100</td>
      <td>>225</td>
      <td>>400</td>
      <td>>1000</td>
      <td>>1600</td>
    </tr>
  </thead>            

  <tbody>
      <tr classname="groupStart">
        <td colspan="8">В песчаные формы</td>
      </tr>
      <tr>
        <td>АЛ2</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
      </tr>

      <tr>
        <td>МЛ5</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>4,5</td>
        <td>5,0</td>
        <td>6,0</td>
        <td>7,0</td>
      </tr>

      <tr>
        <td>Чугун</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td>7,0</td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">В кокиль</td>
      </tr>
      <tr>
        <td>АЛ2</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>МЛ5</td>
        <td>3,0</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td></td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">В оболочковые формы</td>
      </tr>
      <tr>
        <td>Алюминиевые</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
      </tr>
      <tr>
        <td>Медные</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
      </tr>
      <tr>
        <td>Сталь</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">Под давлением</td>
      </tr>
      <tr>
        <td>Оловянистые</td>
        <td>0,6</td>
        <td>0,7</td>
        <td>1,1</td>
        <td>1,5</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Цинковые</td>
        <td>0,8</td>
        <td>1,0</td>
        <td>1,5</td>
        <td>2,0</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Магниевые</td>
        <td>1,3</td>
        <td>1,8</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Алюминиевые</td>
        <td>1,0</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Медные</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>3,0</td>
        <td>3,5</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">По выплавляемым моделям</td>
      </tr>
      <tr>
        <td>Сталь</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

/* Основные стили таблицы как в прошлых примерах */

/* Конкретно в этой таблице нужна первая колонка пошире, задаём ей минимальную ширину */
th:first-child {
  min-width: 200px;
}

/* Увеличенный верхний отступ между группами */
tr.groupStart td {
  padding-top: 18px;
}

/* По умолчанию сдвигаем все первые ячейки, если они в теле таблицы и не вложены в .groupStart */
tbody tr:not(.groupStart) td:first-child {
  padding-left: 18px;
}

.borderBottom {
  border-bottom: 1px solid;
}

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

ХТМЛ‑таблицы — хрупкий материал. Они подходят для справочных таблиц, но за пределами этой задачи начинаются проблемы. Ориентироваться в структуре табличных тегах заметно сложнее, чем в структуре обычных дивов. В таблицах тяжело управлять отступами между ячейками и выстроить надёжную и гибкую систему отступов.

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

<h2>Входящие</h2>

<div class="mailbox">
  <div class="mailRow">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">☆</button>
      <span class="mailRow__sender">Яндекс.Практикум</span>
      <strong class="mailRow__subj">Платёж успешно выполнен</strong>
      <span class="mailRow__date">13 августа</span>
    </div>
  </div>

  <div class="mailRow is__active">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">☆</button>
      <span class="mailRow__sender">hoster.by</span>
      <span class="mailRow__subj">Дарим наггетсы за участие в опросе</span>
      <span class="mailRow__date">10 августа</span>
    </div>

    <div class="mailRow__in">
      <h1>Дарим наггетсы за участие в опросе</h1>
      <p>Привет! Вы нас может уже и не помните, а вот мы вас частенько вспоминаем.</p>
      <p>Нет времени объяснять — нам нужно всего 6 минут вашего времени, чтобы узнать, как вы к нам относитесь. За ответы на вопросы подарим промокод на бесплатные наггетсы от наших друзей из Burger King.</p>
      <a href="#">Ответить на вопросы</a>
    </div>
  </div>

  <div class="mailRow">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">★</button>
      <span class="mailRow__sender">Фонотека</span>
      <span class="mailRow__subj">Кругосветка за четыре дня: -30% на немецкий краут, американский блюз, японский винил</span>
      <span class="mailRow__date">9 августа</span>
    </div>
  </div>

  <-- … -->
</div>

body {
  font-family: Helvetica;
}

.mailbox {
  font-size: .8em;
}

.mailRow {
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.mailRow.is__active {
  background: rgba(0, 0, 0, .05)
}

.mailRow__preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .15em;
  flex-wrap: nowrap;
  white-space: pre-wrap;
  padding: .3em .5em .7em;
  box-sizing: border-box;
}

.mailRow__sender {
  width: 25%;
}

/* Тут рюк с многоточием для длинных строк */
.mailRow__subj {
  flex-grow: 1;

  /* Ограничиваем ширину */
  max-width: 50%;

  /* Запрещаем перенос строки */
  white-space: nowrap;

  /* Обрезаем всё, что вылезло за ширину, а текст обрезаем многоточием */
  overflow: hidden;
  text-overflow: ellipsis;
}

.mailRow__date {
  flex-grow: 1;
  text-align: right;
}

.mailRow__in {
  width: 100%;
  font-size: .9em;
  padding: 1em 1em 2em;
  box-sizing: border-box;
}

.mailRow h1 {
  margin-top: 0;
}

.mailRow__in a {
  color: inherit;
}

/* Сбрасываем стандартные стили кнопки */
.btnStar {
  border: none;
  background: none;
}

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

ХТМЛ‑таблицы — хрупкий материал. Они подходят для справочных таблиц, но за пределами этой задачи начинаются проблемы. Ориентироваться в структуре табличных тегах заметно сложнее, чем в структуре обычных дивов. В таблицах тяжело управлять отступами между ячейками и выстроить надёжную и гибкую систему отступов.

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

<h2>Входящие</h2>

<div class="mailbox">
  <div class="mailRow">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">☆</button>
      <span class="mailRow__sender">Яндекс.Практикум</span>
      <strong class="mailRow__subj">Платёж успешно выполнен</strong>
      <span class="mailRow__date">13 августа</span>
    </div>
  </div>

  <div class="mailRow is__active">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">☆</button>
      <span class="mailRow__sender">hoster.by</span>
      <span class="mailRow__subj">Дарим наггетсы за участие в опросе</span>
      <span class="mailRow__date">10 августа</span>
    </div>

    <div class="mailRow__in">
      <h1>Дарим наггетсы за участие в опросе</h1>
      <p>Привет! Вы нас может уже и не помните, а вот мы вас частенько вспоминаем.</p>
      <p>Нет времени объяснять — нам нужно всего 6 минут вашего времени, чтобы узнать, как вы к нам относитесь. За ответы на вопросы подарим промокод на бесплатные наггетсы от наших друзей из Burger King.</p>
      <a href="#">Ответить на вопросы</a>
    </div>
  </div>

  <div class="mailRow">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">★</button>
      <span class="mailRow__sender">Фонотека</span>
      <span class="mailRow__subj">Кругосветка за четыре дня: -30% на немецкий краут, американский блюз, японский винил</span>
      <span class="mailRow__date">9 августа</span>
    </div>
  </div>

  <-- … -->
</div>

body {
  font-family: Helvetica;
}

.mailbox {
  font-size: .8em;
}

.mailRow {
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.mailRow.is__active {
  background: rgba(0, 0, 0, .05)
}

.mailRow__preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .15em;
  flex-wrap: nowrap;
  white-space: pre-wrap;
  padding: .3em .5em .7em;
  box-sizing: border-box;
}

.mailRow__sender {
  width: 25%;
}

/* Тут рюк с многоточием для длинных строк */
.mailRow__subj {
  flex-grow: 1;

  /* Ограничиваем ширину */
  max-width: 50%;

  /* Запрещаем перенос строки */
  white-space: nowrap;

  /* Обрезаем всё, что вылезло за ширину, а текст обрезаем многоточием */
  overflow: hidden;
  text-overflow: ellipsis;
}

.mailRow__date {
  flex-grow: 1;
  text-align: right;
}

.mailRow__in {
  width: 100%;
  font-size: .9em;
  padding: 1em 1em 2em;
  box-sizing: border-box;
}

.mailRow h1 {
  margin-top: 0;
}

.mailRow__in a {
  color: inherit;
}

/* Сбрасываем стандартные стили кнопки */
.btnStar {
  border: none;
  background: none;
}

Скрыто 224 разворота

Скрыто 156 разворотов

ХТМЛ.
Вёрстка сайтов

ХТМЛ.
Вёрстка сайтов

Оглавление

Оглавление

Атрибут alt

Атрибут alt

Таблицы

Таблицы

Таблица с иллюстрациями

Сдваивание длинной таблицы

Таблица с группами

Таблица с иллюстрациями

Сдваивание длинной таблицы

Таблица с группами