x
 
Василий
31 августа 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как в ХТМЛ верстать картинки, списки и таблицы?


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

Добавим иллюстрацию в резюме Остапа Бендера:

<style>
body {
  /*
  * Настраиваем основной текст:
  * Бюросериф, кегль 20 пикселей,
  * интерлиньяж 27 пикселей.
  * Если Бюросерифа нет — Джорджия.
  */
  font-family: Bureauserif, Georgia, serif;
  font-size: 20px;
  line-height: 27px;
}

h3 {
  /*
  * Для заголовков третьего уровня
  * используем жирный Бюросанс.
  * Если Бюросанса нет — Гельветика.
  */
  font-family: Bureausans, Helvetica Neue,
     sans-serif;
  font-weight: bold;
  /*
  * Добавляем отступ снизу,
  * чтобы попасть в интерлиньяж.
  */
  margin: 0 0 .1em 0;
}

p {
  /*
  * Выставляем нижний отступ
  * в 88% от кегля.
  */
  margin: 0 0 .88em 0;
}

img {
  /*
  * Делаем изображения
  * блочными элементами.
  */
  display: block;
  /*
  * Делаем изображения «резиновыми»:
  * задаем максимальную ширину в 100%.
  */
  max-width: 100%;
  height: auto;
  /*
  * Добавляем увеличенный отступ
  * после изображений.
  */
  margin-bottom: 2em;
}
</style>

<section>
  <h3>Аферы</h3>
  <p>
    В Пятигорске продавал отдыхающим билеты
    для входа в открытый для всех «Провал»
    «с целью капитального ремонта Провала.
    Чтобы не слишком проваливался»:
  </p>

  <!--
    src — ссылка на картинку,
    alt — альтернативный текст,
    который видят скринридеры
    и ребята с отключенными картинками.

    Задаём width и height, чтобы
    браузер сразу знал, сколько места
    резервировать для картинки.
    Если их не задать, браузер
    определит размеры картинки после
    её загрузки и страница «прыгнет».
    -->
  <img
    src="http://bureau.ru/bb/soviet/20170831/proval.jpg"
    alt="Пятигорск, вход в «Провал»"
    width="1200" height="883">

  <p>
     В городе Арбатове выдал себя за сына
     лейтенанта Шмидта и получил
     от председателя горисполкома
     небольшую материальную помощь.
  </p>
</section>

Аферы

В Пятигорске продавал отдыхающим билеты для входа в открытый для всех «Провал» «с целью капитального ремонта Провала. Чтобы не слишком проваливался»:

Пятигорск, вход в «Провал»

В городе Арбатове выдал себя за сына лейтенанта Шмидта и получил от председателя горисполкома небольшую материальную помощь.

В отдельном окне

Списки

Нумерованные списки задаются тегом <ol> (ordered list), ненумерованные — тегом <ul> (unordered list). В обоих случаях элементы списка задаются тегом <li> (list item):

<style>
ol, ul {
  /*
  * Убираем отступы списков,
  * которые браузеры ставят
  * по умолчанию.
  */
  margin: 0;
  padding: 0;
}

ol li {
  /*
  * Для элементов нумерованного
  * списка используем
  * арабские числа.
  */
  list-style: decimal outside;
  /*
  * Каждому элементу списка
  * добавляем нижний отступ,
  * чтобы они не слипались
  * друг с другом.
  */
  margin: 0 0 .44em 0;
}

ul li {
  /*
  * Прячем маркеры
  * элементов ненумерованного
  * списка.
  */
  list-style: none;
  /*
  * Каждому элементу списка
  * добавляем нижний отступ,
  * чтобы они не слипались
  * друг с другом.
  */
  margin: 0 0 .44em 0;
  /*
  * Задаём левый внутренний
  * отступ для втяжки.
  */
  padding-left: 30px;
}

.first {
  /*
  * Обнуляем нижний отступ
  * у абзацев, идущих перед
  * списками.
  */
  margin-bottom: 0;
}
</style>

<p class="first">
  Четыре факта о пешеходах, которые необходимо
  помнить автомобилистам:
</p>

<ol>
  <li>
    Пешеходы составляют большую часть
    человечества.
    Мало того — лучшую его часть.
    Пешеходы создали мир.
  </li>

  <li>
    Автомобиль тоже был изобретён пешеходами.
    Но автомобилисты об этом как-то
    сразу забыли.
    Кротких и умных пешеходов стали давить.
    Улицы, созданные пешеходами,
    перешли во власть автомобилистов.
  </li>

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

  <li>
    Если пешеходу иной раз удаётся выпорхнуть
    из-под серебряного носа машины —
    его штрафует милиция за нарушение
    правил уличного катехизиса.
  </li>
</ol>

<p class="first">Коллектив «Рогов и копыт»:</p>
<ul>
  <li>
    зицпредседатель Фунт;
  </li>
  <li>
    управляющий отделением Остап Бендер;
  </li>
  <li>
    уполномоченный по рогам
    и копытам Шура Балаганов;
  </li>
  <li>
    курьер Михаил Самуэлевич Паниковский.
  </li>
</ul>

Четыре факта о пешеходах, которые необходимо помнить автомобилистам:

  1. Пешеходы составляют большую часть человечества. Мало того — лучшую его часть. Пешеходы создали мир.
  2. Автомобиль тоже был изобретён пешеходами. Но автомобилисты об этом как-то сразу забыли. Кротких и умных пешеходов стали давить. Улицы, созданные пешеходами, перешли во власть автомобилистов.
  3. В большом городе пешеходы ведут мученическую жизнь. Для них ввели некое транспортное гетто. Пешеходам разрешают переходить улицы только на перекрёстках, то есть именно в тех местах, где движение сильнее всего и где волосок, на котором обычно висит жизнь пешехода, легче всего оборвать.
  4. Если пешеходу иной раз удаётся выпорхнуть из-под серебряного носа машины — его штрафует милиция за нарушение правил уличного катехизиса.

Коллектив «Рогов и копыт»:

  • зицпредседатель Фунт;
  • управляющий отделением Остап Бендер;
  • уполномоченный по рогам и копытам Шура Балаганов;
  • курьер Михаил Самуэлевич Паниковский.
В отдельном окне

Таблицы

Таблицы задаются тегом <table>, шапка таблицы — тегом <thead> (table header), содержимое — тегом <tbody> (table body). Строки таблицы задаются тегом <tr> (table row). Ячейки задаются тегом <td> (table data cell) в содержимом, <th> (table header cell) в шапке.

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

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

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

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 1em 0 0;
  /*
  * Выравниваем содержимое шапки
  * влево вниз.
  */
  text-align: left;
  vertical-align: bottom;
}
</style>

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

Что запомнить

  • Для картинок — тег <img>. Лучше указать размеры изображения в атрибутах width и height, чтобы не было «упячки».
  • Для нумерованного и ненумерованного списков — теги <ol> и <ul>. Элементы списка — <li>.
  • Для таблиц — тег <table>. Строки таблицы — <tr>, ячейки — <td>.

Что дальше

О раскладке ХТМЛ-элементов, позиционировании и боксах

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Дима Шишкин
31 августа 2017

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

p + ol, p + ul {
  margin-top: -.88em;
}

Рабочий пример:
https://codepen.io/shugich/pen/QMzdMr

Если указать изображению атрибуты width и height, а потом в CSS поменять значение на auto, то упячка будет. Чтобы избежать этого можно использовать решение, которое написал Артем Поликарпов: https://github.com/artpolikarpov/upyachka.js


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Как вы проверяете соответствие вёрстки макету 2 Как спрятать экранную клавиатуру в Айфоне? Расскажите об обязанностях технического директора в бюро




Недавно всплыло

1 Как понять, что наступил момент назвать цену? 3 Как вести себя с человеком, который Джима Кемпа не читал и вину не признаёт? 2 1