diff options
author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-03-15 14:29:50 +0300 |
---|---|---|
committer | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-03-15 14:29:50 +0300 |
commit | 55ddd4454665a3c66e3d5b186bc79048468d36e7 (patch) | |
tree | 5391f1ae01bbcd484387bbc2373492ac9bc89dbc /files/ru/learn/html/tables | |
parent | 08dc1a1e60063705ccefc1eb4ef0a17d1ddf196b (diff) | |
download | translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.gz translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.bz2 translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.zip |
Auto fixes
Diffstat (limited to 'files/ru/learn/html/tables')
-rw-r--r-- | files/ru/learn/html/tables/advanced/index.html | 14 | ||||
-rw-r--r-- | files/ru/learn/html/tables/basics/index.html | 8 | ||||
-rw-r--r-- | files/ru/learn/html/tables/structuring_planet_data/index.html | 10 |
3 files changed, 16 insertions, 16 deletions
diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index 6314fedda1..e578557eb7 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -46,7 +46,7 @@ translation_of: Learn/HTML/Tables/Advanced <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> - <li>Добвьте подходящий заголовок к таблице.</li> + <li>Добавьте подходящий заголовок к таблице.</li> <li>Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.</li> </ol> @@ -58,18 +58,18 @@ translation_of: Learn/HTML/Tables/Advanced <p>Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и {{htmlelement("tbody")}}, которые позволяют вам разметить header, footer и body секции таблицы.</p> -<p>Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отбражаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.</p> +<p>Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.</p> <p>Использование:</p> <ul> <li>Элементом <code><thead></code> нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете {{htmlelement("col")}}/{{htmlelement("colgroup")}} элемент, тогда заголовок должен находиться ниже его.</li> - <li>Элементом <code><tfoot></code> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отбражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер все равно отобразит его внизу таблицы).</li> + <li>Элементом <code><tfoot></code> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер все равно отобразит его внизу таблицы).</li> <li>Элементом <code><tbody></code> необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).</li> </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> @@ -80,7 +80,7 @@ translation_of: Learn/HTML/Tables/Advanced <li>В первую очередь, сделайте копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> в новой папке.</li> <li>Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.</li> <li>Поместите очевидную строку заголовка внутрь <code><thead></code> элемента, строку "SUM" внутрь <code><tfoot></code> элемента и оставшийся контент внутрь <code><tbody></code> элемента.</li> - <li>Сохраните, презагрузите и вы увидите, что добавление элемента <code><tfoot></code> привело к тому, что строка "SUM" опустилась к нижней части таблицы.</li> + <li>Сохраните, перезагрузите и вы увидите, что добавление элемента <code><tfoot></code> привело к тому, что строка "SUM" опустилась к нижней части таблицы.</li> <li>Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.</li> <li>Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <code><head></code> вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода: <pre class="brush: css notranslate">tbody { @@ -349,13 +349,13 @@ tfoot { </tbody> </table> -<p>Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации програмными.</p> +<p>Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.</p> <p>В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.</p> <h3 class="attTitle" id="Использование_заголовков_столбцов_и_строк">Использование заголовков столбцов и строк</h3> -<p>Скринридеры будут определять все заголовки и использовать их создавая програмные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.</p> +<p>Скринридеры будут определять все заголовки и использовать их создавая программные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.</p> <p>Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements">Добавление заголовков с помощью элемента <th></a>.</p> diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index a393a80a84..15f766186a 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -117,10 +117,10 @@ 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>: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходими принимать дополнительные меры.</li> + <li><strong>Таблицы не реагируют автоматически на тип устройства</strong>: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.</li> </ol> -<h2 id="Упражение_Ваша_первая_таблица">Упражение: Ваша первая таблица</h2> +<h2 id="Упражнение_Ваша_первая_таблица">Упражнение: Ваша первая таблица</h2> <p>Итак, мы уже достаточно говорили о теории, теперь возьмем конкретный пример и построим таблицу.</p> @@ -290,7 +290,7 @@ translation_of: Learn/HTML/Tables/Basics <h2 id="Слияние_нескольких_строк_или_столбцов">Слияние нескольких строк или столбцов</h2> -<p>Иногда нам нужно, чтобы ячейки распротранялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p> +<p>Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p> <p>Исходная разметка выглядит так:</p> @@ -511,7 +511,7 @@ translation_of: Learn/HTML/Tables/Basics <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>Сначала создайте локальную копию файла <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> 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 ef5ff547c0..b7e8ab227d 100644 --- a/files/ru/learn/html/tables/structuring_planet_data/index.html +++ b/files/ru/learn/html/tables/structuring_planet_data/index.html @@ -31,14 +31,14 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data <p>Для того, чтобы начать аттестацию, скопируйте <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>, и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> в новую директорию на вашем компьютере.</p> <div class="note"> -<p><strong>Примечание</strong>: В качестве альтарнативы, вы можете использовать такие сайты, как <a class="external external-icon" href="https://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a>, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <code><script></code>/<code><style></code> элементы в HTML страницу.</p> +<p><strong>Примечание</strong>: В качестве альтернативы, вы можете использовать такие сайты, как <a class="external external-icon" href="https://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a>, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <code><script></code>/<code><style></code> элементы в HTML страницу.</p> </div> <h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> <p>Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.</p> -<p>Готовая таблица должна выглядить так:</p> +<p>Готовая таблица должна выглядеть так:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> @@ -49,12 +49,12 @@ 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>Откройте вашу копию <code>blank-template.html</code> , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.</li> <li>Добавьте предоставленную подпись к вашей таблице ("Сaption" в конце <code>planets-data.txt</code>).</li> - <li>Добавьте строку в заголовок таблицы, содержащуюю все заголовки столбцов.</li> + <li>Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.</li> <li>Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть <em>семантически</em>.</li> <li>Убедитесь, что весь контент помещен в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li> <li>Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.</li> |