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 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'files/ru/learn/html/tables/advanced') 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>.
    
 
-- 
cgit v1.2.3-54-g00ecf