aboutsummaryrefslogtreecommitdiff
path: root/files/ru/learn/html/tables
diff options
context:
space:
mode:
authorAlexey Pyltsyn <lex61rus@gmail.com>2021-03-15 14:29:50 +0300
committerAlexey Pyltsyn <lex61rus@gmail.com>2021-03-15 14:29:50 +0300
commit55ddd4454665a3c66e3d5b186bc79048468d36e7 (patch)
tree5391f1ae01bbcd484387bbc2373492ac9bc89dbc /files/ru/learn/html/tables
parent08dc1a1e60063705ccefc1eb4ef0a17d1ddf196b (diff)
downloadtranslated-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.html14
-rw-r--r--files/ru/learn/html/tables/basics/index.html8
-rw-r--r--files/ru/learn/html/tables/structuring_planet_data/index.html10
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>&lt;thead&gt;</code> нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете {{htmlelement("col")}}/{{htmlelement("colgroup")}} элемент, тогда заголовок должен находиться ниже его.</li>
- <li>Элементом <code>&lt;tfoot&gt;</code> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отбражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер все равно отобразит его внизу таблицы).</li>
+ <li>Элементом <code>&lt;tfoot&gt;</code> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер все равно отобразит его внизу таблицы).</li>
<li>Элементом <code>&lt;tbody&gt;</code> необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).</li>
</ul>
<div class="note">
-<p><strong>Примечание</strong>: <code>&lt;tbody&gt;</code> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <code>&lt;tbody&gt;</code> и посмотрите HTML код в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включениии, но вы должны, потому что это дает больше контроля над структурой таблицы и стилем.</p>
+<p><strong>Примечание</strong>: <code>&lt;tbody&gt;</code> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <code>&lt;tbody&gt;</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>&lt;thead&gt;</code> элемента, строку "SUM" внутрь <code>&lt;tfoot&gt;</code> элемента и оставшийся контент внутрь <code>&lt;tbody&gt;</code> элемента.</li>
- <li>Сохраните, презагрузите и вы увидите, что добавление элемента <code>&lt;tfoot&gt;</code> привело к тому,  что строка "SUM" опустилась к нижней части таблицы.</li>
+ <li>Сохраните, перезагрузите и вы увидите, что добавление элемента <code>&lt;tfoot&gt;</code> привело к тому,  что строка "SUM" опустилась к нижней части таблицы.</li>
<li>Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.</li>
<li>Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <code>&lt;head&gt;</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">Добавление заголовков с помощью элемента &lt;th&gt;</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>&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>
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>&lt;script&gt;</code>/<code>&lt;style&gt;</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>&lt;script&gt;</code>/<code>&lt;style&gt;</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>