Основные элементы html для работы с таблицами.

31.03.2019 Безопасность

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

Как создать таблицу используя HTML

HTML-таблицы создаются в четыре шага.

1. На первом шаге в html-коде с помощью парного тега

указываем браузеру, что в web-страницу вставлена таблица:

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

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

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

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

4. Ну и на последнем шаге помещаем внутрь элементов и содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:

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

Более тонко настроить отображение границ помогут . С помощью можно изменить толщину и цвет рамок, а также изменить тип границ.

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

Если понадобиться как-то оформить вставляемый текст, то можно использовать .

Кроме текста мы можем помещать в ячейки картинки с помощью тега :

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

, и в нее вставляются строки и ячейки.

При создании таблиц необходимо учитывать некоторые правила:

для создания таблицы используется только тег ;

тег

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

;

теги

, любое другое содержимое тега игнорируется браузером;

содержимое таблицы(текст или картинки) может находиться только в тегах

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

;

ячейки таблицы должны иметь хоть какое-то содержимое, иначе браузер может их вообще не отобразить, если же какая-то ячейка должна быть пустой, то в нее обычно помещают неразрывный пробел (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
3.1-4.1	4.2	4.3

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

1.1	1.2-1.3
2.1	2.2	2.3
3.1-4.1	3.2	3.3
3.1-4.1	4.2	4.3

При объединении ячеек важно проверить количество ячеек в каждой строке, чтобы не было ошибок. Так, конструкция

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

, либо такая же конструкция! Если число ячеек во всех строках не будет совпадать, то появятся пустые лишние ячейки.

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

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

И результат отображения в браузере:

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