документ 10. Конспект,таблица. 1. Содержимое любой таблицы заключается между двумя тегами Добавьте их в тело html

Название	1. Содержимое любой таблицы заключается между двумя тегами Добавьте их в тело html
Анкор	документ 10
Дата	03.04.2022
Размер	15.76 Kb.
Формат файла
Имя файла	Конспект,таблица.docx
Тип	Документы #439460

Copy to Clipboard

3. Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом:

4.

5.

6.

Copy to Clipboard

Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент ('tr' - сокращение от 'table row'). Попробуем, как это получится.

В HTML для создания таблиц используются теги группы table. К ним относятся:

1. Содержимое любой таблицы заключается между двумя тегами :

. Добавьте их в тело HTML.

2. Самым маленьким контейнером в таблице является ячейка, она создаётся элементом

('td' - сокращение от 'table data'). Введите внутри тегов table следующее:

Hi, I'm your first cell.

I'm your second cell.

I'm your third cell.

I'm your fourth cell.

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

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

- тег обвертка таблицы;

- тег строки (ряда) таблицы;

- тег колонки таблицы;

- тег группы колонок таблицы;

- тег верхнего колонтитула таблицы;

- тег основной части таблицы;

- тег нижнего колонтитула таблицы;

- тег обычной ячейки таблицы;

- тег ячейки-заголовка таблицы;

- тег подписи таблицы.

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

Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

Простая HTML таблица

Чтобы создать простую таблицу HTML достаточно 3 тега: , и

Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , определяющего данную строку будет 2 элемента

.

Тег является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.

Далее необходимо определить строки и ячейки - структуру таблицы.

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

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

внутри строки

- во второй колонке и так далее.

Для разделения таблицы на колонтитулы (об этом ниже) и основную часть, как обвертку строк

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Заголовки таблицы HTML

В HTML таблицах существует 2 типа ячеек. Тег

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

.

Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.

Пример 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 для нужной ячейки:

Текст ячейки

, и мы объединяем первую и вторую ячейку, то всего внутри тега

, первый из них будет содержать атрибут colspan="2".

Пример HTML таблицы с объединением ячеек

Nissan

Модель Комплектация Наличие

Nissan Qashqai VISIA +

TEKNA +

Nissan X-Trail ACENTA +

CONNECTA -

Исходный код таблицы HTML с объединенными ячейками

Nissan
Модель	Комплектация	Наличие
Nissan Qashqai	VISIA	+
Nissan Qashqai	TEKNA	+
Nissan X-Trail	ACENTA	+
Nissan X-Trail	CONNECTA	-