Веб-страницы могут содержать различные объекты: тексты, меню, изображения и т. п. Для упорядочения объектов на веб-странице ее (всю или часть) размечают как таблицу.
Теги разметки таблицы
Ознакомимся с основными тегами разметки таблицы.
Рассмотрим разметку таблицы соответствующими тегами (рис. 23.1):
Атрибуты тегов разметки таблицы
Вы знаете, что теги могут содержать атрибуты. Атрибуты в тегах разметки таблицы влияют на вид таблицы, ячеек и надписей в них:
|
Атрибут |
Назначение |
Атрибут |
Назначение |
|
align |
Выравнивание таблицы в окне |
cellpadding |
Расстояние между текстом ячейки и ее границей |
|
background |
Фоновый рисунок |
rules |
Отображение рамок таблицы |
|
bgcolor |
Цвет фона |
title |
Всплывающая подсказка |
|
border |
Толщина рамки в пикселях |
width |
Ширина таблицы (ячейки) в процентах или пикселях |
|
bordercolor |
Цвет рамки |
||
|
cellspacing |
Расстояние между ячейками таблицы |
height |
Высота таблицы (ячейки) в процентах или пикселях |
Если во всех строках ширина ячеек (атрибут width) одинакова, то ее достаточно указать только для одной строки.
Отступы
Для настройки расстояний между ячейками и между текстом и границами ячеек в теге таблицы используют атрибуты отступов (рис. 23.2):
Форматирование содержимого ячеек
Теги строк (<tr>) и ячеек (<td>) могут содержать атрибуты для изменения выравнивания текста относительно границ ячейки. Атрибут align позволяет задавать горизонтальное выравнивание текста: align-'left" — по левому краю, align-'center'' — по центру ячейки, align-'right'' — по правому краю.
Выравнивание по вертикали выполняется с помощью атрибута valign-'middle" (top, bottom) — посреди клетки (вверху, внизу).
Рассмотрим способы выравнивания текста в ячейках (рис. 23.3):
Слияние ячеек
В ходе разметки таблицы часто бывает необходимо объединить несколько ячеек. Для этого используют атрибуты colspan (слияние ячеек в строке) (рис. 23.4, а) и rowspan (слияние ячеек в столбце) (рис. 23.4, б):
Вопросы для самопроверки
1. Как вставить таблицу на веб-страницу?
2. Как выровнять текст в ячейке таблицы по горизонтали; по вертикали?
3. Как установить отступ от текста в ячейке до ее границ?
4. Как объединить ячейки одной строки или столбца таблицы?
Упражнение 23
Создать таблицу по образцу (рис. 1).
1) Откройте редактор Блокнот и создайте html-документ для отображения таблицы (рис. 2).
2) Измените html-код, объединив ячейки по образцу, и заполните их, как показано на рис. 3.
3) Введите размеры таблицы в пикселях: ширина — 400, высота — 200.
4) Установите параметры ячеек в процентах от размера таблицы: высота верхней строки —
35 %, ширина второго и третьего столбцов —
60 % и 20 % соответственно.
5) Выровняйте текст по образцу (см. рис. 1).
6) Сохраните документ с именем Упражнение 23.html.
Завершите работу за компьютером.
Компьютерное тестирование
Выполните тестовое задание 23 с автоматической проверкой
на сайте interactive.ranok.com.ua.
Это материал из учебника Информатика 9 класс Бондаренко