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

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

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

Shift

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

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

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

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

2021

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

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

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

2021

удк 004.42

ббк З973.42

П52

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

П52

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

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

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

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

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

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

Таблицы

Таблица состоит из строк 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 разворота

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

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

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

Оглавление

Оглавление

Таблицы

Таблицы

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

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

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

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

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

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

Формы

Формы