path: root/files/ru/learn/html/tables/basics/index.html

---
title: HTML таблицы основы
slug: Learn/HTML/Tables/Basics
translation_of: Learn/HTML/Tables/Basics
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>

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

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Начальные условия:</th>
   <td>Знание основ HTML (читайте <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML - Introduction to HTML</a>).</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Общее знакомство с таблицами HTML.</td>
  </tr>
 </tbody>
</table>

<h2 id="Что_такое_таблица">Что такое таблица ?</h2>

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

<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p>

<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p>

<p>Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:</p>

<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p>

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

<h3 id="Как_работает_таблица">Как работает таблица?</h3>

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

<table>
 <caption>Personal pronouns</caption>
 <tbody>
  <tr>
   <th colspan="3"></th>
   <th scope="col">Субъект</th>
   <th scope="col">Объект</th>
  </tr>
  <tr>
   <th rowspan="5" scope="rowgroup">Единствен. числ.</th>
   <th colspan="2" scope="row">1 Лицо</th>
   <td>Я</td>
   <td>меня</td>
  </tr>
  <tr>
   <th colspan="2" scope="row">2 Лицо</th>
   <td>ты</td>
   <td>тебя</td>
  </tr>
  <tr>
   <th rowspan="3" scope="rowgroup">3 Лицо</th>
   <th class="symbol" scope="row">♂</th>
   <td>он</td>
   <td>его</td>
  </tr>
  <tr>
   <th class="symbol" scope="row">♀</th>
   <td>она</td>
   <td>её</td>
  </tr>
  <tr>
   <th class="symbol" scope="row">o</th>
   <td>оно</td>
   <td>его</td>
  </tr>
  <tr>
   <th rowspan="3" scope="rowgroup">Множ.числ.</th>
   <th colspan="2" scope="row">1 Лицо</th>
   <td>мы</td>
   <td>нас</td>
  </tr>
  <tr>
   <th colspan="2" scope="row">2 Лицо</th>
   <td>вы</td>
   <td>вас</td>
  </tr>
  <tr>
   <th colspan="2" scope="row">2 Лицо</th>
   <td>они</td>
   <td>их</td>
  </tr>
 </tbody>
</table>

<p>Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.</p>

<h3 id="Оформление_таблиц">Оформление таблиц</h3>

<p><a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/personal-pronouns.html">Исходный код HTML (HTML source code)</a> вышеприведённой таблице есть в GitHub; посмотрите его и <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns.html">живой пример (look at the live example)</a>! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.</p>

<p>Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (<a href="/en-US/docs/Learn/CSS">CSS</a>). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Стилизация таблиц</a>.</p>

<p>В этом разделе мы не фокусируемся на CSS, но все же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">здесь</a>, можно также использовать <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">шаблон HTML</a>, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.</p>

<div class="note">
<p><strong>Примечание</strong>: Посмотрите также <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html">таблицу personal_pronouns с применённым к ней стилем</a>, чтобы получить представление о том, как она выглядит.</p>
</div>

<h3 id="Когда_не_надо_использовать_таблицы_HTML">Когда не надо использовать таблицы HTML?</h3>

<p>HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе <a href="/ru/docs/Learn/Доступность/HTML#Вёрстка">Вёрстка</a> на <a href="/ru/docs/Learn/Доступность">Начальном обучающем модуле доступности</a>. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда все же попадается.</p>

<p>Короче говоря, использование таблиц в целях оформления вместо <a href="/en-US/docs/Learn/CSS/CSS_layout">методов CSS</a> является плохой идеей по следующим причинам :</p>

<ol>
 <li><strong>Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Скринридеры (Screenreaders</a>), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.</li>
 <li><strong>Таблицы создают путаницу тегов</strong>: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.</li>
 <li><strong>Таблицы не реагируют автоматически на тип устройства</strong>: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.</li>
</ol>

<h2 id="Упражнение_Ваша_первая_таблица">Упражнение: Ваша первая таблица</h2>

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

<ol>
 <li>Прежде всего, создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере.</li>
 <li>Содержимое любой таблицы заключается между двумя тегами : <strong><code><a href="/en-US/docs/Web/HTML/Element/table">&lt;table&gt;&lt;/table&gt;</a></code></strong>. Добавьте их в тело HTML.</li>
 <li>Самым маленьким контейнером в таблице является ячейка, она создаётся элементом <strong><code><a href="/en-US/docs/Web/HTML/Element/td">&lt;td&gt;</a></code></strong> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее:
  <pre class="brush: html notranslate">&lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;</pre>
 </li>
 <li>Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом:
  <pre class="brush: html notranslate">&lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;
&lt;td&gt;I'm your second cell.&lt;/td&gt;
&lt;td&gt;I'm your third cell.&lt;/td&gt;
&lt;td&gt;I'm your fourth cell.&lt;/td&gt;</pre>
 </li>
</ol>

<p>Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <code>&lt;td&gt; </code>создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.</p>

<p>Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/tr">&lt;tr&gt;</a></code></strong> ('tr' - сокращение от 'table row'). Попробуем, как это получится.</p>

<ol>
 <li>Поместите четыре уже созданных ячейки между тегами <code>&lt;tr&gt;</code> как здесь показано:

  <pre class="brush: html notranslate">&lt;tr&gt;
  &lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;
  &lt;td&gt;I'm your second cell.&lt;/td&gt;
  &lt;td&gt;I'm your third cell.&lt;/td&gt;
  &lt;td&gt;I'm your fourth cell.&lt;/td&gt;
&lt;/tr&gt;</pre>
 </li>
 <li>Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент <code>&lt;tr&gt;</code>, а каждая ячейка должна быть внутри <code>элемента &lt;td&gt;</code>.</li>
</ol>

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

<table>
 <tbody>
  <tr>
   <td>Hi, I'm your first cell.</td>
   <td>I'm your second cell.</td>
   <td>I'm your third cell.</td>
   <td>I'm your fourth cell.</td>
  </tr>
  <tr>
   <td>Second row, first cell.</td>
   <td>Cell 2.</td>
   <td>Cell 3.</td>
   <td>Cell 4.</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Примечание</strong>: Этот пример можно также найти на GitHub под названием <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">see it live also</a>).</p>
</div>

<h2 id="Добавление_заголовков_с_помощью_элементов_&lt;th>">Добавление заголовков с помощью элементов &lt;th&gt;</h2>

<p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:</p>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td&gt;Knocky&lt;/td&gt;
    &lt;td&gt;Flor&lt;/td&gt;
    &lt;td&gt;Ella&lt;/td&gt;
    &lt;td&gt;Juan&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Breed&lt;/td&gt;
    &lt;td&gt;Jack Russell&lt;/td&gt;
    &lt;td&gt;Poodle&lt;/td&gt;
    &lt;td&gt;Streetdog&lt;/td&gt;
    &lt;td&gt;Cocker Spaniel&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Age&lt;/td&gt;
    &lt;td&gt;16&lt;/td&gt;
    &lt;td&gt;9&lt;/td&gt;
    &lt;td&gt;10&lt;/td&gt;
    &lt;td&gt;5&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Owner&lt;/td&gt;
    &lt;td&gt;Mother-in-law&lt;/td&gt;
    &lt;td&gt;Me&lt;/td&gt;
    &lt;td&gt;Me&lt;/td&gt;
    &lt;td&gt;Sister-in-law&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Eating Habits&lt;/td&gt;
    &lt;td&gt;Eats everyone's leftovers&lt;/td&gt;
    &lt;td&gt;Nibbles at food&lt;/td&gt;
    &lt;td&gt;Hearty eater&lt;/td&gt;
    &lt;td&gt;Will eat till he explodes&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

<p>Теперь как выглядит таблица:</p>

<table>
 <tbody>
  <tr>
   <td></td>
   <td>Knocky</td>
   <td>Flor</td>
   <td>Ella</td>
   <td>Juan</td>
  </tr>
  <tr>
   <td>Breed</td>
   <td>Jack Russell</td>
   <td>Poodle</td>
   <td>Streetdog</td>
   <td>Cocker Spaniel</td>
  </tr>
  <tr>
   <td>Age</td>
   <td>16</td>
   <td>9</td>
   <td>10</td>
   <td>5</td>
  </tr>
  <tr>
   <td>Owner</td>
   <td>Mother-in-law</td>
   <td>Me</td>
   <td>Me</td>
   <td>Sister-in-law</td>
  </tr>
  <tr>
   <td>Eating Habits</td>
   <td>Eats everyone's leftovers</td>
   <td>Nibbles at food</td>
   <td>Hearty eater</td>
   <td>Will eat till he explodes</td>
  </tr>
 </tbody>
</table>

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

<h3 id="Упражнение_заголовки">Упражнение: заголовки</h3>

<p>Попробуем улучшить эту таблицу.</p>

<ol>
 <li>Сначала создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.</li>
 <li>Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/th">&lt;th&gt;</a></code></strong> ('th' сокращение от 'table header'). Он работает в точности как <code>&lt;td&gt;</code>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своём HTML все элементы <code>&lt;td&gt;</code>, содержащие заголовки, на элементы <code>&lt;th&gt;</code>.</li>
 <li>Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.</li>
</ol>

<div class="note">
<p><strong>Примечание</strong>: Законченный пример можно найти на <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> в GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">посмотрите живой пример</a>).</p>
</div>

<h3 id="Для_чего_нужны_заголовки">Для чего нужны заголовки?</h3>

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

<div class="note">
<p><strong>Примечание</strong>: По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.</p>
</div>

<p>Заголовки дают дополнительное преимущество — вместе с атрибутом <code>scope</code> (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно</p>

<h2 id="Слияние_нескольких_строк_или_столбцов">Слияние нескольких строк или столбцов</h2>

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

<p>Исходная разметка выглядит так:</p>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;Animals&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Hippopotamus&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Horse&lt;/th&gt;
    &lt;td&gt;Mare&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Stallion&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Crocodile&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Chicken&lt;/th&gt;
    &lt;td&gt;Cock&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Rooster&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

<p>Но результат не такой, как хотелось бы:</p>

<table>
 <tbody>
  <tr>
   <th>Animals</th>
  </tr>
  <tr>
   <th>Hippopotamus</th>
  </tr>
  <tr>
   <th>Horse</th>
   <td>Mare</td>
  </tr>
  <tr>
   <td>Stallion</td>
  </tr>
  <tr>
   <th>Crocodile</th>
  </tr>
  <tr>
   <th>Chicken</th>
   <td>Cock</td>
  </tr>
  <tr>
   <td>Rooster</td>
  </tr>
 </tbody>
</table>

<p>Нужно, чтобы  "Animals", "Hippopotamus" и "Crocodile" распространялись на два столбца, а "Horse" и "Chicken" - на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты <code>colspan</code> <code>и rowspan</code>, которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, <code>colspan="2"</code> распространяет ячейку на два столбца.</p>

<p>Воспользуемся <code>colspan</code> и <code>rowspan</code> чтобы улучшить таблицу.</p>

<ol>
 <li>Сначала создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.</li>
 <li>Затем используйте атрибут <code>colspan</code> чтобы распространить "Animals", "Hippopotamus" и "Crocodile" на два столбца.</li>
 <li>Наконец, используйте атрибут <code>rowspan</code> чтобы распространить  "Horse" и "Chicken" на две строки.</li>
 <li>Сохраните код и откройте его в браузере, чтобы увидеть улучшения.</li>
</ol>

<div class="note">
<p><strong>Примечание</strong>: Законченный пример можно посмотреть в <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> на GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">живой пример</a>).</p>
</div>

<table id="tabular" style="background-color: white;">
</table>

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

<p>И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы  <strong><code><a href="/en-US/docs/Web/HTML/Element/col">&lt;col&gt;</a></code></strong> и <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code></strong>. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде {{cssxref(":nth-child()")}} было бы слишком утомительно.</p>

<p>Возьмём простой пример:</p>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;Data 1&lt;/th&gt;
    &lt;th style="background-color: yellow"&gt;Data 2&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Calcutta&lt;/td&gt;
    &lt;td style="background-color: yellow"&gt;Orange&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Robots&lt;/td&gt;
    &lt;td style="background-color: yellow"&gt;Jazz&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

<p>Что даёт нам:</p>

<table>
 <tbody>
  <tr>
   <th>Data 1</th>
   <th style="background-color: yellow;">Data 2</th>
  </tr>
  <tr>
   <td>Calcutta</td>
   <td style="background-color: yellow;">Orange</td>
  </tr>
  <tr>
   <td>Robots</td>
   <td style="background-color: yellow;">Jazz</td>
  </tr>
 </tbody>
</table>

<p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить <code>class</code> на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code>&lt;col&gt;</code>. <code>Элемент &lt;col&gt;</code> задаётся в контейнере <code>&lt;colgroup&gt;</code> сразу же за открывающим тегом <code>&lt;table&gt;</code>. Эффект, который мы видели выше, можно задать так:</p>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;colgroup&gt;
    &lt;col&gt;
    &lt;col style="background-color: yellow"&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;Data 1&lt;/th&gt;
    &lt;th&gt;Data 2&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Calcutta&lt;/td&gt;
    &lt;td&gt;Orange&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Robots&lt;/td&gt;
    &lt;td&gt;Jazz&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

<p>Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <code>&lt;col&gt;</code> ввести необходимо — иначе к первому столбцу не будет применён стиль.</p>

<p>Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <code>&lt;col&gt;</code> с атрибутом span, таким образом:</p>

<pre class="brush: html notranslate">&lt;colgroup&gt;
  &lt;col style="background-color: yellow" span="2"&gt;
&lt;/colgroup&gt;</pre>

<p>Подобно <code>colspan</code> и <code>rowspan</code>, <code>span</code> принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.</p>

<h3 id="Упражнение_colgroup_и_col">Упражнение: colgroup и col</h3>

<p>Теперь попробуйте сами.</p>

<p>Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch),  кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподает.</p>

<table>
 <colgroup>
  <col>
  <col style="background-color: #97DB9A;">
  <col style="width: 42px;">
  <col style="background-color: #97DB9A;">
  <col style="background-color: #DCC48E; border: 4px solid #C1437A;">
  <col style="width: 42px;">
 </colgroup>
 <tbody>
  <tr>
   <td></td>
   <th>Mon</th>
   <th>Tues</th>
   <th>Wed</th>
   <th>Thurs</th>
   <th>Fri</th>
   <th>Sat</th>
   <th>Sun</th>
  </tr>
  <tr>
   <th>1st period</th>
   <td>English</td>
   <td></td>
   <td></td>
   <td>German</td>
   <td>Dutch</td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <th>2nd period</th>
   <td>English</td>
   <td>English</td>
   <td></td>
   <td>German</td>
   <td>Dutch</td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <th>3rd period</th>
   <td></td>
   <td>German</td>
   <td></td>
   <td>German</td>
   <td>Dutch</td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <th>4th period</th>
   <td></td>
   <td>English</td>
   <td></td>
   <td>English</td>
   <td>Dutch</td>
   <td></td>
   <td></td>
  </tr>
 </tbody>
</table>

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

<ol>
 <li>Сначала создайте локальную копию файла <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> в новой папке на вашем компьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.</li>
 <li>Добавьте элемент <code>&lt;colgroup&gt;</code> вверху таблицы, сразу же под тегом <code>&lt;table&gt;</code>, куда вы сможете вставлять элементы <code>&lt;col&gt;</code>.</li>
 <li>Первые два столбца надо оставить без стиля..</li>
 <li>Добавьте цвет фона для третьего столбца. Значением атрибута <code>style</code> будет  <code>background-color:#97DB9A;</code></li>
 <li>Задайте ширину для четвёртого столбца. <code>Значением атрибута style</code> будет <code>width: 42px;</code></li>
 <li>Добавьте цвет фона для пятого столбца. Значением атрибута <code>style</code> будет <code>background-color: #97DB9A;</code></li>
 <li>Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута <code>style</code> будут: <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li>
 <li>Последние два дня выходные; значением атрибута style <code>будет width: 42px;</code></li>
</ol>

<p>Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">посмотрите живой пример</a>).</p>

<h2 id="Итог">Итог</h2>

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

<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>