Таблицы
Иногда для простоты восприятия контент нужно оформить в виде таблицы.
Таблица состоит из строк и столбцов и предназначена для структурирования данных. Часто в таблицах размещают однотипные данные. Пример таблицы из школьных лет — классный журнал. Каждая строка это ученик. Колонки — даты. Напротив каждой фамилии можно проставить оценку за урок, прошедший в конкретную дату.
В HTML для создания таблиц существует набор семантических тегов:
Пример
Создадим таблицу с первыми тремя местами в топ-250 лучших фильмов:
Структурные теги
Будем создавать таблицу вместе и по ходу дела разбираться с нужными тегами и атрибутами.
Это парный тег, внутри которого мы дальше разметим строки и ячейки. А пока просто создадим нашу таблицу.
Пока добавим три строчки в таблицу:
«tr» расшифровывается как «table row» и переводится «ряд таблицы».
Ячейки формируют из себя столбцы. В HTML нет специального тега для столбцов.
«td» расшифровывается как «table data» и переводится «данные таблицы».
Теперь в нашей таблице 3 строки. В каждой строке по две ячейки. Из этих ячеек складывается два столбца.
По смыслу данных, в принципе, понятно, что в этой таблице. Но лучше добавить подписи для колонок, чтобы исключить недопонимание.
Но в таком варианте заголовки ячеек ничем не будут отличаться ни внешне, ни по смыслу от обычных ячеек.
Специально для заголовков ячеек или строк есть тег . Обернём в этот парный тег заголовки:
К ячейкам, обёрнутым тегом , применяются дефолтные стили: текст становится жирным и выравнивается по центру ячейки. Это помогает внешне отделить заголовки от остальных данных таблицы.
«th» расшифровывается как «table header» и переводится «заголовок таблицы».
Теги логической группировки
Существуют также теги , , и . Казалось бы, у нас уже есть прекрасно выглядящая таблица. К чему усложнять?
Во-первых, это красиво
Но если говорить серьёзно, то эти теги помогают лучше читать разметку сложных таблиц и отделять зёрна от плевел: структурные части таблицы друг от друга. Например: сложную шапку от тела с данными, и всё это — от результатов подсчёта в подвале.
К тому же, правильно свёрстанная таблица может отобразиться в поисковике в виде сниппета.

по своей семантике похож на тег , только его «влияние» распространяется в пределах таблицы.
Наличие этих тегов в разметке удобно и с точки зрения стилизации. Можно разом применить стили к блоку целиком, используя селекторы thead , tbody или table : not ( tbody ) (почему бы и нет? )
Добавим в нашу таблицу :
Этот тег предназначен для основной части таблицы. Внутрь него помещаются строки с данными.
Можно использовать несколько внутри таблицы, разделяя тем самым данные на отдельные блоки.
Этот тег схож по семантике с , но в пределах таблицы.
Обернём все айфоны в один и добавим пару андроидов, чтобы показать, что может быть больше одного блока данных:
Тег нужен для строки «Итого» — некой строки с итогом данных таблицы. В таблице может быть только один блок .
Браузер всегда отрисовывает внизу таблицы, даже если этот блок идёт в разметке не последним (хоть это и не очень логично).
По семантике этот тег похож на , только в пределах таблицы.
Добавим в нашу таблицу строку со средней ценой всех телефонов:
Все три тега, перечисленные в этом разделе, не имеют дефолтных стилей и не влияют на внешний вид таблицы. Только на семантику.
Если вы не используете ни один из этих тегов, то браузер самостоятельно добавит при отрисовке таблицы.
Если нужно подписать таблицу, дать ей определение, то можно использовать парный тег . В него помещается общая информация о таблице. Подробнее в статье про .
Например, для нашей таблицы прекрасно подошло бы описание «Цены на флагманские модели iPhone и Xiaomi». Добавим его в разметку (часть данных опущена для краткости):
Атрибуты
Помимо глобальных атрибутов при работе с таблицами вам могут очень пригодиться атрибуты colspan и rowspan . Оба атрибута предназначены для объединения ячеек. colspan нужен для объединения ячеек из 2 или более столбцов, а rowspan для объединения ячеек из 2 или более рядов.
Но теперь в итоговой строке количество ячеек не совпадает с общим числом колонок в таблице. Растянем первую ячейку на две колонки:
Подсказки
У таблицы нет встроенных стилей для отображения границ ячеек. Не удивляйтесь, если, написав разметку, вы не увидите рамки. Используйте CSS-свойство border .
Внимательно считайте количество ячеек в строках таблицы. Оно должно быть одинаковым. Особенно важно это делать, если растягиваете ячейки по горизонтали или вертикали. Не удивляйтесь, если снизу таблицы или сбоку в одной из строк внезапно будет торчать ячейка, нарушая красоту вашей таблицы. Вы просто где-то забыли удалить лишнюю ячейку.
Средствами CSS можно создать конструкцию, визуально максимально похожую на таблицу, но лучше так не делать. Важно не только внешнее сходство, но и смысловая нагрузка. Проще всего добиться совпадения смысла и визуального сходства, используя теги из этой статьи.
Ширина таблицы по умолчанию подстраивается под контент внутри, если не задавать дополнительные CSS-свойства.
Это приводит к определённым сложностям на адаптивных сайтах. Если контент не помещается на маленький экран, то таблица не сжимается, у неё появляется горизонтальный скролл.
У этой проблемы есть несколько потенциальных решений: скрывать не первостепенную информацию для пользователей мобильных устройств или перестраивать отображение таблицы, например, при помощи свойства display .
На практике
Алёна Батицкая
Частый дизайнерский приём — подсветка строк таблицы через одну. Это помогает считывать длинные таблицы, глазу есть за что зацепиться.
Например, сделаем каждую вторую строку с коричневым фоном. Для этого понадобится всего одно CSS-правило с псевдоклассом : nth — child ( ) :
На всякий случай подстрахуемся и ограничим область раскрашивания только телом таблицы, исключим шапку и подвал.
Можно сделать так, чтобы строка с заголовками колонок прилипала при прокрутке длинной таблицы. Это удобно, если данных много и пользователь может просто забыть, в какой колонке какие данные.
Не забудьте добавить position : relative для родителя. Заодно подстрахуемся и сделаем прилипающими только заголовки в шапке таблицы.
Задайте фон заголовкам, чтобы текст ячеек не был виден при прокрутке. А чтобы избавиться от линий между ячейками, зададим для всей таблицы свойство border — collapse : collapse :
Хотя в целом поддержка хорошая, не во всех браузерах будет работать это позиционирование в таблицах. Подробнее смотрите на Can I use.
HTML таблицы основы
Этот раздел познакомит вас с таблицами HTML, представив самые базовые понятия — строки и ячейки, заголовки, слияние строк и столбцов, а также объединение всех ячеек в столбце в целях стилизации.
| Начальные условия: | Знание основ HTML (читайте Введение в HTML — Introduction to HTML). |
|---|---|
| Цель: | Общее знакомство с таблицами HTML. |
Что такое таблица ?
Таблица — это структурированный набор данных, состоящий из строк и столбцов (табличных данных). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например — человек и его возраст, или расписание в плавательном бассейне.


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

Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.
Как работает таблица?
Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.
| Субъект | Объект | |||
|---|---|---|---|---|
| Единствен. числ. | 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 является плохой идеей по следующим причинам :
- Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
- Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
- Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, , , , или ) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.
Упражнение: ваша первая таблица
Итак, мы уже достаточно говорили о теории, теперь возьмём конкретный пример и построим таблицу.
- Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новой папке на вашем компьютере.
- Содержимое любой таблицы заключается между двумя тегами : . Добавьте их в тело HTML.
- Самым маленьким контейнером в таблице является ячейка, она создаётся элементом (‘td’ — сокращение от ‘table data’). Введите внутри тегов table следующее:
Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент (‘tr’ — сокращение от ‘table row’). Попробуем, как это получится.
В результате получится таблица, которая будет выглядеть примерно так:
| 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).
Добавление заголовков с помощью элементов
Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как «Person» и «Age» в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:
Теперь как выглядит таблица:
| Knocky | Flor | Ella | Juan | |
| Breed | Jack Russell | Poodle | Streetdog | Cocker Spaniel |
| Age | 16 | 9 | 10 | 5 |
| Owner | Mother-in-law | Me | Me | Sister-in-law |
| Eating Habits | Eats everyone’s leftovers | Nibbles at food | Hearty eater | Will eat till he explodes |
Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.
Упражнение: заголовки
Попробуем улучшить эту таблицу.
Примечание: Законченный пример можно найти на dogs-table-fixed.html в GitHub (посмотрите живой пример).
Для чего нужны заголовки?
Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.
Примечание: По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.
Заголовки дают дополнительное преимущество — вместе с атрибутом scope (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно
Слияние нескольких строк или столбцов
Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмём простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
Исходная разметка выглядит так:
Но результат не такой, как хотелось бы:
| Animals | |
|---|---|
| Hippopotamus | |
| Horse | Mare |
| Stallion | |
| Crocodile | |
| Chicken | Cock |
| Rooster |
Нужно, чтобы «Animals», «Hippopotamus» и «Crocodile» распространялись на два столбца, а «Horse» и «Chicken» — на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты colspan и rowspan , которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, colspan=»2″ распространяет ячейку на два столбца.
Воспользуемся colspan и rowspan чтобы улучшить таблицу.
- Сначала создайте локальную копию animals-table.html и minimal-table.css в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.
- Затем используйте атрибут colspan чтобы распространить «Animals», «Hippopotamus» и «Crocodile» на два столбца.
- Наконец, используйте атрибут rowspan чтобы распространить «Horse» и «Chicken» на две строки.
- Сохраните код и откройте его в браузере, чтобы увидеть улучшения.
Примечание: Законченный пример можно посмотреть в animals-table-fixed.html на GitHub (живой пример).
Стилизация столбцов
И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы и . Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде :nth-child() (en-US) было бы слишком утомительно.
Возьмём простой пример:
| Data 1 | Data 2 |
|---|---|
| Calcutta | Orange |
| Robots | Jazz |
Мы определяем два «стилизующих столбца». Мы не применяем стиль к первому столбцу, но пустой элемент ввести необходимо — иначе к первому столбцу не будет применён стиль.
Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент с атрибутом span, таким образом:
Подобно colspan и rowspan , span принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.
Упражнение: colgroup и col
Теперь попробуйте сами.
Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.
| Mon | Tues | Wed | Thurs | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
| 1st period | English | German | Dutch | |||
| 2nd period | English | English | German | Dutch | ||
| 3rd period | German | German | Dutch | |||
| 4th period | English | English | Dutch |
Заново создайте таблицу, проделав указанные ниже действия.
Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).
Здесь приведены практически все базовые сведения о таблицах HTML. В следующей статье вы получите более продвинутые сведения на эту тему.
HTML Таблицы
Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.
Элемент служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента парный блочный тег (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом .
Элемент (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент , однако его назначение — создание заголовка строки или столбца. Как правило, элемент размещают в первой строке таблицы. Браузеры отображают текст в элементе жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.
Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:
Пример: Простая HTML-таблица
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2×1 | Ячейка 2×2 | Ячейка 2×3 |
| Ячейка 3×1 | Ячейка 3×2 | Ячейка 3×3 |
Граница таблицы
Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так:
Пример: Применение свойства border
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2×1 | Ячейка 2×2 | Ячейка 2×3 |
| Ячейка 3×1 | Ячейка 3×2 | Ячейка 3×3 |
| Свойство border следует устанавливать как для самой таблицы так и для её ячеек и . |
Одинарная рамка для таблицы
По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:
Пример: Применение свойства border-collapse
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2×1 | Ячейка 2×2 | Ячейка 2×3 |
| Ячейка 3×1 | Ячейка 3×2 | Ячейка 3×3 |
Поля и интервалы таблицы
По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу или . Интервал ячеек (border-spacing) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими.
Пример использования padding и border-spacing:
Пример: Применение свойств padding и border-spacing
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
| Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает. |
Ширина таблицы
Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:
Пример: Применение свойства width
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Объединение ячеек (colspan и rowspan)
Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки или ячейки объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.
Объединение столбцов
Объединение столбцов достигается с помощью атрибута colspan в элементах или — ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца.
Пример: Применение атрибута colspan
| Ячейка на два столбца | |
|---|---|
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Объединение строк
Строки, объединенные при помощи атрибута rowspan, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
В этом примере первая ячейка таблицы растягивается на две строки вниз:
Пример: Применение атрибута rowspan
| Ячейка на две строки | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Ячейка 3 | Ячейка 4 |
Заголовок таблицы
Для создания заголовка или подписи таблицы используется парный тег (от англ. caption – подпись). Элемент предназначен для организации заголовка таблицы. Располагается сразу после тега , но вне описания строки или ячейки.
Пример: Применение тега
| Ячейка на две строки | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Ячейка 3 | Ячейка 4 |
Теги группирования элементов таблиц
Для группирования элементов таблиц служат теги , и . Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз дания верхней шапки таблицы) используется тег . Заголовки таблицы должны быть помещены в элемент , например:
Основное содержимое (тело) таблицы должно находиться внутри элемента (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег (в одной таблице допускается не более одного тега ). В исходном коде тег ставится до тега . Кроме логического группирования одной из причин использования элементов и является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок ( ) и последнюю строку ( ), когда пользователь станет прокручивать вашу таблицу.
Пример: Теги , и
| Это шапка таблицы | |||
|---|---|---|---|
| Это подвал таблицы | |||
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Несмотря на то, что мы перед добавили , он, тем не менее, появляется в конце таблицы. Это исходит из того, что может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему в коде прописывается перед элементом .
Задачи
Объединение столбцов
Напиште разметку для таблицы, изображенной на рис.1.
Задача HTML:
Реши сам »
| Ячейка на два столбца | |
|---|---|
| Ячейка 1 | Ячейка 2 |
Объединение строк
Напиште разметку для таблицы, изображенной на рис.1.
Задача HTML:
Реши сам »
| Ячейка на три строки | Ячейка 1 |
|---|---|
| Ячейка 2 | |
| Ячейка 3 |
Убрать двойную рамку таблицы
По умолчанию граница таблицы имеет эффект двойной рамки, измените код так, чтобы все линии этой рамки стали одинарными.
Задача HTML:
Широкая таблица
Сделайте чтобы эта таблица отображалось полностью на всю ширину окна браузера вне зависимости от ее ширины.
Задача HTML:
Заголовок таблицы
Измените приведенный код так, чтобы над таблицей появился основной заголовок (подпись), как показано на рис.1.
Задача HTML:
Поле внутри ячеек
Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.
Задача HTML:
Объединение строк
Попробуйте написать разметку для таблицы, изображенной на рис.1. Совет: Строки всегда объединяются сверху вниз, поэтому ячейка с «ананасами» является частью первой строки.
Создание таблиц в HTML. Все о HTML таблицах
В HTML для создания таблиц используются теги группы table. К ним относятся:
-
— тег обвертка таблицы; — тег строки (ряда) таблицы; — тег обычной ячейки таблицы; — тег ячейки-заголовка таблицы; — тег колонки таблицы; — тег группы колонок таблицы; — тег верхнего колонтитула таблицы; — тег основной части таблицы; — тег нижнего колонтитула таблицы; — тег подписи таблицы.
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.
Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.
Простая HTML таблица
Чтобы создать простую таблицу HTML достаточно 3 тега: , и .
Далее необходимо определить строки и ячейки — структуру таблицы.
Пример простой таблицы HTML
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Исходный код простой таблицы HTML
Заголовки таблицы HTML
Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.
Пример HTML таблицы с заголовком th
| Volkswagen AG | Daimler AG | BMW Group |
|---|---|---|
| Audi | Mercedes-Benz | BMW |
| Skoda | Mercedes-AMG | Mini |
| Lamborghini | Smart | Rolls-Royce |
Исходный код таблицы HTML с заголовками th
Объединение ячеек в таблице HTML
В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.
Чтобы объединить ячейки по горизонтали используйте атрибут colspan , у ячейки или , где x — количество ячеек для объединения.
Чтобы объединить ячейки по вертикали используйте атрибут rowspan , у ячейки или , где x — количество ячеек для объединения.
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:
Пример HTML таблицы с объединением ячеек
| Nissan | ||
|---|---|---|
| Модель | Комплектация | Наличие |
| Nissan Qashqai | VISIA | + |
| TEKNA | + | |
| Nissan X-Trail | ACENTA | + |
| CONNECTA | — | |
Исходный код таблицы HTML с объединенными ячейками
Колонтитулы и подпись в HTML таблицах
HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.
По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.
По необходимости к таблице можно добавить подпись. Для этого используйте тег .
Пример HTML таблицы с колонтитулами и подписью
| Характеристика | SUTA 09H 6R | SUTA 09HR6R | SUTA 15H 5R |
|---|---|---|---|
| Наличие | + | + | + |
| Мощность двигателя | 0,9 (90 л.с.) | 0,9 (90 л.с.) | 1,5 (90 л.с.) |
| Топливо | бензин | бензин | дизель |
| Норма токсичности | Евро-6 | Евро-6 | Евро-5 |
Исходный код таблицы с колонтитулами и подписью
Колонки и группы колонок
HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .
Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Оба тега могут определять стили для одной или нескольких колонок. Атрибут span , указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.
Пример HTML таблицы с разделением на колонки
| ZEN 2E2C AL A | ZEN 2E2C J5 A | INTENSE 2E3C AL A | Характеристика |
|---|---|---|---|
| 1.5 (90 л.с.) | 1.2 (115 л.с.) | 1.5 (90 л.с.) | Мощность двигателя |
| дизель | бензин | дизель | Топливо |
| АКП6 (EDC) | АКП6 (EDC) | АКП6 (EDC) | Трансмиссия |
Исходный код таблицы HTML c и
Таблицы в макете страниц сайта
На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).
Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.
Таблицы
Таблицы применяются для группирования и упорядочивания данных по столбцам или строкам. Каждая таблица состоит нескольких элементов.
Ячейка — минимальная единица таблицы, в ячейке располагаются сами данные, это может быть текст, картинки или что-то ещё.

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

Колонка — совокупность ячеек, расположенных друг под другом по вертикали.

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

Ячейка заголовка — ячейка, которая применяется для обозначения заголовка колонки или строки таблицы. Браузеры, как правило, текст в такой ячейке отображают жирным начертанием и выравнивают по центру.

Создание таблицы
Пример 1. Создание таблицы
| Ячейка 1 | Ячейка 2 |
|---|---|
| Ячейка 3 | Ячейка 4 |
Порядок вывода ячеек и их вид показан на рис. 1.

Рис. 1. Результат создания таблицы с четырьмя ячейками
Вид таблицы настраивается с помощью CSS, в том числе цвет и толщина рамки, атрибут border приведён лишь для того, чтобы показать границы ячеек.
Особенности таблиц
- Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически, исходя из суммарной ширины содержимого ячеек.
- Максимальная ширина таблицы — это, как правило, всё доступное пространство по ширине. Большой текст внутри ячеек переносится и форматируется браузером так, чтобы таблица заняла всю ширину. Но бывают исключения, когда внутри ячеек добавляются широкие картинки, в таком случае ширина таблицы может превысить ширину окна браузера и появится горизонтальная полоса прокрутки.
- Содержимое ячеек по умолчанию выравнивается по центру вертикали. Если содержимое ячеек различается по объёму, то в одной ячейке снизу и сверху текста появится пустое пространство.
Заголовок таблицы
При большом количестве таблиц на странице, каждой из них удобно задать своё название. Для этой цели в HTML существует специальный элемент , который устанавливает текстовый заголовок, он располагается сверху таблицы по центру, его ширина не превышает ширины таблицы, и в случае длинного текста он автоматически переносится на новую строку.
Пример 2. Использование
| 2023 | 2024 | 2025 | |
|---|---|---|---|
| Heфть | 43 | 51 | 79 |
| 3oлoтo | 29 | 34 | 48 |
| Дерево | 38 | 57 | 36 |
Результат данного примера показан на рис. 2. Удобство использования состоит в том, что заголовок, созданный с его помощью, оказывается привязанным к таблице и не выходит за условные рамки, ограниченные её шириной.

Рис. 2. Вид заголовка таблицы
Объединение ячеек
Мы пока рассмотрели достаточно простые таблицы, в которых число ячеек в каждой строке и колонке одинаковое. Но порой встречаются таблицы, где в разных строках или колонках число ячеек различается. Это требуется для создания сложных таблиц, где, к примеру, заголовок охватывает сразу несколько ячеек (рис. 3).

Рис. 3. Таблица с объединёнными ячейками
Для объединения ячеек по горизонтали или, иными словами, по колонкам, применяется атрибут colspan , значением которого выступает число ячеек, требуемых для объединения. К примеру, в первой строке таблицы нам нужно две ячейки, а во второй строке только одна. Вот так писать ошибочно.
| 1 | 2 |
| 3 |
Потому что это приведёт лишь к созданию «дыры» в таблице, поскольку число ячеек в первой строке не совпадает с числом ячеек во второй строке (рис. 4).

Рис. 4. Неверное число ячеек
| 1 | 2 |
| 3 | |
На рис. 5 показана таблица, для которой мы применили colspan .

Рис. 5. Результат использования colspan
Аналогично обстоит дело и с атрибутом rowspan , который объединяет ячейки по строкам или по вертикали, иными словами. В примере 3 показан код для создания таблицы, продемонстрированной на рис. 3.
Пример 3. Объединение ячеек
| Вид соединения | Поля допусков ширины шпоночного паза | |
| Вал | Втулка | |
| Свободное | H9 | D10 |
| Нормальное | N9 | Is9 |
| Плотное | P9 | |
В данной таблице установлено три колонки и три строки. Первые две ячейки объединены по вертикали, а следующие две — по горизонтали.
Таблицы — Основы вёрстки контента
Таблицы — страшный сон верстальщика. Они громоздкие в своей вёрстке и в них очень легко запутаться. Важно «набить руку» и вы сможете достаточно быстро и без боли верстать даже самые сложные варианты таблиц.
Базовая вёрстка таблиц
Таблица — составной элемент, который формируется сразу из нескольких вложенных друг в друга тегов. Это похоже на то, как верстаются списки — имеется контейнер и внутри него специальные теги-элементы. Таблицы имеют похожие структуры, только контейнеров и элементов немного больше.
В отличие от списков, таблицы можно назвать двухмерной системой. Здесь есть строки и столбцы. Именно в таком порядке они и обозначаются.
Важно: количество колонок должно совпадать в каждой строке. Если количество колонок будет не совпадать, то таблица может банально «сломаться». Следите за этим.
Заметьте, что по умолчанию таблицы не имеют никаких границ между строками и ячейками. Для их добавления можно пойти двумя путями:
Лучший вариант — использование CSS. Так вы будете хранить стили в одном месте, и не будет нужды вспоминать об атрибутах.
Главная неприятность — возникновение двойных границ. Это может быть дизайнерской «фишкой», но чаще всего такое не требуется. Нужно «схлопнуть» отступы и для этого используется свойство border-collapse со значением collapse . Для возвращения в исходное состояние используется значение separate .
Выравнивание контента по вертикали
Помимо знакомого вам свойства text-align , таблицы позволяют выравнивать контент по вертикали. Это простая операция, которая постоянно использовалась во времена табличной вёрстки. Главное, не пытайтесь найти такие макеты. Выровнять по вертикали можно любой контент, будь то просто текст или какой-то блок.
Для выравнивания по вертикали используется свойство vertical-align , которое принимает одно из четырёх значений:
- baseline — выравнивание по базовой линии шрифта. Подробнее с таким выравниванием и его принципами вы познакомитесь в курсе CSS: Flex.
- top — выравнивание по верхнему краю ячейки.
- middle — выравнивание по центру. Стандартное поведение для контента внутри ячеек.
- bottom — выравнивание по нижнему краю ячейки.
Заголовки таблицы
Сложно представить себе таблицу, которая не имеет заголовков. Без них понять, какая ячейка относится к какой информации, почти невозможно. Можно визуально задать стили заголовков и для некоторых ячеек ввести свои стили. Но семантически таких заголовков не будет существовать, что плохо для доступности.
Хорошей практикой является добавление тега для основного контента. Если этого не сделать, то браузер подставит его сам, но лучше доверять собственной разметке, чем работе браузера.
В качестве заголовка самой таблицы используется текст, обрамлённый в тег . По умолчанию он располагается вверху всей таблицы, вне зависимости от того, где вы расположите тег. Это поведение можно контролировать с помощью свойства caption-side . Оно принимает одно из двух значений:
- top — позиция по умолчанию. Заголовок располагается до таблицы.
- bottom — расположение заголовка после таблицы.
Пример таблицы с использованием новых тегов и свойств:
Объединение строк и столбцов
Не все таблицы имеют простую структуру из ровных столбцов и строк. Объединение нескольких строк или столбцов — распространённая практика при вёрстке таблиц. Рассмотрим базовые правила на примере табеля выплаты зарплаты сотрудников.
Сама по себе таблица является достаточно простой и не должна вызвать у вас никаких проблем. Попробуйте сверстать её самостоятельно. После этого продолжите урок. Чем больше таблиц вы сверстаете, тем меньше ошибок в них будете допускать.
Создадим базовый каркас всей таблицы, без объединения строк или столбцов:
Обратите внимание на пустые ячейки. Они не нужны в данной таблице и от них нужно избавиться таким образом, чтобы информация в соседних ячейках получила правильный перенос и начала занимать всё доступное пространство.
В HTML для этой операции существуют два атрибута:
- colspan — объединение столбцов.
- rowspan — объединения строк.
Принцип работы достаточно прост — в качестве значения атрибута указывается количество строк/столбцов, которое должен занять элемент. Например,
- — ячейка должна занять пространство трёх столбцов.
- — ячейка должна занять пространство в две строки.
Важно: ячейки, на месте которых будут расположены ячейки с colspan и rowspan, должны быть удалены из таблицы.
Попробуем объединить данные о менеджере первых двух сотрудников. Для этого нужно у ячейки с нужным менеджером установить атрибут rowspan со значением 2. Обязательно нужно удалить последнюю ячейку в строке ниже.
Проделаем то же самое для последней строки, только теперь нужно объединить столбцы. Для этого используем атрибут colspan со значением 4.
Итоговый вид таблиц:
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Составление заголовка в Excel: пошаговая инструкция
Название документа – это, скажем так, его визитная карточка. То же самое можно сказать и о таблицах Excel. Ведь куда приятнее и комфортнее воспринимать информацию, если она правильно и логично оформлена, особенно, когда речь идет о большом объеме данных. Давайте разберемся, как составить заголовки таким образом, чтобы сделать таблицу более привлекательной и понятной для восприятия.
Суть заголовка
Одним из основных факторов, позволяющих заголовку раскрывать тематику конкретной таблицы и в достаточной мере описывать содержащуюся в ней информацию, является его смысловой посыл. Необходимо, чтобы название говорило о сути содержимого таблицы, и в краткой форме давало пользователю точное понимание, о чем идет речь в ней.
Однако, в этой статье мы не будет останавливаться на смысловой составляющей заголовка, а поговорим о конкретном алгоритме его создания.
Шаг 1. Определяемся с местом заголовка
Для того, чтобы озаглавить таблицу, необходимо сначала определиться с местом для расположения заголовка.
- Если верхняя граница таблицы расположена сразу на первой строке книги, то нужно сместить ее на некоторое количество строк вниз, исходя из предполагаемого размера заголовка. Кликаем правой кнопкой мыши по любой ячейке первой строки и в открывшемся меню щелкаем по функции “Вставить…”.
- После этого на экране появится небольшое вспомогательное окно, которое позволяет выбрать, что конкретно нужно вставить. Поскольку нам нужно добавить строки, соответственно, ставим отметку напротив опции “строку” и кликаем OK.
Если вам показалось, что добавление строк таким образом – слишком затянутый процесс, то есть метод, который позволяет ускорить это процесс. С его помощью можно одним действием вставить несколько строк и расположить их над таблицей. Для этого нужно придерживаться следующего алгоритма действий:
- В верхней части таблицы выделяем диапазон ячеек по вертикали, содержащий столько строк, сколько мы планируем добавить сверху. Затем правой кнопкой мыши кликаем по любому элементу выделенной области и в открывшемся контекстном меню выбираем функцию “Вставить…”.
- Снова откроется вспомогательное окно, предлагающее на выбор опции вставки. Выбираем “строку” и нажимаем OK.
Кроме этого есть еще один метод добавления новых строк.
- В верхней части таблицы выделяем диапазон ячеек по вертикали, который будет соответствовать количеству новых строк, которое мы планируем добавить. Затем переключаемся во вкладку “Главная”, кликаем по треугольной пиктограмме с правой стороны от кнопки “Вставить” (в разделе “Ячейки”). Из появившегося перечня выбираем функцию “Вставить строки на лист”.
- Перед таблицей добавятся новые строки и их количество соответствует числу строк в выделенном ранее диапазоне.
Итак, подготовительный этап пройден, можно двигаться дальше.
Шаг 2. Вводим текст и выравниваем его
Теперь пора заняться, непосредственно, самим заголовком таблицы. Как ранее было сказано, мы не будем затрагивать информационную и смысловую составляющую, вместо этого лучше сфокусируем внимание на технических аспектах.
- Для начала выбираем любую ячейку (в пределах границ табличной части документа) в только что добавленных новых строках и пишем туда желаемый текст.
- если перед таблицей 2 пустые строки, предпочтение стоит отдавать первой.
- если перед таблицей 3 строки, выбрать лучше среднюю (в нашем случае).
- Теперь нужно выровнять заголовок по центру таблицы, чтобы он стал более заметным и информативным. Выделяем все ячейки строки, в которую мы только что добавили заголовок, причем, правая и левая границы выделенной области должны полностью совпадать с границами самой таблицы и не выходить за их пределы. Затем переключаемся во вкладку “Главная” и кликаем по кнопке “Объединить и поместить в центре” (раздел “Выравнивание”).
- Все выделенные ячейки объединились в одну широкую ячейку, а сам заголовок расположился в ней по центру.
Давайте рассмотрим еще один метод, пользуясь которым можно объединять ячейки в одну единую. На его реализацию нужно потратить немного больше времени, но все же, знать его будет не лишним.
- Выделяем все ячейки строки, содержащей заголовок (в пределах границ таблицы). Кликаем правой кнопкой мыши по любому месту выделенной области и в открывшемся контекстном меню щелкаем по строке “Формат ячеек…”.
- Откроется окно форматирования, в котором переключаемся во вкладку “Выравнивание”. В параметрах отображения ставим флажок напротив опции “Объединение ячеек”. В настройках выравнивания по горизонтали раскрываем перечень доступных вариантов (щелкнув по текущему) и выбираем “По центру”. Подтверждаем выполненные действия нажатием кнопки OK.
- Ячейки, находящиеся в выделенной области, объединяться в одну, а заголовок разместится по центру нового элемента.
Стоит заметить, что в определенных ситуациях процедура объединения ячеек не рекомендуется. К примеру, при работе с “умными” таблицами этим методом лучше не пользоваться. Также, есть ситуации, в которых данная процедура может нарушить структурную целостность таблицы или изменить первоначальный вид.
Как же тогда пользователю добиться расположения заголовка по центру таблицы, но при этом, не прибегать к объединению ячеек? Выход есть, и для реализации поставленной задачи необходимо выполнить следующий порядок действий:
- Выделяем строку с заглавным текстом, таким же образом, как и в предыдущих примерах. Кликаем по выделенной области и выбираем в появившемся меню опцию “Формат ячеек…”.
- В окне форматирования настраиваем выравнивание по горизонтали “по центру выделения” (список раскрывается щелчком по текущему варианту). Нажимаем OK, чтобы подтвердить совершенные действия.
- Наименование расположилось по центру таблицы без слияния ячеек. Также обратите внимание, что хоть заголовок и разместился посередине, его фактический адрес (ячейка, содержащая текст) не изменился.
Шаг 3. Форматируем текст
Теперь можно перейти к форматированию текста заголовка. Наша цель – добиться того, чтобы текст выглядел довольно броско, информативно и при этом, достаточно привлекательно. Внести соответствующие настройки нам помогут специальные инструменты, расположенные на ленте программы.
- Для начала кликаем по ячейке с заголовком. Выбрать нужно именно ту, в которой фактически находится текст. Понять это достаточно просто – достаточно взглянуть на строку формул.
- если в строке формул отображается текст заголовка, то все в порядке, мы выбрали правильную ячейку.
- если после выделения ячейки строка формул останется пустой, это означает, что в выбранной ячейке нужного нам названия нет.
- в определенных случаях может быт так, что при выделении, на первый взгляд, пустой ячейки, в строке формул отображается введенный ранее текст. Это говорит о том, что ранее в этом диапазоне было применено выравнивание по центру выделения, из-за чего визуально мы видим заголовок по центру, хотя фактически он находится всего лишь в одной ячейке.
- Теперь, когда мы определились с тем, какую ячейку отметить, можно сделать текст заголовка полужирным, чтобы он выделялся на фоне остальной информации на листе. Для этого кликаем по кнопке со значением «Ж» (раздел “Шрифт”, вкладка “Главная”). Вместо этого также можно воспользоваться горячими клавишами Ctrl+B.
- Для увеличения размера заголовка снова выделяем ячейку, содержащую текст, затем в поле “Размер шрифта” щелкаем по треугольной пиктограмме с правой стороны от текущего размера. Откроется список, в котором можно выбрать тот размер, который будет оптимально смотреться вместе с текущей таблицей.Вместо того, чтобы раскрывать список с размерами, можно его прописать вручную. Для этого кликаем по полю с текущим значением, удаляем его, пишем свое и нажимаем Enter на клавиатуре.
- Кроме этого, есть возможность изменения типов самого шрифта, вместо стандартного можно выбрать более оригинальный и интересный вариант. Как обычно, выделяем ячейку, содержащую текст. И в том же разделе, который позволяет настроить размер шрифта, также нажимаем на небольшой треугольник, правда, теперь на тот, что расположен с правой стороны от поля “Шрифт”. После этого откроется список всех доступных вариантов. Выбираем наиболее уместный и щелкаем по нему. Обращаем ваше внимание на то, что изменение шрифта может повлечь за собой изменение восприятия информации. Стоит учесть, что некоторые шрифты неуместны в документах определенной тематики.
Примечание: На самом деле, заниматься форматированием текста можно практически бесконечно. Программа Эксель позволяет применять к тексту курсив, менять его цвет, использовать подчеркивание, применять заливку и т. д. Но, как правило, вполне достаточно использования наиболее простых, но при этом, популярных инструментов форматирования.

Шаг 4. Закрепляем заголовок
Довольно часто в случае с большими таблицами нужно сделать так, чтобы текст заголовка был все время на виду даже после прокрутки таблицы до самой нижней строки. В программе есть функция, которая может помочь зафиксировать необходимую строку с названием таблицы, чтобы она всегда оставалась на виду.
- Если заголовок расположен только в одной первой строке листа, процесс его фиксации достаточно прост. Переключаемся во вкладку “Вид”, нажимаем кнопку “Закрепить области”, в появившемся перечне выбираем функцию “Закрепить верхнюю строку”.
- В результате, строка с названием таблицы будет зафиксирована в самом верху листа и никуда не денется при пролистывании документа вниз.
Однако, не во всех случаях заголовок размещен именно в самой верхней строчке листа. Ранее мы уже рассматривали пример, в котором он может занимать вторую строку (из трех). Кроме того, стоит заметить, что гораздо удобней работать с документом, когда не только заголовок, но и сама шапка таблицы зафиксированы и постоянно находятся в области видимости. Благодаря этому пользователь может намного быстрее и безошибочнее соотносить данные строк и столбцов. Для того, чтобы зафиксировать более одной строки, следует действуем немного по-другому:
- Выделяем ячейку, которая расположена слева под областью, которую планируется закрепить. В нашем случае мы будем фиксировать текст заголовка вместе с шапкой таблиц, а значит ставим курсор на ячейку A5. Выделив нужную ячейку, нажимаем на кнопку “Закрепить области” (вкладка “Вид”), и из предложенного перечня на этот раз выбираем функцию “Закрепить области”.
- После этого произойдет фиксация всех строк, расположившихся выше выбранной нами ячейки.
Примечание: Если необходимо зафиксировать только само название, выбираем ячейку слева, которая располагается сразу же под строкой, содержащей название. Дальше действуем так же, как было описано выше.

Шаг 5. Размещаем заголовок на всех листах при печати
Достаточно часто, когда таблица занимает больше одной страницы, требуется распечатка заголовка (и шапки, в том числе) на каждом листе. В Excel существуют инструменты, с помощью которых можно выполнить эту задачу. При этом сам текст заголовка не нужно прописывать на каждой странице отдельно.
Итак, воспользуемся так называемыми “сквозными строками”.
- Для начала переключаемся во вкладку “Разметка”. Затем в разделе “Параметры страницы нажимаем на кнопку “Печатать заголовки”.
- Появится вспомогательное окно с параметрами страницы, в котором переключаемся во вкладку “Лист”. Здесь кликаем по области ввода информации рядом с надписью “сквозные строки”, далее щелкаем по любой ячейке, находящейся в строке, содержащей заголовок (курсор при этом должен иметь вид стрелки, направленной горизонтально вправо). Если все сделано правильно, то адрес всей строки отобразится в выбранном текстовом поле. Осталось подтвердить операцию нажатием кнопки OK.Примечание: вместо одной строки можно выбрать несколько, охватив и шапку таблицы, если это требуется.
- Для проверки правильности отображения заголовка при печати переходим в меню “Файл”.
- Выбираем пункт “Печать” в перечне слева. С правой стороны можно увидеть область, в которой отображается постраничный предварительный просмотр документа в том виде, в каком мы его увидим после распечатки. Как и положено, на первой странице присутствует заголовок таблицы.Далее пролистываем оставшиеся страницы, чтобы проверить, отображается ли заголовок на них, для чего воспользуемся полосой прокрутки. Также можно кликнуть по области предпросмотра и далее крутить колесо мыши, чтобы листать страницы. Помимо этого, внизу области предпросмотра есть небольшое поле, в котором указаны номера страниц и стрелки вправо-влево. Для прокрутки листов можно воспользоваться этим полем, вписав нужный номер и нажав Enter, либо щелкая по стрелкам в нужном направлении.
- Так мы можем убедиться в том, что и на последующих страницах текст заголовка отображен в верхней части страницы. Это значит, что после распечатки, он также будет присутствовать на всех листах.
Заключение
Итак, мы только что пошагово рассмотрели, как правильно составлять и оформлять заголовки таблиц в Excel. Предложенный алгоритм не является строгим и единственным, поэтому по усмотрению пользователя он может быть изменен. Однако, в данной статье описаны основные шаги в этом направлении с подчеркиванием ряда ключевых моментов, на которые стоит обратить внимание. При этом, существует достаточно большое количество пользовательских решений, позволяющих создавать и форматировать название таблицы другими методами, и многое в данном случае зависит от фантазии, творческого потенциала и умений самого человека.






