В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.

Средства описания таблиц в HTML

По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег

), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.

Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы - тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>.
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>. Число тегов <ТD> в строке определяет число ячеек

 

 
Таблица
 
 

 

 
Если в таблице два
 тега TR, то в ней две строки.
 
 

 
Если в строке три тега TD,
 
то в ней
 
три столбца.
 
 
 


 
Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

 

 

 

 
Заголовок центрирован по умолчанию
 
 
Заголовок может объединять
 столбцы
 
 

 
Заголовок может быть расположен
 перед столбцами
 
Текст или данные
 
Текст или данные
 
 

 
Заголовок может объединять
 строки
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
 


Использование заголовков таблицы - тег <САРТIОN>
Тег  позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

 

 

 
Заголовок над таблицей
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 
Заголовок под таблицей
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

 

 

 

 

 
Если вы хотите сделать какую-нибудь
 ячейку шире, чем верхняя или нижняя,
 
 
можно воспользоваться атрибутом
 СОLSPAN=2, 
 
 

 
чтобы
 растянуть ее над любым количеством
 обычных ячеек.
 
 
 


Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

 

 

 

 
Текст или данные -
 ширина 100%
 
 
или

 

 

 
Текст или данные -
 ширина 50%
 
 
или

 

 

 
Текст или данные -
 ширина 200 пикселов
 
 
или

 

 

 
Текст или данные -
 ширина 100 пикселов
 
 


Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 


Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft
 прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left
 выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter
 располагает содержимое ячейки по центру.
АLIGN=right
 выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top
 выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle
 центрирует содержимое ячейки по вертикали.
VALIGN=bottom
 выравнивает содержимое ячейки по ее нижней границе.

 

 

 

 

 
Атрибут VALIGN осуществляет
 выравнивание текста и графики внутри
 ячейки по вертикали.
 
верх,
 
середина,
 
низ.
 
 

 
 VALIGN=top Выравнивает содержимое
 ячейки по ее верхней границе.
 
верх,
 
верх,
 
верх.
 
 

 
VALIGN=middle Центрирует содержимое
 ячейки по вертикали.
 
середина,
 
середина,
 
середина.
 
 

 
VALIGN=bottom Выравнивает содержимое
 ячейки по ее нижней границе.
 
низ,
 
низ,
 
низ.
 
 
 


Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 

 
Текст или данные
 
 
 


Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 
 


Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью

 

 

 

 

 

 
Уральский государственный
 педагогический университет
 
Добро пожаловать!
 

 

 
Учебный курс
 "Основы WEB-мастеринга"
 
 
 
 
 
 


 
Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:

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

 для маркированных или 

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



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





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

 обозреватель выделяет жирным и размещает по центру.

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




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

 
Инструменты создания сайтов
 

 
Назначение
Инструмент
 
 

 
Разметка
HTML
XHTML
 
 

 
Оформление
CSS
 
 

 
Разработка
PHP
Python
 
 
 

В браузере документ будет выглядеть так:
Разберём, какие строчки кода за что отвечают.
 - открыли таблицу, задав ей толщину рамок.
 - озаглавили её.
 - открыли строку.
 - создали ячейку с оформлением заголовка.
 - создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
 - закрыли строку. Аналогично создали остальные строки.
 - добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.



Инструменты создания сайтов 




Назначение


Инструмент



 

Разметка

HTML

XHTML
 


 - закрыли таблицу.


Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?»
. В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.
Как создать таблицу используя HTML

HTML-таблицы создаются в четыре шага.
1. На первом шаге в html-коде с помощью парного тега 
указываем браузеру, что в web-страницу вставлена таблица: . Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.

2. На втором шаге формируем строки
 таблицы, помещая парные теги 

. Каждый элемент  создает отдельную строку:





3. Далее, на третьем шаге формируем ячейки
 таблицы с помощью парных тегов 

 и 

, которые помещаются внутрь элемента 
 создает обычную
 ячейку, а 
 ячейку заголовка
, т.е. шапку соответствующего столбца:












4. Ну и на последнем шаге помещаем внутрь элементов 
 и 




















Столбец 1
Столбец 2
Столбец 3
Ячейка 1-1
Ячейка 1-2
Ячейка 1-3
Ячейка 2-1
Ячейка 2-2
Ячейка 2-3


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

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

При создании таблиц необходимо учитывать некоторые правила:
для создания таблицы используется только тег ;
тег 
 может находиться только внутри тега ;
теги 
, любое другое содержимое тега  игнорируется браузером;
содержимое таблицы(текст или картинки) может находиться только в тегах 
Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки):
 
Наконец, третья строка - это один столбец, включающий в себя три столбца:
 
Используя эти два параметра rowspan
 и colspan
 можно создавать таблицы любой сложности.
Потренируйтесь.
 Вложенные таблицы
Как следует из названия одну таблицу можно поместить внутрь другой, а имеено внутрь любого столбца. Сделаем это на примере
нашей последней разметки.
Итак, у нас есть вот такой код.
Исходный код простой таблицы HTML

 и 
 могут находиться только внутри тега 

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


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









Это таблица

Ячейка 1.1
Ячейка 1.2


Ячейка 2.1
Ячейка 2.2


Отображение:
Секции таблицы

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






















Столбец 1
Столбец 2
Столбец 3




Ячейка 1.1
Ячейка 1.2
Ячейка 1.3


Ячейка 2.1
Ячейка 2.2
Ячейка 2.3




Итог 1
Итог 2
Итог 3



Объединение ячеек таблицы

Осталось рассказать о самой важной возможности таблиц — объединении ячеек.
Для объединения нескольких ячеек в одну используются атрибуты colspan
 и rowspan
 тегов 
 и 
. Атрибут colspan задает количество ячеек объединенных по горизонтали, а rowspan — по вертикали:















1.1
1.2-1.3


2.1
2.2
2.3


3.1-4.1
3.2
3.3


4.2
4.3

Результат примера:
1.1

1.2-1.3

2.1

2.2

2.3

3.1-4.1

3.2

3.3

4.2

4.3

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

Пример неправильного html-кода при объединении ячеек:









ячейка 1.1
ячейка 1.2


ячейка 2.1
ячейка 2.2


И результат отображения в браузере:
Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка.
Атрибуты тега 
В этом посте мы уже столкнулись с одним атрибутом тега 
. С атрибутом border, который задает толщину рамки в пикселях. По умолчанию он равен 0 и следовательно ячейки по умолчанию отображаются без рамки.
Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом 
. Давайте их рассмотрим.
Атрибут align
— задает выравнивание
таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left.
Атрибут background
, который задает фоновый рисунок
к таблице. В качестве значения принимает адрес файла с изображением.
bgcolor
 — устанавливает цвет фона
 таблицы. Можно использовать совместно с атрибутом background.
Атрибут bordercolor
задает цвет рамки
 таблицы.
Cellpadding
 — определяет расстояние между границей ячейки и ее содержимым
. Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число.
Cellspacing
 — задает расстояние между внешними границами ячеек
.
На этом рассказывать о том как вставить таблицу в html страницу
 я закончу, только подведу итоги:
для вставки таблицы используются теги 
 — обозначение таблицы,  — добавление строки и , секция завершения  и секция тела — ;
для объединения ячеек используем атрибуты тега 
Вторая строка состоит из шести столбцов:
Третья строка состоит из двух столбцов, причем, первый включает в себя два столбца, а второй - четыре:
Не так и сложно. Накладываем зрительно сетку на рисунок и прописываем строки по очереди сверху вниз, описывая в каждой
нужное количество столбцов. 
 Тег rowspan - объединение строк
А если нам понадобится вот такая разметка? 
Обратите внимание, во второй строке у нас только один столбец, т.к. первый столбец тянется из первой строки, просто включает в
 себя две.
На первый взгляд, это может показаться сложным, на самом деле немного практики и вы будете создавать таблицы любой сложности.
Рассмотрим еще один пример:
 — вставка ячейки;
таблица представляет из себя блочные элемент web-страницы;
в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы;
таблица может содержать три вида секций: секция заголовка — 

 colspan и rowspan.
На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч!
Тег colspan - объединение столбцов
Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:
Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра
 colspan
 тега 

. Этот параметр указывает браузеру объединить несколько столбцов
 в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено.
Например,
 

 Этот столбец включает в себя два столбца.
Для нашего примера:
Заголовок документа
 
шапка сайта

меню

 
контент

низ сайта

Обратите внимание, что первая и третья строки теперь содержат по одному столбцу.
Рассмотрим другой пример разметки web-страницы:
шапка сайта

меню

 
меню

 
меню

 
меню

 
меню

 
меню

новости

 
контент

Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок.
 Получится три строки и шесть столбцов. 
Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это:
шапка сайта

меню

 
меню

 
меню

 
меню

 
меню

 
меню

новости

 
контент

шапка

 
меню

контент

низ сайта

Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:
 
шапка

 
меню

контент

низ сайта



 


















 
 
 
Ячейка 1
 
Ячейка 2
 
Ячейка 3
 
 
 
Ячейка 4
 
Ячейка 5
 
Ячейка 6
 
 
 
Ячейка 7
 
Ячейка 8
 
Ячейка 9
 
 
Заголовки таблицы HTML
В HTML таблицах существует 2 типа ячеек. Тег определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега .

Пример HTML таблицы с заголовком th
Volkswagen AG

Daimler AG

BMW Group

Audi

Mercedes-Benz

BMW

Skoda

Mercedes-AMG

Mini

Lamborghini

Smart

Rolls-Royce

Исходный код таблицы HTML с заголовками th
 






















 
 
 
Volkswagen AG
 
Daimler AG
 
BMW Group
 
 
 
Audi
 
Mercedes-Benz
 
BMW
 
 
 
Skoda
 
Mercedes-AMG
 
Mini
 
 
 
Lamborghini
 
Smart
 
Rolls-Royce
 
 
Объединение ячеек в таблице HTML
В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.
Чтобы объединить ячейки по горизонтали
 используйте атрибут colspan="х
"
, у ячейки или , где x
 
Чтобы объединить ячейки по вертикали
 используйте атрибут rowspan="х
"
, у ячейки или , где x
 - количество ячеек для объединения.
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan
 и rowspan
 для нужной ячейки:

 Текст ячейки
Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , и мы объединяем первую и вторую ячейку, то всего внутри тега , определяющего данную строку будет 2 элемента , первый из них будет содержать атрибут colspan="2"
.
Пример HTML таблицы с объединением ячеек
Исходный код таблицы HTML с объединенными ячейками
 




























 
 
 
Nissan
 
 
 
Модель
 
Комплектация
 
Наличие
 
 
 
Nissan Qashqai
 
VISIA
 
+
 
 
 
TEKNA
 
+
 
 
 
Nissan X-Trail
 
ACENTA
 
+
 
 
 
CONNECTA
 
-
 
 
Колонтитулы и подпись в HTML таблицах
HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.
Делается это при помощи обвертки строк выбранной части таблицы тегами. определяет область верхнего колонтитула, - область нижнего колонтитулы, - основную часть таблицы.
По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.
Правильный порядок размещения тегов областей в коде HTML таблицы следующий: вначале верхний колонтитул , за ним нижний колонтитул , после них основная часть . При этом на странице основная часть будет выведена между колонтитулами.
По необходимости к таблице можно добавить подпись. Для этого используйте тег .
Пример HTML таблицы с колонтитулами и подписью
Исходный код таблицы с колонтитулами и подписью
 





































 
Комплектации Renault Sandero Stepway
 
 
 
Характеристика
 
SUTA 09H 6R
 
SUTA 09HR6R
 
SUTA 15H 5R
 
 
 
 
 
Наличие
 
+
 
+
 
+
 
 
 
 
 
Мощность двигателя
 
0,9 (90 л.с.)
 
0,9 (90 л.с.)
 
1,5 (90 л.с.)
 
 
 
Топливо
 
бензин
 
бензин
 
дизель
 
 
 
Норма токсичности
 
Евро-6
 
Евро-6
 
Евро-5
 
 
Колонки и группы колонок
HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .
Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Теги и ставятся внутри тега перед тегами , АКП6 (EDC)
Трансмиссия

Исходный код таблицы HTML c  и 
 































      
 
 
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 страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).
Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.