HTML Урок 5. Создание таблицы в html
Результат:
Добавим границу для таблицы — атрибут border :
1 2 3 4 5
table border="1"> tr> td> содержание /td> /tr> /table>
| содержание |
Результат:
Создания таблицы начинается с тега table (от англ. «таблица»). Тег tr служит для создания строки. В строке располагаются ячейки — тег td . Завершается таблица закрывающим тегом /table
Или пример таблицы посложнее: 
Атрибуты тега TABLE
| align | left — таблица влево; center – табл. по центру; right — табл. вправо. |
| width | 400 50% |
| bоrdеr | ширина |
| bordercolor | цвета рамки |
| сеllspacing | ширина грани рамки |
| cellpadding | внутреннее расстояние до рамки |
| bgсоlоr | Цвет #rrggbb |
| bасkground | файл (фон таблицы) |
Важно: Для ячеек-заголовка таблицы используется тег th вместо td . Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным
Атрибуты тега TR — строки
| align | left , center , right | выравнивание по горизонтали |
| valign | top , middle , bottom , baseline | выравнивание по вертикали |
| bgcolor | цвет | задний фон |
| bordercolor | цвет | цвет границы |
Атрибуты тега TD или TH — ячейки
| align | left , center , right | выравнивание по горизонтали |
| valign | top , middle , bottom , baseline | выравнивание по вертикали |
| width | число или процент | ширина ячейки |
| bgcolor | цвет | цвет фона |
| background | файл | файл фона |
| bordercolor | цвет | цвет границы |
| nowrap | заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой |
Важно:
- Тег caption служит для создания заголовка таблицы
- Для группировки заголовочных ячеек используется тег thead
- Для группировки основного содержимого таблицы используется тег tbody
- Тег tfoot определяет нижнюю часть таблицы
Тег caption заголовка таблицы может иметь атрибут, определяющий расположение заголовка — align — со следующими значениями:
top — заголовок над таблицей,
bottom — заголовок под таблицей,
left — заголовок вверху и выровнен влево,
right — заголовок вверху и выровнен вправо. К сожалению не все значения «работают» во всех браузерах.
Пример: Создать «каркас» таблицы со всеми тегами группировки
Выполнение:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
table border="1"> caption>таблица/caption> thead> tr> th>Заголовок 1/th>th>3аголовок 2/th> /tr> /thead> tbody> tr> td>содержимое/td>td>содержимое/td> /tr> /tbody> tfoot> . /tfoot> /table>
| Заголовок 1 | 3аголовок 2 |
|---|---|
| содержимое | содержимое |
Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).
| Столбец 1 | Столбец 2 | Столбец 3 | Столбец 4 |
|---|---|---|---|
| Строка2 Ячейка1 | Строка2 Ячейка2 | Строка2 Ячейка3 | Строка2 Ячейка4 |
| Строка3 Ячейка1 | Строка3 Ячейка2 | Строка3 Ячейка3 | Строка3 Ячейка4 |
| Строка4 Ячейка1 | Строка4 Ячейка2 | Строка4 Ячейка3 | Строка4 Ячейка4 |
Объединение ячеек в таблице
В происходит при помощи двух атрибутов тега td: COLSPAN — объединение ячеек по горизонтали, ROWSPAN — объединение ячеек по вертикали.
Синтаксис COLSPAN:
1 2 3 4 5 6 7 8 9
table> tr> td colspan="2"> /td> /tr> tr> td> /td> td> /td> /tr> /table>
Синтаксис ROWSPAN:
1 2 3 4 5 6 7 8 9
table> tr> td rowspan="2"> /td> td> /td> /tr> tr> td> /td> /tr> /table>
Пример: создать таблицу по образцу на картинке. Использовать слияние ячеек
Выполнение:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
table border="1"> caption>Таблица с объединенными ячейками /caption> tr> th rowspan="2"> /th> th colspan="2">3аголовок 1/th> /tr> tr> th> Заголовок 1.1/th> th> Заголовок 1.2/th> /tr> tr> th> Заголовок 2/th> td> Ячейка 1/td> td> Ячейка 2/td> /tr> tr> th> Заголовок 3/th> td> Ячейка 3/td> td> Ячейка 4/td> /tr> /table>
| 3аголовок 1 | ||
|---|---|---|
| Заголовок 1.1 | Заголовок 1.2 | |
| Заголовок 2 | Ячейка 1 | Ячейка 2 |
| Заголовок 3 | Ячейка 3 | Ячейка 4 |
Лабораторная работа №2: создайте таблицы, с расположенными в их ячейках цифрами, точно по образцу:
Группировка ячеек: COLGROUP
Элемент colgroup позволяет создавать группы колонок с одинаковыми свойствами.
Рассмотрим на примере:
Пример: Создать таблицу по образцу
Выполнение:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
TABLE border="4"> colgroup > col span="2" width="30" style="background-color: green" /> col width="60" style="background-color: blue" /> /colgroup> colgroup style="background-color:red"> col span=2 width="120"/> /colgroup> TR> TD> 1-1 /TD>TD> 1-2 /TD>TD> 1-3 /TD>TD> 1-4 /TD>TD> 1-5/TD> /TR> TR> TD> 2-1 /TD>TD> 2-2 /TD>TD> 2-3 /TD>TD> 2-4 /TD>TD> 2-5 /TD> /TR> /table>
Атрибуты тега COLGROUP
- left — по левому краю (по умолчанию)
- center — по центру
- right — по правому краю
- ltr — слева направо
- rtl — справа налево
- bottom — по нижнему краю ячейки
- middle — по центру ячейки (по умолчанию)
- top — по верхнему краю ячейки
HTML вложенные таблицы
Таблицы со сложной структурой проще заменять на вложенные таблицы.
Пример: создайте вложенные таблицы по образцу:
Выполнение:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
TABLE border="4" bgcolor="yellow"> tr> td>Таблица 1/td> td> TABLE> tr> td>Таблица 2/td>td>Ячейка 2-2/td> /tr> tr> td>Ячейка 3-2/td>td>Ячейка 4-2/td> /tr> /TABLE> /td> tr> td>Ячейка 3-1/td> td>Ячeйкa 4-1/td> /tr> /TABLE>
Лабораторная работа №3:
- Создайте таблицу с фиксированными размерами, содержащую ячейки указанной на рисунке ширины
- Вставьте в левую нижнюю ячейку вложенную таблицу
- Фон ячеек вложенной таблицы сделайте серым
Лабораторная работа №4:
- Откройте задание, выполненное на прошлой лабораторной работе
- Добавьте в верхнюю ячейку еще одну вложенную таблицу
- Фон ячеек вложенной таблицы сделайте белым
Какие из перечисленных тегов относятся к созданию таблицы
Главное меню
Соглашение
Регистрация
Английский язык
Астрономия
Белорусский язык
Информатика
Итальянский язык
Краеведение
Литература
Математика
Немецкий язык
Обществознание
Окружающий мир
Русский язык
Технология
Физкультура
Для учителей
Дошкольникам
VIP — доступ
Автор: Лаборатория 226 | ID: 16950 | Дата: 14.4.2022
Помещать страницу в закладки могут только зарегистрированные пользователи
Зарегистрироваться
Получение сертификата
о прохождении теста
Создание таблиц в HTML. Все о HTML таблицах
В HTML для создания таблиц используются теги группы table. К ним относятся:
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.
Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.
Простая HTML таблица
Чтобы создать простую таблицу HTML достаточно 3 тега: , и .
Далее необходимо определить строки и ячейки — структуру таблицы.
Пример простой таблицы HTML
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Исходный код простой таблицы HTML
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5
Ячейка 6
Ячейка 7
Ячейка 8
Ячейка 9 Заголовки таблицы HTML
Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности 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 для нужной ячейки:
Текст ячейки Пример HTML таблицы с объединением ячеек
| Nissan | ||
|---|---|---|
| Модель | Комплектация | Наличие |
| Nissan Qashqai | VISIA | + |
| TEKNA | + | |
| Nissan X-Trail | ACENTA | + |
| CONNECTA | — | |
Исходный код таблицы HTML с объединенными ячейками
Nissan
Модель
Комплектация
Наличие
Nissan Qashqai
VISIA
+
TEKNA
+
Nissan X-Trail
ACENTA
+
CONNECTA
- Колонтитулы и подпись в 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 |
Исходный код таблицы с колонтитулами и подписью
Комплектации 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 свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Оба тега могут определять стили для одной или нескольких колонок. Атрибут 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 и
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 лучше использовать внутри страницы для отображения контента табличного формата.
Тесты по HTML с ответами
1. О чем говорит тэг ?
— Текст, заключенный в тэг, будет расположен по центру страницы
— Текст, заключенный в тэг, будет расположен по левому краю страницы
+ Текст, заключенный в тэг, будет расположен по центру страницы
2. Какие единицы измерения могут использоваться для атрибута ширины?
— Миллиметры и сантиметры
— Пиксели и миллиметры
3. Использование тэга … позволяет добавлять одну строку текста без начала нового абзаца.
4. Объясните смысл кода, представленного ниже:
+ Будет создана таблица, состоящая из 1 ряда и 3 колонок
— Будет создана таблица, состоящая из 3 рядов и 1 колонки
— Будет создана таблица, состоящая из 2 рядов и 3 колонок
5. Напишите код HTML, который бы создавал кнопку отправки заполненной формы. Имя кнопки – ОК.
—
input type=»submit» value=»OK»< /p>
6. Какой тэг при создании страницы добавляет имя страницы, которое будет отображаться в строке заголовка в браузере пользователя?
7. Заполните поля, чтобы отобразить картинку “flower.jpg” с высотой 300 пикселей и шириной 750 пикселей:
—
+
height=”300 px” alt=””
8. Что содержит в себе атрибут href?
+ URL страницы, на которую произойдет перенаправление
— Имя страницы, на которую произойдет перенаправление
— Указание на то, где будет открываться новая страница: в том же или новом окне
9. Какие из перечисленных тэгов относятся к созданию таблицы?
тест 10. Укажите тэг, который соответствует элементу списка:
11. О чем говорит следующая запись: ?
— Создается форма, при заполнении которой вводимые данные будут отображаться
+ Создается форма, при заполнении которой вводимые данные не будут отображаться
— Создается форма, которая будет служить для внесения информации, представленной в виде ссылки (URL)
12. Какое значение следует задать атрибуту type, чтобы оно превращало входной тэг в форму отправки?
13. Для задания размеров тэгу требуются следующие атрибуты:
— Высока и ширина
— Площадь и толщина границ
+ Строки и столбцы
14. Выберите верное утверждение.
+ В HTML цвета задаются комбинацией значений шестнадцатеричной системы исчисления: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C, D, E, F
— В HTML цвета задаются комбинацией значений двоичной системы исчисления: 0 или 1
— В HTML цвета задаются комбинацией значений восьмеричной системы исчисления: 0, 1, 2, 3, 4, 5, 6, 7
15. Какие тэги делают шрифт текста жирным?
16. Какие тэги используются для определения заголовков?
17. Неотображаемые комментарии в HTML задаются следующим образом:
18. Что означает код на картинке?
+ Переход по ссылке произойдет на новой странице
— Переход по ссылке произойдет на текущей странице
— На текущей странице появится текст «Learn Playing»
19. Перечислите основные модули контента, существующие в HTML 5.
— Image, Media, Metadata, Link, Heading, Color, Input Value
+ Metadata, Embedded, Interactive, Heading, Phrasing, Flow, Sectioning
— Flow, Static, Link, Header, Body, Footer, Processing, Chase
тест-20. Укажите, какой элемент HTML 5 отвечает за воспроизведение видео:
21. Элемент используется для:
— Прикрепления таблиц Excel
— Управления данными в базе данных
22. Какой тэг содержит навигацию?
23. SessionStorage – это клиентское решение в HTML 5, которое позволяет:
— Извлекать и использовать данные предыдущих сессий при условии того, что не были очищены cash и cookie
— Создавать базу данных решений пользователей в памяти браузера
+ Извлекать и использовать данные только текущей сессии
24. Что создастся при исполнении следующего кода:
25. Функция HTML 5 «
— Встроенную в основной функционал сайта карту мира
+ Данные о местонахождении пользователя
— Данные о местонахождении сервера
26. Заполните пропуски таким образом, чтобы получился валидный HTML документ. «First paragraph» — комментарий.
This is the first paragraph!
— html v.5; — — !; /p; /body
27. HTML – это
28. Обязательно ли использование тэгов … ?
+ Да, без них браузер не распознает HTML-документ
— Да, если HTML-документ создается в блокноте или другом текстовом редакторе. В специальном компиляторе HTML эти тэги можно не использовать
29. Какой атрибут позволяет объединить ячейки таблицы по вертикали?
тест_30. Допустимое число заголовков первого уровня в HTML-документе составляет:
31. Текст, выделенный курсивом, представлен в следующей записи:
32. В HTML не существует … тэгов.
33. При создании сайтов используют кодировку:
34. HTML-документ может иметь расширения:
35. Укажите устаревшие тэги для HTML 5.
36. Тэг, подключающий к существующему HTML-документу скрипты, которые выполняются на клиентской стороне – это:
37. Какой символ обозначает конец тэга?
38. Список, в котором элементы перечисления отмечаются буллетами, позволяет создать тэг:
39. Укажите корректную запись для создания чек-бокса:
тест*40. Укажите корректную запись для создания выпадающего списка:
41. Какой атрибут HTML указывает альтернативный текст для изображения, если данное изображение не отобразится?
42. Какой HTML-тэг используется для определения футера документа или раздела?
43. HTML-тэг, позволяющий воспроизводить аудиозаписи – это:
44. В HTML 5, onblur и onfocus – это:
— Атрибуты подключения базы данных
45. Графика, определенная SVG, отображается в формате:
46. Что определяет тэг ?
+ Дополнительное содержимое, т.е. то, что не включает основной документ
— Ссылку на подключенный документ
— Цветовое решение документа