From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- files/ru/learn/html/tables/advanced/index.html | 14 +++++++------- files/ru/learn/html/tables/basics/index.html | 8 ++++---- .../learn/html/tables/structuring_planet_data/index.html | 10 +++++----- 3 files changed, 16 insertions(+), 16 deletions(-) (limited to 'files/ru/learn/html/tables') 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
  1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
    2. -
  2. Добвьте подходящий заголовок к таблице.
    3. +
  3. Добавьте подходящий заголовок к таблице.
  4. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.
@@ -58,18 +58,18 @@ translation_of: Learn/HTML/Tables/Advanced

Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ  сделать это используя {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и {{htmlelement("tbody")}}, которые позволяют вам разметить header, footer и body секции таблицы.

-

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отбражаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

+

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

Использование:

-

Примечание: <tbody> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включениии, но вы должны, потому что это дает больше контроля над структурой таблицы и стилем.

+

Примечание: <tbody> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это дает больше контроля над структурой таблицы и стилем.

Упражнение: Добавление структуры таблицы

@@ -80,7 +80,7 @@ translation_of: Learn/HTML/Tables/Advanced
  • В первую очередь,  сделайте копию spending-record.html и minimal-table.css в новой папке.
  • Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
  • Поместите очевидную строку заголовка внутрь <thead> элемента, строку "SUM" внутрь <tfoot> элемента и оставшийся контент внутрь <tbody> элемента.
    • -
  • Сохраните, презагрузите и вы увидите, что добавление элемента <tfoot> привело к тому,  что строка "SUM" опустилась к нижней части таблицы.
    • +
  • Сохраните, перезагрузите и вы увидите, что добавление элемента <tfoot> привело к тому,  что строка "SUM" опустилась к нижней части таблицы.
  • Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.
  • Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <head> вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода: 
    tbody {
@@ -349,13 +349,13 @@ tfoot {
  
 
 
-
    Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации програмными.
    
+
    Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.
    
 
 
    В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.
    
 
 
    Использование заголовков столбцов и строк
    
 
-
    Скринридеры будут определять все заголовки и использовать их создавая програмные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.
    
+
    Скринридеры будут определять все заголовки и использовать их создавая программные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.
    
 
 
    Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке Добавление заголовков с помощью элемента <th>.
    
 
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
 
      
  
    1. Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
      2. 
  
    2. Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц дает более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
      3. 
- 
    3. Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходими принимать дополнительные меры.
      4. 
+ 
    4. Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.
      5. 
 
    
 
-
    Упражение: Ваша первая таблица
    
+
    Упражнение: Ваша первая таблица
    
 
 
    Итак, мы уже достаточно говорили о теории, теперь возьмем конкретный пример и построим таблицу.
    
 
@@ -290,7 +290,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
    Слияние нескольких строк или столбцов
    
 
-
    Иногда нам нужно, чтобы ячейки распротранялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
    
+
    Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
    
 
 
    Исходная разметка выглядит так:
    
 
@@ -511,7 +511,7 @@ translation_of: Learn/HTML/Tables/Basics
 
    Заново создайте таблицу, проделав указанные ниже действия.
    
 
 
      
- 
    1. Сначала создайте локальную копию файла timetable.html в новой папке на вашем копьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
      2. 
+ 
    2. Сначала создайте локальную копию файла timetable.html в новой папке на вашем компьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
      3. 
  
    3. Добавьте элемент <colgroup> вверху таблицы, сразу же под тегом <table>, куда вы сможете вставлять элементы <col>.
      4. 
  
    4. Первые два столбца надо оставить без стиля..
      5. 
  
    5. Добавьте цвет фона для третьего столбца. Значением атрибута style будет  background-color:#97DB9A;
      6. 
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
 
      Для того, чтобы начать аттестацию, скопируйте blank-template.html, minimal-table.css, и planets-data.txt в новую директорию на вашем компьютере.
      
 
 
      
-
      Примечание: В качестве альтарнативы, вы можете использовать такие сайты, как  JSBin или Glitch, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <script>/<style> элементы в HTML страницу.
      
+
      Примечание: В качестве альтернативы, вы можете использовать такие сайты, как  JSBin или Glitch, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <script>/<style> элементы в HTML страницу.
      
 
      
 
 
      Краткое описание проекта
      
 
 
      Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.
      
 
-
      Готовая таблица должна выглядить так:
      
+
      Готовая таблица должна выглядеть так:
      
 
 
      
 
@@ -49,12 +49,12 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data
 
 
      Шаги для завершения
      
 
-
      Следующие шаги опистывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле planets-data.txt. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.
      
+
      Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле planets-data.txt. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.
      
 
 
        
- 
      1. Откройте вашу копию blank-template.html , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтинул (footer) для этого примера.
        2. 
+ 
      2. Откройте вашу копию blank-template.html , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.
        3. 
  
      3. Добавьте предоставленную подпись к вашей таблице ("Сaption" в конце planets-data.txt).
        4. 
- 
      4. Добавьте строку в заголовок таблицы, содержащуюю все заголовки столбцов.
        5. 
+ 
      5. Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.
        6. 
  
      6. Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть семантически.
        7. 
  
      7. Убедитесь, что весь контент помещен в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.
        8. 
  
      8. Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.
        9. 
-- 
cgit v1.2.3-54-g00ecf