From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/learn/html/tables/advanced/index.html | 455 ++++++++++++++++++ files/ru/learn/html/tables/basics/index.html | 530 +++++++++++++++++++++ files/ru/learn/html/tables/index.html | 34 ++ .../html/tables/structuring_planet_data/index.html | 96 ++++ 4 files changed, 1115 insertions(+) create mode 100644 files/ru/learn/html/tables/advanced/index.html create mode 100644 files/ru/learn/html/tables/basics/index.html create mode 100644 files/ru/learn/html/tables/index.html create mode 100644 files/ru/learn/html/tables/structuring_planet_data/index.html (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 new file mode 100644 index 0000000000..6314fedda1 --- /dev/null +++ b/files/ru/learn/html/tables/advanced/index.html @@ -0,0 +1,455 @@ +--- +title: HTML таблицы продвинутые возможности и доступность +slug: Learn/HTML/Tables/Advanced +translation_of: Learn/HTML/Tables/Advanced +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +

Во второй статье этого модуля мы рассматриваем еще несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

+ + + + + + + + + + + + +
Необходимые знания:Базовый HTML (Введение в HTML).
Цель:Изучить более продвинутые возможности HTML таблиц и их доступность.
+ +

Добавление заголовка к таблице с помощью <caption>

+ +

Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь  элемента {{htmlelement("table")}}. Причем вам нужно поместить его сразу после открытия тега <table>.

+ +
<table>
+  <caption>Dinosaurs in the Jurassic period</caption>
+
+  ...
+</table>
+ +

Как можно понять из короткого примера выше, заголовок отражает в себе описание контента таблицы. Это полезно для всех читателей просматривающих страницу и желающих получить краткое представление от том полезна ли для них таблица,  что особенно важно для слепых пользователей. Вместо того чтобы читать содержимое множества ячеек чтобы понять о чем таблица, он или она могут полагаться на заголовок и принимать решение читать ли таблицу более подробно.

+ +

Заголовок помещают сразу после тега <table>.

+ +
+

Примечание: Атрибут {{htmlattrxref("summary","table")}} также может быть использован в <table> элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать <caption> элемент, так как summary {{glossary("deprecated")}} в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).

+
+ +

Упражнение: Добавление заголовка

+ +

Давайте попробуем это, вернемся к примеру который мы ранее встретили в прошлой статье.

+ +
    +
  1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
    2. +
  2. Добвьте подходящий заголовок к таблице.
    3. +
  3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.
    4. +
+ +
+

Примечание: Этот пример можно найти на GitHub по ссылке timetable-caption.html (живой пример).

+
+ +

Добавление структуры с помощью <thead>, <tfoot> и <tbody>

+ +

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

+ +

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

+ +

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

+ + + +
+

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

+
+ +

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

+ +

Давайте используем эти новые элементы.

+ +
    +
  1. В первую очередь,  сделайте копию spending-record.html и minimal-table.css в новой папке.
    2. +
  2. Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
    3. +
  3. Поместите очевидную строку заголовка внутрь <thead> элемента, строку "SUM" внутрь <tfoot> элемента и оставшийся контент внутрь <tbody> элемента.
    4. +
  4. Сохраните, презагрузите и вы увидите, что добавление элемента <tfoot> привело к тому,  что строка "SUM" опустилась к нижней части таблицы.
    5. +
  5. Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.
    6. +
  6. Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <head> вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода: + 
    tbody {
+  font-size: 90%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+
    +
    7. +
  7. Сохраните, обновите и вы увидите результат. Если <tbody> и <tfoot> элементы не были установлены, то вам придется писать много сложных селекторов/правил для применения одного и того же стиля.
    8. +
+ +
+

Примечание: Мы не ожидаем что сейчас вы полностью поймете CSS. Вы узнаете больше когда пройдете наши CSS курсы (например, Вступление в CSS это хорошее место для начала; у нас также есть статья конкретно о стилизации таблиц).

+
+ +

Ваша готовая таблица должна выглядеть примерно так:

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 300) }}

+ +
+

Примечание: Этот пример можно также найти на GitHub по ссылке spending-record-finished.html (живой пример).

+
+ +

Вложенные таблицы

+ +

В одну таблицу вкладывать другую таблицу возможно, если вы используете полную структуру включая элемент <table>. Это как правило не рекомендуется, так как делает разметку более запутанной и менее доступной для пользователей скринридеров, так в большинстве случаев вы можете просто вставить дополнительные ячейки/строки/столбцы в существующую таблицу. Однако, иногда это необходимо, например, если вы хотите легко импортировать контент из других источников.

+ +

Разметка простой вложенной таблицы:

+ +
<table id="table1">
+  <tr>
+    <th>title1</th>
+    <th>title2</th>
+    <th>title3</th>
+  </tr>
+  <tr>
+    <td id="nested">
+      <table id="table2">
+        <tr>
+          <td>cell1</td>
+          <td>cell2</td>
+          <td>cell3</td>
+        </tr>
+      </table>
+    </td>
+    <td>cell2</td>
+    <td>cell3</td>
+  </tr>
+  <tr>
+    <td>cell4</td>
+    <td>cell5</td>
+    <td>cell6</td>
+  </tr>
+</table>
+ +

Результат которого выглядит примерно так:

+ + + + + + + + + + + + + + + + + + + +
title1title2title3
+ + + + + + + + +
cell1cell2cell3
+ 		cell2cell3
cell4cell5cell6
+ +

Таблицы для пользователей с ограниченными возможностями

+ +

Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который дает нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и ее заголовками колонок и/или строк.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Items Sold August 2016
ClothesAccessories
TrousersSkirtsDressesBraceletsRings
BelgiumAntwerp5622437223
Gent4618506115
Brussels5127386928
The NetherlandsAmsterdam8934698538
Utrecht8012433619
+ +

Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации програмными.

+ +

В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.

+ +

Использование заголовков столбцов и строк

+ +

Скринридеры будут определять все заголовки и использовать их создавая програмные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.

+ +

Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке Добавление заголовков с помощью элемента <th>.

+ +

Атрибут scope

+ +

Новая тема в этой статье это атрибут {{htmlattrxref("scope","th")}}, который может быть добавлен к элементу <th> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:

+ +
<thead>
+  <tr>
+    <th scope="col">Purchase</th>
+    <th scope="col">Location</th>
+    <th scope="col">Date</th>
+    <th scope="col">Evaluation</th>
+    <th scope="col">Cost (€)</th>
+  </tr>
+</thead>
+ +

И у каждой строки может быть определен заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):

+ +
<tr>
+  <th scope="row">Haircut</th>
+  <td>Hairdresser</td>
+  <td>12/09</td>
+  <td>Great idea</td>
+  <td>30</td>
+</tr>
+ +

Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.

+ +

Атрибут scope имеет еще два возможных значения — colgroup и rowgroup. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<th>), но "Clothes"  заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут scope="colgroup", тогда как другие получат атрибут scope="col".

+ +

Атрибуты id и headers

+ +

Альтернатива атрибута scope это использование атрибутов {{htmlattrxref("id")}} и {{htmlattrxref("headers", "td")}} задавая ассоциации между заголовками и ячейками. Этот способ выглядит следующим образом:

+ +
    +
  1. Вы устанавливаете уникальный id для каждого<th> элемента.
    2. +
  2. Вы устанавливаете атрибут headers для каждого <td> элемента. Каждый headers атрибут должен содержать список всех id , разделенный пробелами, ко всем <th> элементам которые действуют как заголовок для этой ячейки.
    3. +
+ +

Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.

+ +

Вернемся к нашему примеру с расчетом затрат, его можно переписать следующим образом:

+ +
<thead>
+  <tr>
+    <th id="purchase">Purchase</th>
+    <th id="location">Location</th>
+    <th id="date">Date</th>
+    <th id="evaluation">Evaluation</th>
+    <th id="cost">Cost (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Haircut</th>
+  <td headers="location haircut">Hairdresser</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Great idea</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+ +
+

Примечание: Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует гораздо больше разметки и оставляет обширное пространство для ошибок.  Атрибута scope обычно достаточно для большинства таблиц.

+
+ +

Упражнение: играем со scope и headers

+ +
    +
  1. Для заключительного упражнения мы, вначале создадим копию items-sold.html и minimal-table.css в новой папке.
    2. +
  2. Теперь попробуем добавить соответствующий атрибут scope, который наиболее соответствует этой таблице.
    3. +
  3. И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты id и headers.
    4. +
+ +
+

Примечание: Вы можете проверить как работает последние примеры здесь items-sold-scope.html (also see this live) и items-sold-headers.html (see this live too).

+
+ +

Заключение

+ +

Есть еще некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали все что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите Styling Tables.

+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +
+

В этом блоке

+ + +
diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..a393a80a84 --- /dev/null +++ b/files/ru/learn/html/tables/basics/index.html @@ -0,0 +1,530 @@ +--- +title: HTML таблицы основы +slug: Learn/HTML/Tables/Basics +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Этот раздел познакомит вас с таблицами HTML, представив самые базовые понятия - строки и ячейки, заголовки, слияние строк и столбцов, а также объединение всех ячеек в столбце в целях стилизации.

+ + + + + + + + + + + + +
Начальные условия:Знание основ HTML (читайте Введение в HTML - Introduction to HTML).
Цель:Общее знакомство с таблицами HTML.
+ +

Что такое таблица ?

+ +

Таблица - это структурированный набор данных, состоящий из строк и столбцов (табличных данных). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например - человек и его возраст, или расписание в плавательном бассейне.

+ +

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

A swimming timetable showing a sample data table

+ +

Люди постоянно используют таблицы, причем уже давно, как показывает документ по переписи в США, относящийся к 1800 году:

+ +

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

+ +

Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.

+ +

Как работает таблица?

+ +

Смысл таблицы в том, что она жесткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведенную ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Personal pronouns
СубъектОбъект
Единствен. числ.1 ЛицоЯменя
2 Лицотытебя
3 Лицо♂онего
♀онаее
oоноего
Множ.числ.1 Лицомынас
2 Лицовывас
2 Лицоониих
+ +

Если правильно представить таблицу HTML, интерпретировать ее данные смогут даже люди, имеющие проблемы со зрением.

+ +

Оформление таблиц

+ +

Исходный код HTML (HTML source code) вышеприведенной таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведенный в GitHub пример информации о стиле не имеет.

+ +

Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (CSS). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье Стилизация таблиц.

+ +

В этом разделе мы не фокусируемся на CSS, но все же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти здесь, можно также использовать шаблон HTML, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.

+ +
+

Примечание: Посмотрите также таблицу personal_pronouns с примененным к ней стилем, чтобы получить представление о том, как она выглядит.

+
+ +

Когда не надо использовать таблицы HTML?

+ +

HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе Вёрстка на Начальном обучающем модуле доступности. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда все же попадается.

+ +

Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :

+ +
    +
  1. Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
    2. +
  2. Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц дает более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
    3. +
  3. Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходими принимать дополнительные меры.
    4. +
+ +

Упражение: Ваша первая таблица

+ +

Итак, мы уже достаточно говорили о теории, теперь возьмем конкретный пример и построим таблицу.

+ +
    +
  1. Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новой папке на вашем компьютере.
    2. +
  2. Содержимое любой таблицы заключается между двумя тегами : <table></table>. Добавьте их в тело HTML.
    3. +
  3. Самым маленьким контейнером в таблице является ячейка, она создается элементом <td> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: + 
    <td>Hi, I'm your first cell.</td>
    +
    4. +
  4. Чтобы получить строку из четырех ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: + 
    <td>Hi, I'm your first cell.</td>
+<td>I'm your second cell.</td>
+<td>I'm your third cell.</td>
+<td>I'm your fourth cell.</td>
    +
    5. +
+ +

Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <td> создает отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.

+ +

Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент <tr> ('tr' - сокращение от 'table row'). Попробуем, как это получится.

+ +
    +
  1. Поместите четыре уже созданных ячейки между тегами <tr> как здесь показано: + + 
    <tr>
+  <td>Hi, I'm your first cell.</td>
+  <td>I'm your second cell.</td>
+  <td>I'm your third cell.</td>
+  <td>I'm your fourth cell.</td>
+</tr>
    +
    2. +
  2. Теперь, когда одна строка уже есть, добавим еще — каждую строку надо вложить в дополнительный элемент <tr>, а каждая ячейка должна быть внутри элемента <td>.
    3. +
+ +

В результате получится таблица, которая будет выглядеть примерно так:

+ + + + + + + + + + + + + + + + +
Hi, I'm your first cell.I'm your second cell.I'm your third cell.I'm your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.
+ +
+

Примечание: Этот пример можно также найти на GitHub под названием simple-table.html (see it live also).

+
+ +

Добавление заголовков с помощью элементов <th>

+ +

Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмем следующий пример. Сначала исходный код:

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Breed</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Owner</td>
+    <td>Mother-in-law</td>
+    <td>Me</td>
+    <td>Me</td>
+    <td>Sister-in-law</td>
+  </tr>
+  <tr>
+    <td>Eating Habits</td>
+    <td>Eats everyone's leftovers</td>
+    <td>Nibbles at food</td>
+    <td>Hearty eater</td>
+    <td>Will eat till he explodes</td>
+  </tr>
+</table>
+ +

Теперь как выглядит таблица:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone's leftoversNibbles at foodHearty eaterWill eat till he explodes
+ +

Проблема в том, что, хотя вы и можете представить, о чем идет речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.

+ +

Упражнение: заголовки

+ +

Попробуем улучшить эту таблицу.

+ +
    +
  1. Сначала создайте локальную копию dogs-table.html и minimal-table.css в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.
    2. +
  2. Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <th> ('th' сокращение от 'table header'). Он работает в точности как <td>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своем HTML все элементы <td>, содержащие заголовки, на элементы <th>.
    3. +
  3. Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.
    4. +
+ +
+

Примечание: Законченный пример можно найти на dogs-table-fixed.html в GitHub (посмотрите живой пример).

+
+ +

Для чего нужны заголовки?

+ +

Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.

+ +
+

Примечание: По умолчанию к заголовкам таблицы применяется определенный стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.

+
+ +

Заголовки дают дополнительное преимущество — вместе с атрибутом scope (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно

+ +

Слияние нескольких строк или столбцов

+ +

Иногда нам нужно, чтобы ячейки распротранялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.

+ +

Исходная разметка выглядит так:

+ +
<table>
+  <tr>
+    <th>Animals</th>
+  </tr>
+  <tr>
+    <th>Hippopotamus</th>
+  </tr>
+  <tr>
+    <th>Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th>Crocodile</th>
+  </tr>
+  <tr>
+    <th>Chicken</th>
+    <td>Cock</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+ +

Но результат не такой, как хотелось бы:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenCock
Rooster
+ +

Нужно, чтобы  "Animals", "Hippopotamus" и "Crocodile" распространялись на два столбца, а "Horse" и "Chicken" - на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты colspan и rowspan, которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, colspan="2" распространяет ячейку на два столбца.

+ +

Воспользуемся colspan и rowspan чтобы улучшить таблицу.

+ +
    +
  1. Сначала создайте локальную копию animals-table.html и minimal-table.css в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.
    2. +
  2. Затем используйте атрибут colspan чтобы распространить "Animals", "Hippopotamus" и "Crocodile" на два столбца.
    3. +
  3. Наконец, используйте атрибут rowspan чтобы распространить  "Horse" и "Chicken" на две строки.
    4. +
  4. Сохраните код и откройте его в браузере, чтобы увидеть улучшения.
    5. +
+ +
+

Примечание: Законченный пример можно посмотреть в animals-table-fixed.html на GitHub (живой пример).

+
+ + +
+ +

Стилизация столбцов

+ +

И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы  <col> и <colgroup>. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде {{cssxref(":nth-child()")}} было бы слишком утомительно.

+ +

Возьмем простой пример:

+ +
<table>
+  <tr>
+    <th>Data 1</th>
+    <th style="background-color: yellow">Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td style="background-color: yellow">Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Что дает нам:

+ + + + + + + + + + + + + + + + +
Data 1Data 2
CalcuttaOrange
RobotsJazz
+ +

Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трех ячеек в столбце (в реальном проекте, возможно, придется вводить class на всех трех и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <col>. Элемент <col> задается в контейнере <colgroup> сразу же за открывающим тегом <table>. Эффект, который мы видели выше, можно задать так:

+ +
<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+    <th>Data 1</th>
+    <th>Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td>Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <col> ввести необходимо — иначе к первому столбцу не будет применен стиль.

+ +

Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <col> с атрибутом span, таким образом:

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Подобно colspan и rowspan, span принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.

+ +

Упражнение: colgroup и col

+ +

Теперь попробуйте сами.

+ +

Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch),  кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподает.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MonTuesWedThursFriSatSun
1st periodEnglishGermanDutch
2nd periodEnglishEnglishGermanDutch
3rd periodGermanGermanDutch
4th periodEnglishEnglishDutch
+ +

Заново создайте таблицу, проделав указанные ниже действия.

+ +
    +
  1. Сначала создайте локальную копию файла timetable.html в новой папке на вашем копьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
    2. +
  2. Добавьте элемент <colgroup> вверху таблицы, сразу же под тегом <table>, куда вы сможете вставлять элементы <col>.
    3. +
  3. Первые два столбца надо оставить без стиля..
    4. +
  4. Добавьте цвет фона для третьего столбца. Значением атрибута style будет  background-color:#97DB9A;
    5. +
  5. Задайте ширину для четвертого столбца. Значением атрибута style будет width: 42px;
    6. +
  6. Добавьте цвет фона для пятого столбца. Значением атрибута style будет background-color: #97DB9A;
    7. +
  7. Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведет новый класс. Значениями атрибута style будут: background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. Последние два дня выходные; значением атрибута style будет width: 42px;
    9. +
+ +

Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).

+ +

Итог

+ +

Здесь приведены практически все базовые сведения о таблицах HTML. В следующей статье вы получите более продвинутые сведения на эту тему.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
diff --git a/files/ru/learn/html/tables/index.html b/files/ru/learn/html/tables/index.html new file mode 100644 index 0000000000..609f1b36fe --- /dev/null +++ b/files/ru/learn/html/tables/index.html @@ -0,0 +1,34 @@ +--- +title: HTML таблицы +slug: Learn/HTML/Tables +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (CSS) HTML с легкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.

+ +

Необходимые условия

+ +

Прежде чем приступить к данному разделу, вы должны ознакомиться с основами HTML — смотрите Введение в HTML (Introduction to HTML).

+ +
+

Примечание: Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Thimble.

+
+ +

Руководства

+ +

Данный раздел содержит следующие статьи:

+ +
+
Основы работы с таблицами HTML
+
Эта статья поможет вам начать работу с таблицами HTML, познакомив с самыми базовыми понятиями - строками и ячейками, заголовками, слиянием строк или столбцов, а также с тем, как объединять все ячейки столбца для оформительских целей.
+
Продвинутые возможности таблиц HTML и доступность
+
Во второй статье данного раздела мы рассмотрим более продвинутые возможности таблиц HTML — заголовки/подписи, а также разбиение строк таблицы на три части: "голову" (head), "тело" (body) и нижний колонтитул (footer) — а также исследуем, как можно представлять таблицы для людей, имеющих проблемы со зрением.
+
+ +

Проверка знаний

+ +
+
Структурирование данных о планетах
+
Для проверки усвоенных знаний мы дадим вам ряд данных, касающихся планет солнечной системы, чтобы представить их в виде таблицы HTML.
+
diff --git a/files/ru/learn/html/tables/structuring_planet_data/index.html b/files/ru/learn/html/tables/structuring_planet_data/index.html new file mode 100644 index 0000000000..ef5ff547c0 --- /dev/null +++ b/files/ru/learn/html/tables/structuring_planet_data/index.html @@ -0,0 +1,96 @@ +--- +title: 'Аттестация: Структурирование данных о планетах' +slug: Learn/HTML/Tables/Structuring_planet_data +tags: + - HTML + - Начинающим + - таблицы +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

В нашей аттестации, мы предоставим вам некоторые данные о планетах солнечной системы, и убедим вас структурировать их в HTML таблицу.

+ + + + + + + + + + + + +
Необходимые навыки:Перед тем, как попытаться пройти эту аттестацию, вы должны были уже разобрать все статьи в этом модуле.
Цели:Проверить знания о HTML таблицах и связанными с ними возможностями.
+ +

Отправная точка

+ +

Для того, чтобы начать аттестацию, скопируйте blank-template.html, minimal-table.css, и planets-data.txt в новую директорию на вашем компьютере.

+ +
+

Примечание: В качестве альтарнативы, вы можете использовать такие сайты, как  JSBin или Glitch, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <script>/<style> элементы в HTML страницу.

+
+ +

Краткое описание проекта

+ +

Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.

+ +

Готовая таблица должна выглядить так:

+ +

+ +

Вы можете также посмотреть на готовый вариант здесь (не смотрите на исходный код — не жульничайте!).

+ + + +

Шаги для завершения

+ +

Следующие шаги опистывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле planets-data.txt. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.

+ +
    +
  1. Откройте вашу копию blank-template.html , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтинул (footer) для этого примера.
    2. +
  2. Добавьте предоставленную подпись к вашей таблице ("Сaption" в конце planets-data.txt).
    3. +
  3. Добавьте строку в заголовок таблицы, содержащуюю все заголовки столбцов.
    4. +
  4. Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть семантически.
    5. +
  5. Убедитесь, что весь контент помещен в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.
    6. +
  6. Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.
    7. +
  7. Добавьте черную рамку вокруг столбца, который содержит все заголовки строк с именами планет.
    8. +
+ +

Подсказки и советы

+ + + +

Аттестация или дальнейшая помощь

+ +

Если вы хотите, чтобы ваша работа была оценена, или вы застряли и хотите обратиться за помощью:

+ +
    +
  1. Разместите свою работу в онлайн-редакторе, таком как CodePen, jsFiddle или Glitch.
    2. +
  2. Напишите сообщение с просьбой об оценке и/или помощи в разделе обучения на форуме MDN Discourse. Ваш пост должен включать: +
      +
    • Описательный заголовок, такой как «Требуется оценка для структурирования данных планеты».
      • +
    • Детали того, что вы уже пробовали, и что вы хотели бы, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите оценить свою работу.
      • +
    • Ссылка на пример, который вы хотите оценить или в котором вам нужна помощь, в онлайн-редакторе (как упомянуто в шаге 1 выше). Это хорошая практика в решении проблем - очень сложно помочь кому-то с проблемой кода, если вы не видите его код.
      • +
    • Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вам нужно помочь.
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

+ +

В этом модуле

+ + -- cgit v1.2.3-54-g00ecf