diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/learn/html/tables/basics | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/ru/learn/html/tables/basics')
| -rw-r--r-- | files/ru/learn/html/tables/basics/index.html | 530 |
1 files changed, 530 insertions, 0 deletions
diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..a393a80a84 --- /dev/null +++ b/files/ru/learn/html/tables/basics/index.html @@ -0,0 +1,530 @@ +--- +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"><table></table></a></code></strong>. Добавьте их в тело HTML.</li> + <li>Самым маленьким контейнером в таблице является ячейка, она создается элементом <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + </li> + <li>Чтобы получить строку из четырех ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: + <pre class="brush: html notranslate"><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></pre> + </li> +</ol> + +<p>Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <code><td> </code>создает отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.</p> + +<p>Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/tr"><tr></a></code></strong> ('tr' - сокращение от 'table row'). Попробуем, как это получится.</p> + +<ol> + <li>Поместите четыре уже созданных ячейки между тегами <code><tr></code> как здесь показано: + + <pre class="brush: html notranslate"><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></pre> + </li> + <li>Теперь, когда одна строка уже есть, добавим еще — каждую строку надо вложить в дополнительный элемент <code><tr></code>, а каждая ячейка должна быть внутри <code>элемента <td></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="Добавление_заголовков_с_помощью_элементов_<th>">Добавление заголовков с помощью элементов <th></h2> + +<p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмем следующий пример. Сначала исходный код:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>&nbsp;</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> +</table></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"><th></a></code></strong> ('th' сокращение от 'table header'). Он работает в точности как <code><td></code>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своем HTML все элементы <code><td></code>, содержащие заголовки, на элементы <code><th></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"><table> + <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> +</table></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"><col></a></code></strong> и <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong>. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде {{cssxref(":nth-child()")}} было бы слишком утомительно.</p> + +<p>Возьмем простой пример:</p> + +<pre class="brush: html notranslate"><table> + <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> +</table></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><col></code>. <code>Элемент <col></code> задается в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> + +<pre class="brush: html notranslate"><table> + <colgroup> + <col> + <col style="background-color: yellow"> + </colgroup> + <tr> + <th>Data 1</th> + <th>Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td>Orange</td> + </tr> + <tr> + <td>Robots</td> + <td>Jazz</td> + </tr> +</table></pre> + +<p>Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <code><col></code> ввести необходимо — иначе к первому столбцу не будет применен стиль.</p> + +<p>Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <code><col></code> с атрибутом span, таким образом:</p> + +<pre class="brush: html notranslate"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></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><colgroup></code> вверху таблицы, сразу же под тегом <code><table></code>, куда вы сможете вставлять элементы <code><col></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> |