При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку.
Атрибут COLSPAN тэгов
, |
позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.
Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца.
Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.
Т.к. при выполнении операций слияния очень легко запутаться, то настоятельно рекомендую сделать предварительный эскиз таблицы на бумаге.
Пример:
|
HTML-код:
| 1111 |
22222 |
33333 |
44444 |
55555 |
66666 |
77777 |
88888 |
99999 |
Отображение в браузере:
| 1111
|
22222
|
33333
|
| 44444
|
55555
|
66666
|
| 77777
|
88888
|
| 99999
|
|
Улучшение внешнего вида таблицы html-страницы
Атрибут CELLSPACING дает возможность задавать размер полосы чистого пространства, обрамляющих таблицу извне. По умолчанию браузер разделяет ячейки таблицы полосой в 2 пикселя.
Атрибут CELLPADDING задает размеры полос чистого пространства внутри ячейки, отделяя ее содержимое от внешних границ. По умолчанию эта величина равна 1 пикселю.
Чтобы графические изображения, помещенные в соседние ячейки таблицы, выглядели как единое целое, надо задать атрибутам CELLSPACING, CELLPADDING нулевые значения.
Отображение границ таблицы html-страницы
Если значение атрибута BORDER тэга
отлично от нуля, то браузер заключает таблицу в рамку и разграничивает соседние строки и столбцы таблицы. При помощи атрибутов FRAME, RULES можно указать какие именно части обрамлений таблицы следует показывать.
Атрибут FRAME служит для определения фрагментов внешнего очертания таблицы.
Атрибут RULES - указывает набор внутренних разделительных линий.
Ниже приведены допустимые значения этих атрибутов. FRAME
Значение Результат
void Все линии отсутствуют
above Линия над таблицей
below Линия под таблицей
rhs Линия справа от таблицы
lhs Линия слева от таблицы
hsides Линии над и под таблицей
vsides Линии слева и справа от таблицы
border Все линии присутствуют (по умолчанию)
RULES
none Все линии отсутствуют
cols Линии между столбцами
rows Линии между строками
groups Линии между группами столбцов и строк
all Все линии присутствуют (по умолчанию)
Пример:
|
HTML-код:
| 111 |
111 |
111 |
111 |
111 |
111 |
Отображение в браузере:
|
Перенос слов в ячейках таблицы html-страницы
По умолчанию браузер делает автоматический перенос слов текста внутри ячейки таблицы. Атрибут NOWRAP принудительно отключает функцию переноса слов внутри таблицы и отображает текст в одну строку. Поэтому этот атрибут рекомендуют применять по отношению к ячейкам таблицы, содержащим короткий текст, т.к. в противном случае он выйдет за пределы окна браузера. Следует сказать, что этот атрибут не оказывает воздействие на текст ячейки, отформатированный при помощи тэгов
,
.
Вложенные таблицы html-страницы
Вложение таблиц одну в другую - очень распространенный прием оформления внешнего вида Вэб-страницы.
Прежде всего надо построить главную таблицу, а затем в ее ячейках разместить дочерние таблицы. Определяя таблицы, надо не забывать включать в их описание все закрывающие тэги, содержащие символ косой черты, т.к. пропуск всего одного такого дескриптора исказит таблицу кардинальным образом.
Не следует, также, злоупотреблять вложением, т.к. в этом случае существенно замедляется загрузка страницы браузером.
Форматирование вложенных таблиц осуществляется по общим правилам, что, собственно и делает страницу привлекательной.
Пример:
|
HTML-код:
| 111 |
111 |
| 01 |
01 |
01 |
01 |
111 |
111 |
111 |
Отображение в браузере:
|
Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.
Теги и атрибуты таблиц
Вот основные элементы, которые нужны для создания таблиц:
- контейнер, внутри которого располагается таблица (такой же, как для маркированных или
для нумерованных списков).
- border
- атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
-
задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега
, вне ячеек и строк.
- парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
|
- тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках - обычно текст внутри |
обозреватель выделяет жирным и размещает по центру.
- контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег
, столько ячеек в ней и будет: один тег - одна ячейка.
-
позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега
, если его нет, то после
.
-
используется для той же цели, что и
.
может содержать
, но не наоборот.
- span
- атрибут, задающий число столбцов, к которым применяются свойства контейнера
.
-
,
и
- контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров
,
и в HTML-документе.
- colspan
нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
- rowspan
объединяет ячейки по столбцам.
Пример создания таблицы
Создайте документ формата HTML и скопируйте в него следующий код:
Пример таблицы
Инструменты создания сайтов
| Назначение | Инструмент |
| Разметка | HTML | XHTML |
| Оформление | CSS |
| Разработка | PHP | Python |
В браузере документ будет выглядеть так: Разберём, какие строчки кода за что отвечают.
- открыли таблицу, задав ей толщину рамок.
-
Инструменты создания сайтов
- озаглавили её.
- открыли строку.
|
Назначение |
- создали ячейку с оформлением заголовка.|
Инструмент |
- создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
- закрыли строку. Аналогично создали остальные строки. |
Разметка |
HTML |
XHTML |
- добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
- закрыли таблицу.
Исходный код простой таблицы HTML
Ячейка 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 лучше использовать внутри страницы для отображения контента табличного формата.
Тег colspan - объединение столбцов
Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок: Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра
colspan
тега
. Этот параметр указывает браузеру объединить несколько столбцов
в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено. Например,
|
Этот столбец включает в себя два столбца. Для нашего примера: Заголовок документа
| шапка сайта
|
| меню
|
контент
|
| низ сайта
|
Обратите внимание, что первая и третья строки теперь содержат по одному столбцу. Рассмотрим другой пример разметки web-страницы: | шапка сайта
|
| меню
|
меню
|
меню
|
меню
|
меню
|
меню
|
| новости
|
контент
|
Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок.
Получится три строки и шесть столбцов. Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это: | | шапка сайта
|
Вторая строка состоит из шести столбцов: | меню
|
меню
|
меню
|
меню
|
меню
|
меню
|
Третья строка состоит из двух столбцов, причем, первый включает в себя два столбца, а второй - четыре: | новости
|
контент
|
Не так и сложно. Накладываем зрительно сетку на рисунок и прописываем строки по очереди сверху вниз, описывая в каждой
нужное количество столбцов. Тег rowspan - объединение строк
А если нам понадобится вот такая разметка? Обратите внимание, во второй строке у нас только один столбец, т.к. первый столбец тянется из первой строки, просто включает в
себя две. На первый взгляд, это может показаться сложным, на самом деле немного практики и вы будете создавать таблицы любой сложности. Рассмотрим еще один пример: | шапка
|
меню
|
| контент
|
| низ сайта
|
Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:
| шапка
|
меню
|
Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки):
| контент
|
Наконец, третья строка - это один столбец, включающий в себя три столбца:
| низ сайта
|
Используя эти два параметра rowspan
и colspan
можно создавать таблицы любой сложности.
Потренируйтесь. Вложенные таблицы
Как следует из названия одну таблицу можно поместить внутрь другой, а имеено внутрь любого столбца. Сделаем это на примере
нашей последней разметки. Итак, у нас есть вот такой код.
находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.
Каждый тег
создает новую строку. Далее во вложенных
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
Как сделать таблицу в html
Приведем пример, html код:
|
Пример таблицы
|
|
Столбец 1
|
Столбец 2
|
Обратите внимание на ячейку |
. Мы используем специальный атрибут colspan
для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег |
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
Теперь рассмотрим подробно все атрибуты тега
.
Атрибуты и свойства тега
К открывающему тегу
можно прописывать различные атрибуты.
1. Свойство align="параметр"
- задает выравнивание таблицы. Может принимать следующие значения:
В разобранном выше примере мы выравнивали таблицу по центру align="center"
.
Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы
или строкам |
. Таким образом, в разных ячейках выравнивание будет разное.
Например
| ... |
| ... |
...
2. Свойство background="URL"
- задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.
Пример
|
Пример таблицы
|
|
Столбец 1
|
Столбец 2
|
Преобразуется на странице в следующее:
В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif
. Обратите внимание на то, что в теге мы добавили style="color:white;"
. Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.
3. Свойство bgcolor="цвет"
- задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)
4. Свойство border="число"
- задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1"
, что означает толщина рамки - 1 пиксель.
5. Свойство bordercolor="цвет"
- задает цвет рамки. Если border="0"
, то рамки не будет и цвет рамки не будет иметь смысла.
6. Свойство cellpadding="число"
- отступ от рамки до содержимого ячейки в пикселях.
7. Свойство cellspacing="число"
- расстояние между ячейками в пикселях.
8. Свойство cols="число"
- число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.
9. Свойство frame="параметр"
- как отображать границы вокруг таблицы. Может принимать следующие значения:
- void
- не отрисовывать границы
- border
- граница вокруг таблицы
- above
- граница по верхнему краю таблицы
- below
- граница снизу таблицы
- hsides
- добавить только горизонтальные границы (сверху и снизу таблицы)
- vsides
- рисовать только вертикальные границы (слева и справа от таблицы)
- rhs
- граница только на правой стороне таблицы
- lhs
- граница только на левой стороне таблицы
10. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах.
11. Свойство rules="параметр"
- где отображать границы между ячейками. Может принимать следующие значения:
- all
- линия рисуется вокруг каждой ячейки таблицы
- groups
- линия отображается между группами, которые образуются тегами , , ,
или
- cols
- линия отображается между колонками
- none
- все границы скрываются
- rows
- граница рисуется между строками таблицы, созданными через тег
12. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах.
13. Свойство class="имя_класса"
- можно указать имя класса, которому принадлежит таблица.
14. Свойство style="стили"
- стили можно задать индивидуально для каждой таблицы.
Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге
.
Атрибуты и свойства и |
1. Свойство align="параметр"
- задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:
- left
- выравнивание по левому краю
- center
- выравнивание по центру
- right
- выравнивание по правому краю
2. Свойство background="URL"
- задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.
3. Свойство bgcolor="цвет"
- задает цвет фона ячейки.
4. Свойство bordercolor="цвет"
- задает цвет рамки ячейки.
5. Свойство char="буква"
- задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.
6. Свойство colspan="число"
- задает число объединяемых горизонтальных ячеек.
7. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах %.
8. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах %.
9. Свойство rowspan="число"
- задает число объединяемых вертикальных ячеек.
10. Свойство valign="параметр"
- выравнивание содержимого ячейки по вертикали.
- top
- выравнивание содержимого ячейки по верхнему краю строки
- middle
- выравнивание по середине
- bottom
- выравнивание по нижнему краю
- baseline
- выравнивание по базовой линии
Примечание 1
Для тега | доступны такие же параметры, что и для | . Параметры для одного тега | будут иерархично применены ко всем внутри него
Как сделать, чтобы границы ячеек в таблице не склеивались
В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse
:
...
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
| |
|
| | |
|
|
|
| 
