diff options
author | Alexey Istomin <webistomin@gmail.com> | 2021-03-20 18:37:44 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-20 18:37:44 +0300 |
commit | 841aae260382e2bf5ebb44d765d8c7301d27caab (patch) | |
tree | 81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/learn/html/tables | |
parent | 730fea852ff827ca034fe17c84288c95d270ec92 (diff) | |
download | translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2 translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip |
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter
* docs(ru): resolve conflicts
* refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/learn/html/tables')
-rw-r--r-- | files/ru/learn/html/tables/advanced/index.html | 24 | ||||
-rw-r--r-- | files/ru/learn/html/tables/basics/index.html | 46 | ||||
-rw-r--r-- | files/ru/learn/html/tables/index.html | 2 | ||||
-rw-r--r-- | files/ru/learn/html/tables/structuring_planet_data/index.html | 8 |
4 files changed, 40 insertions, 40 deletions
diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index e578557eb7..a98631d064 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -7,7 +7,7 @@ translation_of: Learn/HTML/Tables/Advanced <div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> -<p class="summary">Во второй статье этого модуля мы рассматриваем еще несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.</p> +<p class="summary">Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.</p> <table class="learn-box standard-table"> <tbody> @@ -24,7 +24,7 @@ translation_of: Learn/HTML/Tables/Advanced <h2 id="Добавление_заголовка_к_таблице_с_помощью_<caption>">Добавление заголовка к таблице с помощью <caption></h2> -<p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причем вам нужно поместить его сразу после открытия тега <code><table></code>.</p> +<p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причём вам нужно поместить его сразу после открытия тега <code><table></code>.</p> <pre class="brush: html notranslate"><table> <caption>Dinosaurs in the Jurassic period</caption> @@ -42,7 +42,7 @@ translation_of: Learn/HTML/Tables/Advanced <h3 id="Упражнение_Добавление_заголовка">Упражнение: Добавление заголовка</h3> -<p>Давайте попробуем это, вернемся к примеру который мы ранее встретили в прошлой статье.</p> +<p>Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.</p> <ol> <li>Откройте расписание занятий школьного учителя по языку в конце статьи <a href="/ru/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">HTML таблицы основы</a>, или сделайте копию нашего <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> файла.</li> @@ -69,7 +69,7 @@ translation_of: Learn/HTML/Tables/Advanced </ul> <div class="note"> -<p><strong>Примечание</strong>: <code><tbody></code> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <code><tbody></code> и посмотрите HTML код в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это дает больше контроля над структурой таблицы и стилем.</p> +<p><strong>Примечание</strong>: <code><tbody></code> всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <code><tbody></code> и посмотрите HTML код в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.</p> </div> <h3 id="Упражнение_Добавление_структуры_таблицы">Упражнение: Добавление структуры таблицы</h3> @@ -93,11 +93,11 @@ tfoot { } </pre> </li> - <li>Сохраните, обновите и вы увидите результат. Если <code><tbody></code> и <code><tfoot></code> элементы не были установлены, то вам придется писать много сложных селекторов/правил для применения одного и того же стиля.</li> + <li>Сохраните, обновите и вы увидите результат. Если <code><tbody></code> и <code><tfoot></code> элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.</li> </ol> <div class="note"> -<p><strong>Примечание</strong>: Мы не ожидаем что сейчас вы полностью поймете CSS. Вы узнаете больше когда пройдете наши CSS курсы (например, <a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a> это хорошее место для начала; у нас также есть статья конкретно о <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">стилизации таблиц</a>).</p> +<p><strong>Примечание</strong>: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, <a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a> это хорошее место для начала; у нас также есть статья конкретно о <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">стилизации таблиц</a>).</p> </div> <p>Ваша готовая таблица должна выглядеть примерно так:</p> @@ -284,7 +284,7 @@ tfoot { <h2 id="Таблицы_для_пользователей_с_ограниченными_возможностями">Таблицы для пользователей с ограниченными возможностями</h2> -<p>Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который дает нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и ее заголовками колонок и/или строк.</p> +<p>Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.</p> <table> <caption>Items Sold August 2016</caption> @@ -373,7 +373,7 @@ tfoot { </tr> </thead></pre> -<p>И у каждой строки может быть определен заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p> +<p>И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p> <pre class="brush: html notranslate"><tr> <th scope="row">Haircut</th> @@ -385,7 +385,7 @@ tfoot { <p>Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.</p> -<p>Атрибут <code>scope</code> имеет еще два возможных значения — <code>colgroup</code> и <code>rowgroup</code>. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<code><th></code>), но "Clothes" заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут <code>scope="colgroup"</code>, тогда как другие получат атрибут <code>scope="col"</code>.</p> +<p>Атрибут <code>scope</code> имеет ещё два возможных значения — <code>colgroup</code> и <code>rowgroup</code>. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<code><th></code>), но "Clothes" заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут <code>scope="colgroup"</code>, тогда как другие получат атрибут <code>scope="col"</code>.</p> <h3 class="attTitle" id="Атрибуты_id_и_headers">Атрибуты id и headers</h3> @@ -393,12 +393,12 @@ tfoot { <ol> <li>Вы устанавливаете уникальный <code>id</code> для каждого<code><th></code> элемента.</li> - <li>Вы устанавливаете атрибут <code>headers</code> для каждого <code><td></code> элемента. Каждый <code>headers</code> атрибут должен содержать список всех <code>id</code> , разделенный пробелами, ко всем <code><th></code> элементам которые действуют как заголовок для этой ячейки.</li> + <li>Вы устанавливаете атрибут <code>headers</code> для каждого <code><td></code> элемента. Каждый <code>headers</code> атрибут должен содержать список всех <code>id</code> , разделённый пробелами, ко всем <code><th></code> элементам которые действуют как заголовок для этой ячейки.</li> </ol> <p>Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.</p> -<p>Вернемся к нашему примеру с расчетом затрат, его можно переписать следующим образом:</p> +<p>Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:</p> <pre class="brush: html notranslate"><thead> <tr> @@ -440,7 +440,7 @@ tfoot { <h2 id="Заключение">Заключение</h2> -<p>Есть еще некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали все что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling Tables</a>.</p> +<p>Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали все что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling Tables</a>.</p> <div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index 15f766186a..08a1767593 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -30,7 +30,7 @@ translation_of: Learn/HTML/Tables/Basics <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>Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 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> @@ -38,7 +38,7 @@ translation_of: Learn/HTML/Tables/Basics <h3 id="Как_работает_таблица">Как работает таблица?</h3> -<p>Смысл таблицы в том, что она жесткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведенную ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.</p> +<p>Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.</p> <table> <caption>Personal pronouns</caption> @@ -68,7 +68,7 @@ translation_of: Learn/HTML/Tables/Basics <tr> <th class="symbol" scope="row">♀</th> <td>она</td> - <td>ее</td> + <td>её</td> </tr> <tr> <th class="symbol" scope="row">o</th> @@ -94,18 +94,18 @@ translation_of: Learn/HTML/Tables/Basics </tbody> </table> -<p>Если правильно представить таблицу HTML, интерпретировать ее данные смогут даже люди, имеющие проблемы со зрением.</p> +<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><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> +<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> @@ -116,21 +116,21 @@ translation_of: Learn/HTML/Tables/Basics <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>: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.</li> <li><strong>Таблицы не реагируют автоматически на тип устройства</strong>: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.</li> </ol> <h2 id="Упражнение_Ваша_первая_таблица">Упражнение: Ваша первая таблица</h2> -<p>Итак, мы уже достаточно говорили о теории, теперь возьмем конкретный пример и построим таблицу.</p> +<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 следующее: + <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>Чтобы получить строку из четырех ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: + <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> @@ -138,7 +138,7 @@ translation_of: Learn/HTML/Tables/Basics </li> </ol> -<p>Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <code><td> </code>создает отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.</p> +<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> @@ -152,7 +152,7 @@ translation_of: Learn/HTML/Tables/Basics <td>I'm your fourth cell.</td> </tr></pre> </li> - <li>Теперь, когда одна строка уже есть, добавим еще — каждую строку надо вложить в дополнительный элемент <code><tr></code>, а каждая ячейка должна быть внутри <code>элемента <td></code>.</li> + <li>Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент <code><tr></code>, а каждая ячейка должна быть внутри <code>элемента <td></code>.</li> </ol> <p>В результате получится таблица, которая будет выглядеть примерно так:</p> @@ -180,7 +180,7 @@ translation_of: Learn/HTML/Tables/Basics <h2 id="Добавление_заголовков_с_помощью_элементов_<th>">Добавление заголовков с помощью элементов <th></h2> -<p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмем следующий пример. Сначала исходный код:</p> +<p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:</p> <pre class="brush: html notranslate"><table> <tr> @@ -262,7 +262,7 @@ translation_of: Learn/HTML/Tables/Basics </tbody> </table> -<p>Проблема в том, что, хотя вы и можете представить, о чем идет речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.</p> +<p>Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.</p> <h3 id="Упражнение_заголовки">Упражнение: заголовки</h3> @@ -270,7 +270,7 @@ translation_of: Learn/HTML/Tables/Basics <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>Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <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> @@ -283,14 +283,14 @@ translation_of: Learn/HTML/Tables/Basics <p>Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.</p> <div class="note"> -<p><strong>Примечание</strong>: По умолчанию к заголовкам таблицы применяется определенный стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.</p> +<p><strong>Примечание</strong>: По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.</p> </div> <p>Заголовки дают дополнительное преимущество — вместе с атрибутом <code>scope</code> (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно</p> <h2 id="Слияние_нескольких_строк_или_столбцов">Слияние нескольких строк или столбцов</h2> -<p>Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p> +<p>Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмём простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p> <p>Исходная разметка выглядит так:</p> @@ -372,7 +372,7 @@ translation_of: Learn/HTML/Tables/Basics <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> +<p>Возьмём простой пример:</p> <pre class="brush: html notranslate"><table> <tr> @@ -389,7 +389,7 @@ translation_of: Learn/HTML/Tables/Basics </tr> </table></pre> -<p>Что дает нам:</p> +<p>Что даёт нам:</p> <table> <tbody> @@ -408,7 +408,7 @@ translation_of: Learn/HTML/Tables/Basics </tbody> </table> -<p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трех ячеек в столбце (в реальном проекте, возможно, придется вводить <code>class</code> на всех трех и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code><col></code>. <code>Элемент <col></code> задается в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> +<p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить <code>class</code> на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code><col></code>. <code>Элемент <col></code> задаётся в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> <pre class="brush: html notranslate"><table> <colgroup> @@ -429,7 +429,7 @@ translation_of: Learn/HTML/Tables/Basics </tr> </table></pre> -<p>Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <code><col></code> ввести необходимо — иначе к первому столбцу не будет применен стиль.</p> +<p>Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <code><col></code> ввести необходимо — иначе к первому столбцу не будет применён стиль.</p> <p>Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <code><col></code> с атрибутом span, таким образом:</p> @@ -515,9 +515,9 @@ translation_of: Learn/HTML/Tables/Basics <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>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>Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута <code>style</code> будут: <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> <li>Последние два дня выходные; значением атрибута style <code>будет width: 42px;</code></li> </ol> diff --git a/files/ru/learn/html/tables/index.html b/files/ru/learn/html/tables/index.html index 609f1b36fe..3f3d4e5cb8 100644 --- a/files/ru/learn/html/tables/index.html +++ b/files/ru/learn/html/tables/index.html @@ -5,7 +5,7 @@ translation_of: Learn/HTML/Tables --- <div>{{LearnSidebar}}</div> -<p class="summary">Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (<a href="/ru-RU/docs/Learn/CSS">CSS</a>) HTML с легкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.</p> +<p class="summary">Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (<a href="/ru-RU/docs/Learn/CSS">CSS</a>) HTML с лёгкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.</p> <h2 id="Необходимые_условия">Необходимые условия</h2> diff --git a/files/ru/learn/html/tables/structuring_planet_data/index.html b/files/ru/learn/html/tables/structuring_planet_data/index.html index 85c3d9dc91..78c6a63a01 100644 --- a/files/ru/learn/html/tables/structuring_planet_data/index.html +++ b/files/ru/learn/html/tables/structuring_planet_data/index.html @@ -36,7 +36,7 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data <h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> -<p>Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.</p> +<p>Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведённым инструкциям.</p> <p>Готовая таблица должна выглядеть так:</p> @@ -49,16 +49,16 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data <h2 id="Шаги_для_завершения">Шаги для завершения</h2> -<p>Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле <code>planets-data.txt</code>. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.</p> +<p>Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле <code>planets-data.txt</code>. Если у вас возникли проблемы с визуализацией данных, посмотрите приведённый выше пример или попробуйте нарисовать диаграмму.</p> <ol> <li>Откройте вашу копию <code>blank-template.html</code> , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.</li> <li>Добавьте предоставленную подпись к вашей таблице ("Caption" в конце <code>planets-data.txt</code>).</li> <li>Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.</li> <li>Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть <em>семантически</em>.</li> - <li>Убедитесь, что весь контент помещен в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li> + <li>Убедитесь, что весь контент помещён в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li> <li>Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.</li> - <li>Добавьте черную рамку вокруг столбца, который содержит все заголовки строк с именами планет.</li> + <li>Добавьте чёрную рамку вокруг столбца, который содержит все заголовки строк с именами планет.</li> </ol> <h2 id="Подсказки_и_советы">Подсказки и советы</h2> |