0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<ul><li><a>Таблица - это…</a></li>
1
<ul><li><a>Таблица - это…</a></li>
2
<li><a>Создание таблицы</a></li>
2
<li><a>Создание таблицы</a></li>
3
<li><a>Интервалы и поля</a></li>
3
<li><a>Интервалы и поля</a></li>
4
<li><a>Добавление строк</a></li>
4
<li><a>Добавление строк</a></li>
5
<li><a>Добавление ячейки заголовка</a></li>
5
<li><a>Добавление ячейки заголовка</a></li>
6
<li><a>Ячейка тела таблицы</a></li>
6
<li><a>Ячейка тела таблицы</a></li>
7
<li><a>Заголовок (подпись)</a></li>
7
<li><a>Заголовок (подпись)</a></li>
8
<li><a>Группировка строк и столбцов</a></li>
8
<li><a>Группировка строк и столбцов</a></li>
9
<li><a>Группировка разделов</a></li>
9
<li><a>Группировка разделов</a></li>
10
<li><a>Атрибуты для работы с табличными элементами</a></li>
10
<li><a>Атрибуты для работы с табличными элементами</a></li>
11
<li><a>Структура таблицы: кратко о важном</a><ul><li><a>Шапка</a></li>
11
<li><a>Структура таблицы: кратко о важном</a><ul><li><a>Шапка</a></li>
12
<li><a>Заголовки столбцов и строк</a></li>
12
<li><a>Заголовки столбцов и строк</a></li>
13
<li><a>Тело</a></li>
13
<li><a>Тело</a></li>
14
<li><a>Подвал</a></li>
14
<li><a>Подвал</a></li>
15
</ul></li>
15
</ul></li>
16
</ul><p>Во время верстки сайтов и онлайн-сервисов специалистам предстоит иметь дело с различными элементами. Одним из самых важных являются таблицы. Они помогают упорядочить данные и вывести их на дисплей в виде строк и столбцов.</p>
16
</ul><p>Во время верстки сайтов и онлайн-сервисов специалистам предстоит иметь дело с различными элементами. Одним из самых важных являются таблицы. Они помогают упорядочить данные и вывести их на дисплей в виде строк и столбцов.</p>
17
<p>С таблицами в HTML и CSS необходимо уметь работать. Далее предстоит познакомиться с этим объектом более подробно. Необходимо не только выяснить, что собой представляют таблицы, но и как их создавать, редактировать, группировать. Предложенная информация будет полезна тем, кто планирует начинать изучение верстки и веб-программирования.</p>
17
<p>С таблицами в HTML и CSS необходимо уметь работать. Далее предстоит познакомиться с этим объектом более подробно. Необходимо не только выяснить, что собой представляют таблицы, но и как их создавать, редактировать, группировать. Предложенная информация будет полезна тем, кто планирует начинать изучение верстки и веб-программирования.</p>
18
<h2>Таблица - это…</h2>
18
<h2>Таблица - это…</h2>
19
<p>Таблица - это сетка, которая состоит из ячеек, формирующих столбцы и строки. Примерами таблиц могут выступать финансовые отчеты, календари, расписания и так далее. Отдельный блок сетки - это ячейка таблицы. Такие элементы могут включать в себя различные данные:</p>
19
<p>Таблица - это сетка, которая состоит из ячеек, формирующих столбцы и строки. Примерами таблиц могут выступать финансовые отчеты, календари, расписания и так далее. Отдельный блок сетки - это ячейка таблицы. Такие элементы могут включать в себя различные данные:</p>
20
<ul><li>числа;</li>
20
<ul><li>числа;</li>
21
<li>текст;</li>
21
<li>текст;</li>
22
<li>видео;</li>
22
<li>видео;</li>
23
<li>аудио;</li>
23
<li>аудио;</li>
24
<li>другие объекты.</li>
24
<li>другие объекты.</li>
25
</ul><p>Таблицы на языке HTML пишутся построчно. Их верстка осуществляется при помощи различных тегов. Наиболее распространенными являются tr и td. Некоторые верстальщики пользуются только ими для настройки таблиц, но это не совсем правильно. Далее предстоит ознакомиться с принципами применения tr и td, а также других тегов для верстки рассматриваемого элемента сайта.</p>
25
</ul><p>Таблицы на языке HTML пишутся построчно. Их верстка осуществляется при помощи различных тегов. Наиболее распространенными являются tr и td. Некоторые верстальщики пользуются только ими для настройки таблиц, но это не совсем правильно. Далее предстоит ознакомиться с принципами применения tr и td, а также других тегов для верстки рассматриваемого элемента сайта.</p>
26
<h2>Создание таблицы</h2>
26
<h2>Создание таблицы</h2>
27
<p>Чтобы создать рассматриваемый компонент, необходимо пользоваться парным тегом table. Он выступает в качестве контейнера для всех составляющих таблицы. Все элементы, которые размещаются в изучаемом компоненте, должны находиться внутри этого самого тега.</p>
27
<p>Чтобы создать рассматриваемый компонент, необходимо пользоваться парным тегом table. Он выступает в качестве контейнера для всех составляющих таблицы. Все элементы, которые размещаются в изучаемом компоненте, должны находиться внутри этого самого тега.</p>
28
<p>Вот пример создания table с двумя столбцами и двумя строками:</p>
28
<p>Вот пример создания table с двумя столбцами и двумя строками:</p>
29
<p><table></p>
29
<p><table></p>
30
<p>< tr >< th >текст заголовка< /th >< th >текст заголовка< /th >< /tr > <!-ряд с ячейками заголовков-></p>
30
<p>< tr >< th >текст заголовка< /th >< th >текст заголовка< /th >< /tr > <!-ряд с ячейками заголовков-></p>
31
<p>< tr >< td >данные</ td >< td >данные< /td >< /tr > <!-ряд с ячейками тела таблицы-></p>
31
<p>< tr >< td >данные</ td >< td >данные< /td >< /tr > <!-ряд с ячейками тела таблицы-></p>
32
<p></table></p>
32
<p></table></p>
33
<p>Видимых границ по умолчанию у table нет. Они задаются при помощи свойства под названием border. Выглядит это так:</p>
33
<p>Видимых границ по умолчанию у table нет. Они задаются при помощи свойства под названием border. Выглядит это так:</p>
34
<p>Для того, чтобы убрать промежутки между ячейками, необходимо воспользоваться свойством table {border-collapse: collapse;}. По умолчанию ширина изучаемого элемента равняется ширине ее внутреннего содержимого. Установка ширины осуществляется через значение свойства width:</p>
34
<p>Для того, чтобы убрать промежутки между ячейками, необходимо воспользоваться свойством table {border-collapse: collapse;}. По умолчанию ширина изучаемого элемента равняется ширине ее внутреннего содержимого. Установка ширины осуществляется через значение свойства width:</p>
35
<p>Если для ячеек задаются внутренние отступы и границы, ширина таблицы включает в себя:</p>
35
<p>Если для ячеек задаются внутренние отступы и границы, ширина таблицы включает в себя:</p>
36
<ul><li>padding-left;</li>
36
<ul><li>padding-left;</li>
37
<li>padding-right;</li>
37
<li>padding-right;</li>
38
<li>border-left;</li>
38
<li>border-left;</li>
39
<li>border-right.</li>
39
<li>border-right.</li>
40
</ul><p>Если ширина и границы ячеек заданы, шириной таблицы будет называться ширина ячеек, ширина border-left и ширина border-right последней ячейки в имеющемся ряду.</p>
40
</ul><p>Если ширина и границы ячеек заданы, шириной таблицы будет называться ширина ячеек, ширина border-left и ширина border-right последней ячейки в имеющемся ряду.</p>
41
<h2>Интервалы и поля</h2>
41
<h2>Интервалы и поля</h2>
42
<p>По умолчанию ячейки будут подстраиваться под их содержимое. Иногда встречаются ситуации, когда требуется вокруг табличных данных оставлять некоторое пространство. Оно и называется padding.</p>
42
<p>По умолчанию ячейки будут подстраиваться под их содержимое. Иногда встречаются ситуации, когда требуется вокруг табличных данных оставлять некоторое пространство. Оно и называется padding.</p>
43
<p>Интервалы и поля относятся к элементам представления данных. Соответствующее пространство будет настраиваться через стилевые таблицы CSS.</p>
43
<p>Интервалы и поля относятся к элементам представления данных. Соответствующее пространство будет настраиваться через стилевые таблицы CSS.</p>
44
<p>Поле ячейки (padding) - расстояние между содержимым ячейки и ее границей (border). Чтобы добавить соответствующее свойство, нужно применить padding к td или th.</p>
44
<p>Поле ячейки (padding) - расстояние между содержимым ячейки и ее границей (border). Чтобы добавить соответствующее свойство, нужно применить padding к td или th.</p>
45
<p>Интервал ячеек (border-spacing) - расстояние между ними (между td или th). Сначала требуется присвоить значение separate свойству border collapse для элемента table, а затем - установить расстояние между ячейками, внеся изменения в значение параметра border-spacing.</p>
45
<p>Интервал ячеек (border-spacing) - расстояние между ними (между td или th). Сначала требуется присвоить значение separate свойству border collapse для элемента table, а затем - установить расстояние между ячейками, внеся изменения в значение параметра border-spacing.</p>
46
<p>В более старых версиях HTML за поля и интервалы ячеек отвечали такие атрибуты как cellspacing и cellpadding для компонента table. В спецификации HTML5 эти параметры были признаны устаревшими. Теперь они не используются на практике.</p>
46
<p>В более старых версиях HTML за поля и интервалы ячеек отвечали такие атрибуты как cellspacing и cellpadding для компонента table. В спецификации HTML5 эти параметры были признаны устаревшими. Теперь они не используются на практике.</p>
47
<p>Вот наглядный пример использования свойств border-padding и padding. Стоит обратить внимание на то, что интервал ячеек (border-spacing) не будет работать, если ко всей table применяется свойство border-collapse: collapse.</p>
47
<p>Вот наглядный пример использования свойств border-padding и padding. Стоит обратить внимание на то, что интервал ячеек (border-spacing) не будет работать, если ко всей table применяется свойство border-collapse: collapse.</p>
48
<h2>Добавление строк</h2>
48
<h2>Добавление строк</h2>
49
<p>Ряды таблицы или ее строки можно создать при помощи тега tr. Количество горизонтальных строк в итоговом элементе будет определяться количеством пар tr.</p>
49
<p>Ряды таблицы или ее строки можно создать при помощи тега tr. Количество горизонтальных строк в итоговом элементе будет определяться количеством пар tr.</p>
50
<h2>Добавление ячейки заголовка</h2>
50
<h2>Добавление ячейки заголовка</h2>
51
<p>Заголовок столбца будет задаваться при помощи тега th. Его применение приводит к созданию специальной ячейки, текст в которой будет выделен полужирным. Количество ячеек заголовка будет определяться количеством элементов th (пар).</p>
51
<p>Заголовок столбца будет задаваться при помощи тега th. Его применение приводит к созданию специальной ячейки, текст в которой будет выделен полужирным. Количество ячеек заголовка будет определяться количеством элементов th (пар).</p>
52
<p>В программном коде ситуация выглядит так:</p>
52
<p>В программном коде ситуация выглядит так:</p>
53
<p><table></p>
53
<p><table></p>
54
<p>< tr >< th >ячейка заголовка< /th >< th >ячейка заголовка< /th >< /tr ></p>
54
<p>< tr >< th >ячейка заголовка< /th >< th >ячейка заголовка< /th >< /tr ></p>
55
<p></table></p>
55
<p></table></p>
56
<p>Для соответствующего компонента HTML доступны атрибуты rowspan, headers, colspan.</p>
56
<p>Для соответствующего компонента HTML доступны атрибуты rowspan, headers, colspan.</p>
57
<h2>Ячейка тела таблицы</h2>
57
<h2>Ячейка тела таблицы</h2>
58
<p>Ячейки в таблице можно создать при помощи парного тега td. Внутри td будут помещаться табличные данные.</p>
58
<p>Ячейки в таблице можно создать при помощи парного тега td. Внутри td будут помещаться табличные данные.</p>
59
<p>Компоненты < td > и < /td >, которые расположены в одном ряду, служат определителем количества ячеек в строке таблицы.</p>
59
<p>Компоненты < td > и < /td >, которые расположены в одном ряду, служат определителем количества ячеек в строке таблицы.</p>
60
<p>Количество пар td должно обязательно равняться количеству th. Вот пример реализации добавления ячейки тела таблицы:</p>
60
<p>Количество пар td должно обязательно равняться количеству th. Вот пример реализации добавления ячейки тела таблицы:</p>
61
<p><table></p>
61
<p><table></p>
62
<p>< tr >< th >ячейка заголовка< /th >< th >ячейка заголовка< /th >< /tr ></p>
62
<p>< tr >< th >ячейка заголовка< /th >< th >ячейка заголовка< /th >< /tr ></p>
63
<p>< tr >< td >ячейка тела таблицы< /td >< td >ячейка тела таблицы< /td >< /tr ></p>
63
<p>< tr >< td >ячейка тела таблицы< /td >< td >ячейка тела таблицы< /td >< /tr ></p>
64
<p></table></p>
64
<p></table></p>
65
<p>Для данного элемента могут применяться атрибуты headers, rowspan, colspan.</p>
65
<p>Для данного элемента могут применяться атрибуты headers, rowspan, colspan.</p>
66
<h2>Заголовок (подпись)</h2>
66
<h2>Заголовок (подпись)</h2>
67
<p>Caption - тег, который необходим для любой таблицы при верстке веб-сервисов. Его содержимое выводится непосредственно перед таблицей. Изменение положения заголовка возможно. Для этого используется свойство caption-side:</p>
67
<p>Caption - тег, который необходим для любой таблицы при верстке веб-сервисов. Его содержимое выводится непосредственно перед таблицей. Изменение положения заголовка возможно. Для этого используется свойство caption-side:</p>
68
<ul><li>top - отвечает за вывод до таблицы;</li>
68
<ul><li>top - отвечает за вывод до таблицы;</li>
69
<li>bottom - отображение после.</li>
69
<li>bottom - отображение после.</li>
70
</ul><p>Правила верстки рекомендуют размещать тег заголовка в самом начале - сразу после table. Caption по умолчанию выравнивает свое содержимое по центру. Для выравнивания по правому/левому краю требуется внести изменения в значение свойства text-align.</p>
70
</ul><p>Правила верстки рекомендуют размещать тег заголовка в самом начале - сразу после table. Caption по умолчанию выравнивает свое содержимое по центру. Для выравнивания по правому/левому краю требуется внести изменения в значение свойства text-align.</p>
71
<p>Заголовки таблицы нужны для разных целей:</p>
71
<p>Заголовки таблицы нужны для разных целей:</p>
72
<ol><li>Для пользовательского удобства. С помощью заголовков намного проще ориентироваться на странице, особенно когда таблиц много.</li>
72
<ol><li>Для пользовательского удобства. С помощью заголовков намного проще ориентироваться на странице, особенно когда таблиц много.</li>
73
<li>Caption помогает людям с ограниченными возможностями. С помощью заголовка таблицы можно получить общее представление о том, что в ней находится. Это помогает понять, стоит ли просматривать соответствующий элемент полностью.</li>
73
<li>Caption помогает людям с ограниченными возможностями. С помощью заголовка таблицы можно получить общее представление о том, что в ней находится. Это помогает понять, стоит ли просматривать соответствующий элемент полностью.</li>
74
<li>Caption - компонент, который благоприятно сказывается на оптимизации веб-портала или онлайн-сервиса. Его очень любят разнообразные поисковые системы.</li>
74
<li>Caption - компонент, который благоприятно сказывается на оптимизации веб-портала или онлайн-сервиса. Его очень любят разнообразные поисковые системы.</li>
75
</ol><p>Вот наглядный пример реализации caption в программном коде:</p>
75
</ol><p>Вот наглядный пример реализации caption в программном коде:</p>
76
<p><table></p>
76
<p><table></p>
77
<p><caption>Перечень продуктов</caption></p>
77
<p><caption>Перечень продуктов</caption></p>
78
<p> < tr ></p>
78
<p> < tr ></p>
79
<p> <th>№ п/п</th></p>
79
<p> <th>№ п/п</th></p>
80
<p> <th>Наименование товара</th></p>
80
<p> <th>Наименование товара</th></p>
81
<p> <th>Ед. изм.</th></p>
81
<p> <th>Ед. изм.</th></p>
82
<p> <th>Количество</th></p>
82
<p> <th>Количество</th></p>
83
<p> <th>Цена за ед. изм., руб.</th></p>
83
<p> <th>Цена за ед. изм., руб.</th></p>
84
<p> <th>Стоимость, руб.</th></p>
84
<p> <th>Стоимость, руб.</th></p>
85
<p> < /tr ></p>
85
<p> < /tr ></p>
86
<p> < tr ></p>
86
<p> < tr ></p>
87
<p> < td >1.< /td ></p>
87
<p> < td >1.< /td ></p>
88
<p> < td >Томаты свежие< /td >< td >кг< /td >< td >15,20< /td >< td >69,00< /td >< td >1048,80</td></p>
88
<p> < td >Томаты свежие< /td >< td >кг< /td >< td >15,20< /td >< td >69,00< /td >< td >1048,80</td></p>
89
<p> < /tr ></p>
89
<p> < /tr ></p>
90
<p> < tr ></p>
90
<p> < tr ></p>
91
<p> < td >2.< /td ></p>
91
<p> < td >2.< /td ></p>
92
<p> < td >Огурцы свежие< /td >< td >кг< /td >< td >2,50< /td >< td >48,00< /td >< td >120,00< /td ></p>
92
<p> < td >Огурцы свежие< /td >< td >кг< /td >< td >2,50< /td >< td >48,00< /td >< td >120,00< /td ></p>
93
<p> < /tr ></p>
93
<p> < /tr ></p>
94
<p> < tr ></p>
94
<p> < tr ></p>
95
<p> < td colspan="5″ style="text-align:right">ИТОГО:< /td >< td >1168,80< /td ></p>
95
<p> < td colspan="5″ style="text-align:right">ИТОГО:< /td >< td >1168,80< /td ></p>
96
<p> < /tr ></p>
96
<p> < /tr ></p>
97
<p></table></p>
97
<p></table></p>
98
<p>Если заголовок таблицы по умолчанию не предусматривается дизайнером, его может сделать разработчик. Он добавит компонент в разметку и скроет при помощи CSS. Данный прием значительно повысит доступность контента.</p>
98
<p>Если заголовок таблицы по умолчанию не предусматривается дизайнером, его может сделать разработчик. Он добавит компонент в разметку и скроет при помощи CSS. Данный прием значительно повысит доступность контента.</p>
99
<p>Даже скрытый заголовок все равно будет доступен непосредственно для навигации по странице с помощью клавиатуры. Речевой браузер для людей с ограниченными возможностями тоже воспринимает тег caption - читая текст в соответствующем теге, браузер поменяет интонацию, темп речи, а также повысит громкость голоса.</p>
99
<p>Даже скрытый заголовок все равно будет доступен непосредственно для навигации по странице с помощью клавиатуры. Речевой браузер для людей с ограниченными возможностями тоже воспринимает тег caption - читая текст в соответствующем теге, браузер поменяет интонацию, темп речи, а также повысит громкость голоса.</p>
100
<h2>Группировка строк и столбцов</h2>
100
<h2>Группировка строк и столбцов</h2>
101
<p>Для группировки в HTML - это colgroup. С помощью этого тега можно создать структурную группу столбцов, выделяя логически однородные ячейки. Группирует соответствующий компонент один или более столбцов. После этой операции столбцы становятся доступны для единого форматирования. К ним можно применять стили, вместо того, чтобы повторять их для каждой ячейки/строки.</p>
101
<p>Для группировки в HTML - это colgroup. С помощью этого тега можно создать структурную группу столбцов, выделяя логически однородные ячейки. Группирует соответствующий компонент один или более столбцов. После этой операции столбцы становятся доступны для единого форматирования. К ним можно применять стили, вместо того, чтобы повторять их для каждой ячейки/строки.</p>
102
<p>Colgroup должен быть добавлен непосредственно после тегов caption или/и table.</p>
102
<p>Colgroup должен быть добавлен непосредственно после тегов caption или/и table.</p>
103
<p>С помощью тега col можно сформировать группы столбцов, которые будут делить таблицу на разделы, не относящиеся к общей структуре. Они не включают в себя данные одного и того же типа. Элемент col дает возможность задавать свойства столбцов для каждого столбца в пределах colgroup.</p>
103
<p>С помощью тега col можно сформировать группы столбцов, которые будут делить таблицу на разделы, не относящиеся к общей структуре. Они не включают в себя данные одного и того же типа. Элемент col дает возможность задавать свойства столбцов для каждого столбца в пределах colgroup.</p>
104
<p>Через атрибут style возможно менять основной цвет фона ячеек. Для компонента col становится доступным параметр span. С его помощью задается количество столбцов для непосредственного объединения.</p>
104
<p>Через атрибут style возможно менять основной цвет фона ячеек. Для компонента col становится доступным параметр span. С его помощью задается количество столбцов для непосредственного объединения.</p>
105
<p><table></p>
105
<p><table></p>
106
<p> <colgroup></p>
106
<p> <colgroup></p>
107
<p> <col span="2″ style="background:Khaki"><!- С помощью этой конструкции задаем цвет фона для первых двух столбцов таблицы-></p>
107
<p> <col span="2″ style="background:Khaki"><!- С помощью этой конструкции задаем цвет фона для первых двух столбцов таблицы-></p>
108
<p> <col style="background-color:LightCyan"><!- Задаем цвет фона для следующего (одного) столбца таблицы-></p>
108
<p> <col style="background-color:LightCyan"><!- Задаем цвет фона для следующего (одного) столбца таблицы-></p>
109
<p> </colgroup></p>
109
<p> </colgroup></p>
110
<p> < tr ></p>
110
<p> < tr ></p>
111
<p> <th>№ п/п</th></p>
111
<p> <th>№ п/п</th></p>
112
<p> <th>Наименование</th></p>
112
<p> <th>Наименование</th></p>
113
<p> <th>Цена, руб.</th></p>
113
<p> <th>Цена, руб.</th></p>
114
<p> < /tr ></p>
114
<p> < /tr ></p>
115
<p> < tr ></p>
115
<p> < tr ></p>
116
<p> < td >1< /td ></p>
116
<p> < td >1< /td ></p>
117
<p> < td >Карандаш цветной< /td ></p>
117
<p> < td >Карандаш цветной< /td ></p>
118
<p> < td >20,00< /td ></p>
118
<p> < td >20,00< /td ></p>
119
<p> < /tr ></p>
119
<p> < /tr ></p>
120
<p> < tr ></p>
120
<p> < tr ></p>
121
<p> < td >2< /td ></p>
121
<p> < td >2< /td ></p>
122
<p> < td >Линейка 20 см< /td ></p>
122
<p> < td >Линейка 20 см< /td ></p>
123
<p> < td >30,00< /td ></p>
123
<p> < td >30,00< /td ></p>
124
<p> < /tr ></p>
124
<p> < /tr ></p>
125
<p></table></p>
125
<p></table></p>
126
<p>Выше можно увидеть фрагмент программного кода, помогающий понять принцип группировки. А еще - наглядный образец отображения итоговой таблицы.</p>
126
<p>Выше можно увидеть фрагмент программного кода, помогающий понять принцип группировки. А еще - наглядный образец отображения итоговой таблицы.</p>
127
<h2>Группировка разделов</h2>
127
<h2>Группировка разделов</h2>
128
<p>Thead используется для создания группы заголовков для строк table. Это делается для того, чтобы можно быть использовать общие стили оформления. Thead используется в сочетании с тегами:</p>
128
<p>Thead используется для создания группы заголовков для строк table. Это делается для того, чтобы можно быть использовать общие стили оформления. Thead используется в сочетании с тегами:</p>
129
<ul><li>tbody;</li>
129
<ul><li>tbody;</li>
130
<li>tfoot.</li>
130
<li>tfoot.</li>
131
</ul><p>Рассматриваемый тег используется так:</p>
131
</ul><p>Рассматриваемый тег используется так:</p>
132
<ul><li>в качестве дочернего элемента table;</li>
132
<ul><li>в качестве дочернего элемента table;</li>
133
<li>после caption и colgroup;</li>
133
<li>после caption и colgroup;</li>
134
<li>перед tbody, tfoot, tr.</li>
134
<li>перед tbody, tfoot, tr.</li>
135
</ul><p>Элемент tbody используется для группировки основного табличного содержимого. Он используется в сочетании с тегами thead и tfoot.</p>
135
</ul><p>Элемент tbody используется для группировки основного табличного содержимого. Он используется в сочетании с тегами thead и tfoot.</p>
136
<p>Компонент tfoot используется для создания группы строк. Пример - для представления данных о суммах или итогах. Группировка создается в нижней части table. Может быть использована всего один раз.</p>
136
<p>Компонент tfoot используется для создания группы строк. Пример - для представления данных о суммах или итогах. Группировка создается в нижней части table. Может быть использована всего один раз.</p>
137
<p>Вот наглядный пример реализации кода:</p>
137
<p>Вот наглядный пример реализации кода:</p>
138
<p><table></p>
138
<p><table></p>
139
<p> <thead></p>
139
<p> <thead></p>
140
<p> < tr ></p>
140
<p> < tr ></p>
141
<p> <th>№ п/п</th></p>
141
<p> <th>№ п/п</th></p>
142
<p> <th>Наименование товара</th></p>
142
<p> <th>Наименование товара</th></p>
143
<p> <th>Ед. изм.</th></p>
143
<p> <th>Ед. изм.</th></p>
144
<p> <th>Количество</th></p>
144
<p> <th>Количество</th></p>
145
<p> <th>Цена за ед. изм., руб.</th></p>
145
<p> <th>Цена за ед. изм., руб.</th></p>
146
<p> <th>Стоимость, руб.</th></p>
146
<p> <th>Стоимость, руб.</th></p>
147
<p> < /tr ></p>
147
<p> < /tr ></p>
148
<p> </thead></p>
148
<p> </thead></p>
149
<p><tfoot></p>
149
<p><tfoot></p>
150
<p> < tr ></p>
150
<p> < tr ></p>
151
<p> < td colspan="5″ style="text-align:right">ИТОГО:< /td >< td >1168,80< /td ></p>
151
<p> < td colspan="5″ style="text-align:right">ИТОГО:< /td >< td >1168,80< /td ></p>
152
<p> < /tr ></p>
152
<p> < /tr ></p>
153
<p></tfoot></p>
153
<p></tfoot></p>
154
<p><tbody></p>
154
<p><tbody></p>
155
<p> < tr ></p>
155
<p> < tr ></p>
156
<p> < td >1.< /td ></p>
156
<p> < td >1.< /td ></p>
157
<p> < td >Томаты свежие</ td >< td >кг< /td >< td >15,20< /td >< td >69,00< /td >< td >1048,80< /td ></p>
157
<p> < td >Томаты свежие</ td >< td >кг< /td >< td >15,20< /td >< td >69,00< /td >< td >1048,80< /td ></p>
158
<p> < /tr ></p>
158
<p> < /tr ></p>
159
<p> < tr ></p>
159
<p> < tr ></p>
160
<p> < td >2.< /td ></p>
160
<p> < td >2.< /td ></p>
161
<p> < td >Огурцы свежие< /td >< td >кг< /td >< td >2,50< /td >< td >48,00< /td >< td >120,00< /td ></p>
161
<p> < td >Огурцы свежие< /td >< td >кг< /td >< td >2,50< /td >< td >48,00< /td >< td >120,00< /td ></p>
162
<p> < /tr ></p>
162
<p> < /tr ></p>
163
<p></tbody> </p>
163
<p></tbody> </p>
164
<p></table></p>
164
<p></table></p>
165
<p>Соответствующая группировка появилась в стандарте с расчетом на то, что браузеры при отображении длинных таблиц обеспечат прокрутку строк с данными при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут воспользоваться надзаголовком и подзаголовком в качестве колонтитулов страницы. Современные браузеры так не работают. Они или просто отображают thead и tfoot в качестве информационных строк, либо помещают их в начало и конец table.</p>
165
<p>Соответствующая группировка появилась в стандарте с расчетом на то, что браузеры при отображении длинных таблиц обеспечат прокрутку строк с данными при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут воспользоваться надзаголовком и подзаголовком в качестве колонтитулов страницы. Современные браузеры так не работают. Они или просто отображают thead и tfoot в качестве информационных строк, либо помещают их в начало и конец table.</p>
166
<h2>Атрибуты для работы с табличными элементами</h2>
166
<h2>Атрибуты для работы с табличными элементами</h2>
167
<p>В процессе работы с табличными компонентами часто предстоит иметь дело с разнообразными атрибутами. Таблица, представленная ниже, поможет лучше ориентироваться на них:</p>
167
<p>В процессе работы с табличными компонентами часто предстоит иметь дело с разнообразными атрибутами. Таблица, представленная ниже, поможет лучше ориентироваться на них:</p>
168
Название атрибутаОписание и принимаемые значенияColspanУказывает на количество ячеек в строке для объединения по горизонтали. Форма представления: td colspan = "3". Может принимать значения в диапазоне от 1 до 999.HeadersИспользуется для задания списка ячеек заголовка, содержащих данные о текущей ячейке данных. Используется для речевых интернет-обозревателей. Задается через формы:Th id= "идентификатор"…/thTh headers = "идентификатор"…/thПринимаемыми значениями служит список имен ячеек, которые разделяются друг от друга пробелами. Соответствующие имена присваиваются через их атрибут - id.RowspanИспользуется для отображения количества ячеек в столбце для объединения по вертикали. Задается как:Td rowspan= "2"Данный атрибут может принимать значения от 1 до 999 включительно.SpanУказывает на количество колонок, которые объединяются для задания единого стиля. По умолчанию параметр имеет значение 1.Форма представления:Col span = "2"Значения, которые может принимать этот атрибут, - любое. Главное, чтобы им было целое и положительное число.<p>Теперь понятно, как работать с предложенными атрибутами. Они пригодятся каждому верстальщику.</p>
168
Название атрибутаОписание и принимаемые значенияColspanУказывает на количество ячеек в строке для объединения по горизонтали. Форма представления: td colspan = "3". Может принимать значения в диапазоне от 1 до 999.HeadersИспользуется для задания списка ячеек заголовка, содержащих данные о текущей ячейке данных. Используется для речевых интернет-обозревателей. Задается через формы:Th id= "идентификатор"…/thTh headers = "идентификатор"…/thПринимаемыми значениями служит список имен ячеек, которые разделяются друг от друга пробелами. Соответствующие имена присваиваются через их атрибут - id.RowspanИспользуется для отображения количества ячеек в столбце для объединения по вертикали. Задается как:Td rowspan= "2"Данный атрибут может принимать значения от 1 до 999 включительно.SpanУказывает на количество колонок, которые объединяются для задания единого стиля. По умолчанию параметр имеет значение 1.Форма представления:Col span = "2"Значения, которые может принимать этот атрибут, - любое. Главное, чтобы им было целое и положительное число.<p>Теперь понятно, как работать с предложенными атрибутами. Они пригодятся каждому верстальщику.</p>
169
<h2>Структура таблицы: кратко о важном</h2>
169
<h2>Структура таблицы: кратко о важном</h2>
170
<p>Чтобы лучше понимать принципы работы с табличными элементами, рекомендуется рассмотреть структуру таблицы. Она напоминает HTML-страницу.</p>
170
<p>Чтобы лучше понимать принципы работы с табличными элементами, рекомендуется рассмотреть структуру таблицы. Она напоминает HTML-страницу.</p>
171
<h3>Шапка</h3>
171
<h3>Шапка</h3>
172
<p>Thead - это "шапка" таблицы. Она представляет собой заголовочную секцию. В thead используется тег th для ячеек. О том, как работать с шапкой, уже было сказано.</p>
172
<p>Thead - это "шапка" таблицы. Она представляет собой заголовочную секцию. В thead используется тег th для ячеек. О том, как работать с шапкой, уже было сказано.</p>
173
<h3>Заголовки столбцов и строк</h3>
173
<h3>Заголовки столбцов и строк</h3>
174
<p>Th позволяет создавать особые ячейки, с которых начинаются строки или столбцы. В таком элементе обычно хранится атрибут для всех данных строки/столбца.</p>
174
<p>Th позволяет создавать особые ячейки, с которых начинаются строки или столбцы. В таком элементе обычно хранится атрибут для всех данных строки/столбца.</p>
175
<p>Th нельзя применять для визуального форматирования. Данный принцип распространяется на все элементы разметки, которые имеют семантику.</p>
175
<p>Th нельзя применять для визуального форматирования. Данный принцип распространяется на все элементы разметки, которые имеют семантику.</p>
176
<h3>Тело</h3>
176
<h3>Тело</h3>
177
<p>Tbody - это тело. Оно включает в себя часть данных и группирует главные части таблицы. Tbody можно использовать несколько раз - до бесконечности. Этот прием позволяет дробить контент на части, сохраняя логическую связь.</p>
177
<p>Tbody - это тело. Оно включает в себя часть данных и группирует главные части таблицы. Tbody можно использовать несколько раз - до бесконечности. Этот прием позволяет дробить контент на части, сохраняя логическую связь.</p>
178
<p>Заголовка caption тут не будет. Его придется придумывать и скрывать через CSS.</p>
178
<p>Заголовка caption тут не будет. Его придется придумывать и скрывать через CSS.</p>
179
<h3>Подвал</h3>
179
<h3>Подвал</h3>
180
<p>Tfoot - секция, которая используется для группировки данных в нижней части таблицы. Это подвал рассматриваемого компонента. С семантической точки зрения подвал - это итог имеющихся данных.</p>
180
<p>Tfoot - секция, которая используется для группировки данных в нижней части таблицы. Это подвал рассматриваемого компонента. С семантической точки зрения подвал - это итог имеющихся данных.</p>
181
<p>Он также выступает в качестве нижнего табличного колонтитула. Браузер будет выводить его после tbody. При печати tfoot может размещаться как на каждой напечатанной странице, так и только на последней. Здесь все зависит от браузера.</p>
181
<p>Он также выступает в качестве нижнего табличного колонтитула. Браузер будет выводить его после tbody. При печати tfoot может размещаться как на каждой напечатанной странице, так и только на последней. Здесь все зависит от браузера.</p>
182
<p>Теперь понятно, что такое td и tr, а также как работать с этими элементами. Лучше разобраться в веб-программировании и верстке помогут специальные дистанционные компьютерные курсы.</p>
182
<p>Теперь понятно, что такое td и tr, а также как работать с этими элементами. Лучше разобраться в веб-программировании и верстке помогут специальные дистанционные компьютерные курсы.</p>
183
<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>. В частности, вас может заинтересовать <a>курс, посвященный FullStack-разработке</a>, первой ступенью которого является изучение HTML/CSS</em>.</p>
183
<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>. В частности, вас может заинтересовать <a>курс, посвященный FullStack-разработке</a>, первой ступенью которого является изучение HTML/CSS</em>.</p>
184
184