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

---
title: Таблицы
slug: conflicting/Learn/CSS/Building_blocks/Styling_tables
tags:
  - CSS
  - Веб
  - Руководство
translation_of: Learn/CSS/Building_blocks/Styling_tables
translation_of_original: Web/Guide/CSS/Getting_started/Tables
original_slug: Web/Guide/CSS/Getting_started/Таблицы
---
<p>{{CSSTutorialTOC}}{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout")}}</p>

<p>Это 13-я секция руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Начало работы</a>; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаете новый пример документа, содержащий таблицу и таблицу стилей для неё.</p>

<h2 class="clearLeft" id="Информация_Таблицы">Информация: Таблицы</h2>

<p>Таблица располагает информацию в прямоугольной сетке. Некоторые таблицы могут быть сложными, и для сложных таблиц разные браузеры выдают разный результат.</p>

<p>Когда вы проектируете ваш документ, используйте таблицы для выражения <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">отношений</a> между кусочками информации. Поэтому это не важно, если различные браузеры отображают информацию слегка различными способами, потому что значение остается ясным.</p>

<p>Не используйте таблицы необычным способом для создания особенной визуальной разметки. Техники на предыдущей странице руководства (<strong><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="en-US/docs/Web/Guide/CSS/Getting_Started/Layout">Разметка</a></strong>) предпочтительнее для этой цели.</p>

<h3 id="Структура_таблицы">Структура таблицы</h3>

<p>В таблице, каждый кусок информации отображается в ячейке (<em>cell)</em>.</p>

<p>Ячейки, лежащие на одной линии, составляют строку (<em>row</em>).</p>

<p>В некоторых таблицах, строки могут быть сгруппированы. Специальная группа строк в начале таблицы - заголовок (<em>header)</em>, в конце - нижний колонтитул (<em>footer)</em>. Главные строки таблицы - тело (<em>body)</em>, и они могут быть также сгруппированы.</p>

<p>Ячейки в линии сверху вниз, составляют столбец (<em>column)</em>, но столбцы имеют ограниченное применение в таблицах CSS.</p>

<div class="tuto_example">
<div class="tuto_type">Пример</div>

<p>Таблица <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">Селекторов, основанных на отношении</a> в <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Селекторы</a> имеет десять ячеек в пяти строках.</p>

<p>Первая строка - заголовок. Остальные четыре строки - тело таблицы. Нижнего колонтитула нет.</p>

<p>У неё два столбца.</p>
</div>

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

<h3 id="Рамки">Рамки</h3>

<p>Ячейки не имеют границ.</p>

<p>У ячеек нет рамок и наполнений. По умолчанию, рамки разделены значениями таблицы, свойство {{cssxref("border-spacing")}}. Вы можете также полностью удалить пространство, установив свойство таблицы {{cssxref("border-collapse")}} в <code>collapse</code>.</p>

<div class="tuto_example">
<div class="tuto_type">Пример</div>

<p>Здесь три таблицы.</p>

<p>У таблицы слева интервал рамки 0.5 em. У таблицы по центру он составляет ноль. Таблица справа имеет сжатые границы:</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
 <tbody>
  <tr>
   <td style="padding-right: 2em;">
    <table style="">
     <tbody>
      <tr>
       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
      </tr>
      <tr>
       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
      </tr>
     </tbody>
    </table>
   </td>
   <td style="padding-right: 2em;">
    <table style="">
     <tbody>
      <tr>
       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
      </tr>
      <tr>
       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
      </tr>
     </tbody>
    </table>
   </td>
   <td style="padding-right: 6em;">
    <table style="border-collapse: collapse;">
     <tbody>
      <tr>
       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
      </tr>
      <tr>
       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Заголовок">Заголовок</h3>

<p>{{HTMLElement("caption")}} элемент - это метка, которая применяется ко всей таблице. По умолчанию, она отображается вверху таблицы.</p>

<p>Чтобы переместить её вниз, установите её свойство {{cssxref("caption-side")}} в <code>bottom</code>. Это свойство наследуется, поэтому, в качестве альтернативы вы можете установить это свойство у таблицы или у другого элемента предка.</p>

<p>Чтобы стилизовать заголовок текста, используйте любое из обычных свойств для текста.</p>

<div class="tuto_example">
<div class="tuto_type">Пример</div>

<p>У этой таблицы заголовок внизу</p>

<pre class="brush: css">#demo-table &gt; caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
}
</pre>

<table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
 <tbody>
  <tr>
   <td>
    <table>
     <caption>Подходит</caption>
     <tbody>
      <tr>
       <td>
        <table style="border-collapse: collapse;">
         <tbody>
          <tr>
           <td style="border: 1px solid gray; text-align: center;">Клубы</td>
           <td style="border: 1px solid gray; text-align: center;">Сердца</td>
          </tr>
          <tr>
           <td style="border: 1px solid gray; text-align: center;">Алмазы</td>
           <td style="border: 1px solid gray; text-align: center;">Лопаты</td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Пустые_ячейки">Пустые ячейки</h3>

<p>Вы можете отобразить пустые ячейки (т.е. их рамки и фон) указывав {{cssxref("empty-cells")}}: show; для элемента таблицы.</p>

<p>Вы можете скрыть их, указав <code>empty-cells: hide;</code>. Тогда, если у элемента родителя ячейки есть фон, он будет отображен через пустую ячейку.</p>

<div class="tuto_example">
<div class="tuto_type">Пример</div>

<p>Эти таблицы имеют бледно-зелёный фон. Их ячейки имеют бледно-серый фон и тёмно-серые рамки.</p>

<p>В таблице слева пустая таблица отображается. В таблице справа, она скрыта:</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
 <tbody>
  <tr>
   <td style="padding-right: 2em;">
    <table style="background-color: #dfd;">
     <tbody>
      <tr>
       <td style="border: 1px solid #555; background-color: #eee;"> </td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Сердца</td>
      </tr>
      <tr>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Алмазы</td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Лопаты</td>
      </tr>
     </tbody>
    </table>
   </td>
   <td style="padding-right: 6em;">
    <table style="background-color: #dfd;">
     <tbody>
      <tr>
       <td> </td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Сердца</td>
      </tr>
      <tr>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Алмазы</td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Лопаты</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">Детали</div>

<p>Для подробной информации о таблицах, смотрите <a href="http://www.w3.org/TR/CSS21/tables.html">Таблицы</a> в Спецификации CSS.</p>

<p>Информации там больше, чем в этом руководстве, но она не покрывает различия между браузерами, которые могут влиять на сложные таблицы.</p>
</div>

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

<ol>
 <li>Создайте новый HTML документ, <code>doc3.html</code>. Скопируйте и вставьте содержимое отсюда:

  <div style="height: 36em; overflow: auto;">
  <pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Документ примера 3&lt;/title&gt;
    &lt;link rel="stylesheet" href="style3.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table id="demo-table"&gt;
      &lt;caption&gt;Океаны&lt;/caption&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;Площадь&lt;/th&gt;
          &lt;th&gt;Средняя глубина&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;млн. км&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
          &lt;th&gt;м&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th&gt;Северный Ледовитый&lt;/th&gt;
          &lt;td&gt;13,000&lt;/td&gt;
          &lt;td&gt;1,200&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Атлантический&lt;/th&gt;
          &lt;td&gt;87,000&lt;/td&gt;
          &lt;td&gt;3,900&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Тихий&lt;/th&gt;
          &lt;td&gt;180,000&lt;/td&gt;
          &lt;td&gt;4,000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Индийский&lt;/th&gt;
          &lt;td&gt;75,000&lt;/td&gt;
          &lt;td&gt;3,900&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Южный&lt;/th&gt;
          &lt;td&gt;20,000&lt;/td&gt;
          &lt;td&gt;4,500&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;th&gt;Общая&lt;/th&gt;
          &lt;td&gt;361,000&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Средняя&lt;/th&gt;
          &lt;td&gt;72,000&lt;/td&gt;
          &lt;td&gt;3,800&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
  </div>
 </li>
 <li>Создайте новую таблицу стилей, <code>style3.css</code>. Скопируйте и вставьте содержимое отсюда:
  <pre class="brush: css">/*** Style for doc3.html (Tables) ***/

#demo-table {
  font: 100% sans-serif;
  background-color: #efe;
  border-collapse: collapse;
  empty-cells: show;
  border: 1px solid #7a7;
}

#demo-table &gt; caption {
  text-align: left;
  font-weight: bold;
  font-size: 200%;
  border-bottom: .2em solid #4ca;
  margin-bottom: .5em;
}


/* basic shared rules */
#demo-table th,
#demo-table td {
  text-align: right;
  padding-right: .5em;
}

#demo-table th {
  font-weight: bold;
  padding-left: .5em;
}


/* header */
#demo-table &gt; thead &gt; tr:first-child &gt; th {
  text-align: center;
  color: blue;
}

#demo-table &gt; thead &gt; tr + tr &gt; th {
  font-style: italic;
  color: gray;
}

/* fix size of superscript */
#demo-table sup {
  font-size: 75%;
}

/* body */
#demo-table td {
  background-color: #cef;
  padding:.5em .5em .5em 3em;
}

#demo-table tbody th:after {
  content: ":";
}


/* footer */
#demo-table tfoot {
  font-weight: bold;
}

#demo-table tfoot th {
  color: blue;
}

#demo-table tfoot th:after {
  content: ":";
}

#demo-table &gt; tfoot td {
  background-color: #cee;
}

#demo-table &gt; tfoot &gt; tr:first-child td {
  border-top: .2em solid #7a7;
}
</pre>
 </li>
 <li>Откройте документ в вашем браузере. Он должен выглядеть наподобие этого:
  <table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
   <tbody>
    <tr>
     <td>
      <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Океаны</p>

      <div style="border: 1px solid #7a7; background-color: #efe;">
      <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
       <tbody>
        <tr style="text-align: center; color: blue;">
         <th> </th>
         <th>Площадь</th>
         <th style="padding-left: .5em; padding-right: .5em;">Средняя глубина</th>
        </tr>
        <tr style="font-style: italic; color: gray;">
         <th> </th>
         <th style="padding-left: .5em; padding-right: .5em;"><sup>млн. км</sup><sup>2</sup></th>
         <th style="padding-left: .5em; padding-right: .5em;">м</th>
        </tr>
        <tr>
         <th style="padding-right: .5em;">Северный Ледовитый:</th>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
        </tr>
        <tr>
         <th style="padding-right: .5em;">Атлантический:</th>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
        </tr>
        <tr>
         <th style="padding-right: .5em;">Тихий:</th>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
        </tr>
        <tr>
         <th style="padding-right: .5em;">Индийский:</th>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
        </tr>
        <tr>
         <th style="padding-left: .5em; padding-right: .5em;">Южный:</th>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
        </tr>
        <tr>
         <th style="padding-right: .5em; color: blue;">Общая:</th>
         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
        </tr>
        <tr>
         <th style="padding-right: .5em; color: blue;">Средняя:</th>
         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
        </tr>
       </tbody>
      </table>
      </div>
     </td>
    </tr>
   </tbody>
  </table>
 </li>
 <li>Сравните правила в таблице стилей с отображенной таблицей, чтобы гарантировать, что вы понимаете действие для каждого правила. Если вы найдете правило, значение которого вы не понимаете, то закомментируйте его и обновите страницу, чтобы посмотреть, что изменилось. Вот несколько заметок об этой таблице:
  <ul>
   <li>Заголовок находится снаружи рамки таблицы.</li>
   <li>Если у вас установлен минимальный размер точки в Опциях, это может повлиять на верхний индекс в km<sup>2</sup>.</li>
   <li>Три пустые ячейки. Через две из них  позволено показывать фон таблицы. У третьей есть фон и верхняя рамка.</li>
   <li>Двоеточия добавлены с помощью таблицы стилей.</li>
  </ul>
 </li>
</ol>

<div class="tuto_example">
<div class="tuto_type">Вызов</div>

<p>Измените таблицу стилей, чтобы она выглядела, как эта:</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
 <tbody>
  <tr>
   <td>
    <div style="border: 1px solid #7a7; background-color: #efe;">
    <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
     <tbody>
      <tr style="text-align: center; color: blue;">
       <th>
        <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
         <tbody>
          <tr style="text-align: center; color: blue;">
           <th> </th>
           <th>Площадь</th>
           <th style="padding-left: .5em; padding-right: .5em;">Средняя глубина</th>
          </tr>
          <tr style="font-style: italic; color: gray;">
           <th> </th>
           <th style="padding-left: .5em; padding-right: .5em;"><sup>млн. км</sup><sup>2</sup></th>
           <th style="padding-left: .5em; padding-right: .5em;">м</th>
          </tr>
          <tr>
           <th style="padding-right: .5em;">Северный Ледовитый:</th>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
          </tr>
          <tr>
           <th style="padding-right: .5em;">Атлантический:</th>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
          </tr>
          <tr>
           <th style="padding-right: .5em;">Тихий:</th>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
          </tr>
          <tr>
           <th style="padding-right: .5em;">Индийский:</th>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
          </tr>
          <tr>
           <th style="padding-left: .5em; padding-right: .5em;">Южный:</th>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
          </tr>
          <tr>
           <th style="padding-right: .5em; color: blue;">Общая:</th>
           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
          </tr>
          <tr>
           <th style="padding-right: .5em; color: blue;">Средняя:</th>
           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
          </tr>
         </tbody>
        </table>
       </th>
      </tr>
     </tbody>
    </table>
    </div>

    <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Океаны</p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<p><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">Посмотреть решение для этой задачи.</a></p>

<h2 id="Что_дальше">Что дальше?</h2>

<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Это последняя страница в этом руководстве, которая фокусируется на CSS свойствах и значениях. Для полного обзора свойств и значений, смотрите <a href="http://www.w3.org/TR/CSS21/propidx.html">все свойства таблиц</a> в CSS Спецификациях.</p>

<p>Следующая страница <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Media" title="en-US/docs/Web/Guide/CSS/Getting_Started/Media">тоже рассматривает</a> цель и структуру CSS таблиц.</p>