path: root/files/ru/learn/css/building_blocks/styling_tables/index.html

---
title: Стилизация таблиц
slug: Learn/CSS/Building_blocks/Styling_tables
tags:
  - CSS
  - Стилизация
  - таблицы
translation_of: Learn/CSS/Building_blocks/Styling_tables
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Styling_boxes")}}</div>

<p class="summary">Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые знания:</th>
   <td>Базовый HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (<a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Научиться эффективно стилизовать HTML таблицы.</td>
  </tr>
 </tbody>
</table>

<h2 id="Типичная_HTML_таблица">Типичная HTML таблица</h2>

<p>Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:</p>

<pre class="brush: html">&lt;table&gt;
  &lt;caption&gt;A summary of the UK's most famous punk bands&lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope="col"&gt;Band&lt;/th&gt;
      &lt;th scope="col"&gt;Year formed&lt;/th&gt;
      &lt;th scope="col"&gt;No. of Albums&lt;/th&gt;
      &lt;th scope="col"&gt;Most famous song&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
      &lt;td&gt;1976&lt;/td&gt;
      &lt;td&gt;9&lt;/td&gt;
      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
      &lt;td&gt;1976&lt;/td&gt;
      &lt;td&gt;6&lt;/td&gt;
      &lt;td&gt;London Calling&lt;/td&gt;
    &lt;/tr&gt;

      ... some rows removed for brevity

    &lt;tr&gt;
      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
      &lt;td&gt;1974&lt;/td&gt;
      &lt;td&gt;17&lt;/td&gt;
      &lt;td&gt;No More Heroes&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;th scope="row" colspan="2"&gt;Total albums&lt;/th&gt;
      &lt;td colspan="2"&gt;77&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
&lt;/table&gt;</pre>

<p>Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p>

<p>Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.</p>

<h2 id="Активное_обучение_Стилизация_таблицы">Активное обучение: Стилизация таблицы</h2>

<p>В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.</p>

<ol>
 <li>В начале необходимо сделать копию <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">sample markup</a>, загрузить оба изображения (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), и вставить эти файлы в отдельную папку на вашем компьютере.</li>
 <li>Следующее, это создать новый файл <code>style.css</code> и сохранить его в той же папке вместе с другими файлами.</li>
 <li>Подключить CSS в HTML для этого разместить следующую строку в HTML внутри {{htmlelement("head")}}:
  <pre class="brush: html">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
 </li>
</ol>

<h3 id="Отступы_и_разметка">Отступы и разметка</h3>

<p>Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш <code>style.css</code> файл:</p>

<pre class="brush: css">/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}</pre>

<p>Наиболее важные части следующие:</p>

<ul>
 <li>Свойство {{cssxref("table-layout")}} со значением <code>fixed</code> как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда <code>table-layout: fixed</code>, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) ("Выберите <em>n-ый</em> дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br>
  <br>
  Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).</li>
 <li>Свойство {{cssxref("border-collapse")}} со значением <code>collapse</code> это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить <code>border-collapse: collapse;</code>  рамки схлопываются в одну и так выглядит намного лучше: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li>
 <li>Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.</li>
 <li>Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.</li>
</ul>

<p>На этом этапе наша таблица выглядит уже гораздо лучше:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p>

<h3 id="Немного_простой_типографики">Немного простой типографики</h3>

<p>Теперь мы ещё кое-что изменим.</p>

<p>Во-первых, мы пойдём и найдём на <a href="https://www.google.com/fonts">Google Fonts</a> шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбранный вами Google Fonts шрифт.</p>

<p>Добавьте элемент {{htmlelement("link")}} в блок head вашего HTML, на строчку выше существующего элемента <code>&lt;link&gt;</code>:</p>

<pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>

<p>Затем добавьте следующий CSS в ваш <code>style.css</code> файл, ниже предыдущего кода:</p>

<pre class="brush: css">/* typography */

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
  font-family: 'Rock Salt', cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}</pre>

<p>Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:</p>

<ul>
 <li>Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов {{htmlelement("thead")}} и {{htmlelement("tfoot")}}, который подходит нам по тематике панков.</li>
 <li>Мы добавили немного {{cssxref("letter-spacing")}} в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.</li>
 <li>Мы выравниваем по центру текст ячейках внутри {{htmlelement("tbody")}} чтобы они совпадали с заголовками. По умолчанию у ячеек свойство {{cssxref("text-align")}} имеет значение <code>left</code>, а заголовки значение <code>center</code>, но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.</li>
 <li>Мы выровняли заголовок справа внутри {{htmlelement("tfoot")}} так чтобы он визуально ассоциировался с соответствующими ему данными.</li>
</ul>

<p>В результате таблица выглядит немного аккуратнее:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p>

<h3 id="Графика_и_цвета">Графика и цвета</h3>

<p>И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.</p>

<p>Следующий шаг это добавить следующий CSS в ваш <code>style.css</code> файл в самом низу:</p>

<pre>thead, tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th, tfoot th, tfoot td {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  border: 3px solid purple;
}
</pre>

<p>Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.</p>

<p>Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и ещё {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.</p>

<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">линейные градиенты</a>.</p>

<h4 id="Полосатая_зебра">Полосатая зебра</h4>

<p>Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать <strong>полосы зебры</strong> — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий CSS в ваш <code>style.css</code> файл:</p>

<pre class="brush: css">tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}</pre>

<ul>
 <li>Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула <code>2n-1</code> выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула <code>2n</code> выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова <code>odd</code> и <code>even</code>, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета.</li>
 <li>Ещё мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный <code>.png</code> с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.</li>
 <li>И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор <code>:nth-child</code>.</li>
</ul>

<p>Этот взрыв цвета выглядит следующим образом:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p>

<p>То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.</p>

<h3 id="Стилизация_заголовка">Стилизация заголовка</h3>

<p>Последнее что мы сделаем с нашей таблицей это стилизация заголовка. Для этого добавим следующие строки в наш файл <code>style.css</code>:</p>

<pre class="brush: css">caption {
  font-family: 'Rock Salt', cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}</pre>

<p>Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение <code>bottom</code>. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p>

<h2 id="Активное_обучение_Стилизация_вашей_собственной_таблицы">Активное обучение: Стилизация вашей собственной таблицы</h2>

<p>Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.</p>

<h2 id="Стилизация_таблицы_быстрые_советы">Стилизация таблицы быстрые советы</h2>

<p>Короткий список наиболее полезных вещей рассмотренных выше:</p>

<ul>
 <li>Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.</li>
 <li>Используйте {{cssxref("table-layout")}}<code>: fixed</code> для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).</li>
 <li>Используйте {{cssxref("border-collapse")}}<code>: collapse</code>, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.</li>
 <li>Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.</li>
 <li>Используйте полоски зебры, чтобы облегчить чтение между строк.</li>
 <li>Используйте {{cssxref("text-align")}} чтобы выровнять текст в {{htmlelement("th")}} и {{htmlelement("td")}} для более аккуратного и удобного оформления.</li>
</ul>

<h2 id="Заключение">Заключение</h2>

<p>Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.</p>

<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Styling_boxes")}}</p>

<p> </p>

<h2 id="В_этом_блоке">В этом блоке</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap">Box model recap</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Borders</a></li>
 <li><a href="/ru/docs/Learn/CSS/Styling_boxes/Styling_tables">Стилизация таблиц</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></li>
</ul>

<p> </p>