<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>

<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>

<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>