В описанной схеме столбцы (колонки) явно не фигурируют, а значит, их нельзя рассматривать как самостоятельные сущности. Т.е. столбец — это виртуальное объединение ячеек из разных строк. Как следствие, есть управлять свойствами столбцов очень ограничены. Например, можно задать свой цвет фона для ячеек одной строки, но нельзя для ячеек колонки целиком.
Основные теги для разметки таблиц и их атрибуты приведены в справке в конце лабораторной работы.
ЗАДАНИЕ 1 (Базовый пример)
В деканате имеется информация о результатах пересдачи экзаменов студентами-задолжниками:
Иванов Иван Иванович сдал математику на "удовлетворительно".
Петров Петр Петрович сдал информатику с оценкой "хорошо".
Сидоров Сидор Сидорович не смог сдать физику ("неудовлетворительно").
Эту информацию нужно представить в виде таблицы с тремя колонками: "Ф.И.О.", "Предмет", "Оценка".
Создать html-файл, в котором сформировать таблицу с четырьмя строками. В первой строке расположить заголовки столбцов, а в остальных трех — информацию о задолжниках.
Проверить в браузере, нет ли ошибок в разметке, правильно ли расположена информация по ячейкам. Таблица должна иметь вид
ЗАДАНИЕ 2 (Форматирование отображения таблицы)
Для удобства чтения данных в базовом примере требуется выполнить дополнительное форматирование элементов таблицы.
1. Добавление границ ячеек.
Хотя браузеры создают пробелы между ячейками, для удобства анализа данных обычно требуется расчертить таблицу. Для этого используется атрибут border тега <table>. Добавить этот атрибут со значением 1 и проверить результат.
2. Управление отступами между ячейками.
Двойные линии на границах ячеек являются результатом того, что по умолчанию браузеры оставляют между ячейками некоторое пространство (spacing). Шириной этих просветов можно управлять, задавая значение атрибуту cellspacing тега <table> (целое число, количество пикселей)
Добавить этот атрибут и экспериментальным путем выяснить, сколько пикселей оставляет браузер между ячейками по умолчанию.
Замечание
Браузеры игнорируют неизвестные им атрибуты и теги. Чтобы в процессе экспериментов с форматированием не убирать/добавлять атрибут cellspacing, его можно временно "комментировать", добавляя в конец имени атрибута любой символ, например 1.
Убрать двойные границы у ячеек таблицы, задав нулевую ширину просветов. В результате таблица должна иметь вид:
3. Анализ влияния на отображение границ значений атрибута border.
Выяснить, влияет ли на отображение изменение ненулевых значений атрибута border. Для этого, например, задать для него временно значение 3. Проверить, что происходит, если атрибут border добавлен в тег, но без присваивания конкретного значения?
4. Выделить заголовки столбцов полужирным шрифтом и выровнять их по центру ячеек.
Для решения этой задачи можно воспользоваться двумя разными приемами.
а) Использование тега <th>.
Ячейки, в которых расположены заголовки столбцов или строк, с точки зрения содержания имеют особый смысл. Поэтому для их выделения в html вместо <td> предусмотрен специальный (структурный!) тег <th> (от table header — заголовок).
Обычно в ячейке, определенной тегом <th>, браузеры выводят текст с помощью полужирного шрифта и выравнивают его по центру ячейки.
Заменить в первой строке разметки таблицы теги <td> на <th> и проверить результат.
б) Использование атрибута align и тега <b>.
Тоже самое форматирование можно выполнить с помощью атрибута тега <td> и тега <b>, но это будет уже презентационной разметкой.
Под выравниванием в верстке понимают определенное расположение информации по отношению к границам области вывода (в нашем случае — ячейки).
Выравнивания содержимого ячейки по центру выполняется добавлением в тег <td> атрибута align (выравнивать) со значением "center".
По умолчанию этот атрибут имеет значение left — влево. Можно также задать выравнивание вправо — right.
Для вывода заголовков полужирным шрифтом нужно заключить каждый из них в тег <b>.
Чтобы использовать этот прием, добавить в начало таблицы столбец с заголовком "N п/п" и порядковыми номерами строк. Заголовок столбца поместить в тег <th>, а номера строк выводить с помощью атрибута align и тега <b>.
Проверить результат. Таблица должна выглядеть следующим образом:
5. "Отодвинуть" текст в ячейках от границ ячеек.
Когда текст плотно прилегает к границе ячейки, это затрудняет восприятие информации. Поэтому между текстом и границей нужно добавить некоторое свободное пространство (padding — прослойка, прокладка).
Для этой цели тег <table> имеет атрибут cellpadding, значения которого задается целым числом (количество пикселей).
Экспериментальным путем выяснить, какое значение атрибут имеет в браузерах по умолчанию.
Увеличить ширину прослойки в ячейках до 5 пикселов.
6. Добавить к таблице заголовок "Результаты пересдачи экзаменов".
Хотя заголовок таблицы можно поместить в разметке перед таблицей как обычный текст, с точки зрения возможного анализа документа для определения заголовков предпочтительнее применять специально выделенный для этого элемент <caption> (англ. заголовок).
Элемент <caption> обычно записывается сразу после открывающего тега <table>, еще до первой строки таблицы.
По умолчанию заголовок выводится перед основной частью таблицы и выравнивается по центру таблицы.
Если заголовок таблицы, шире, чем таблица, то (в зависимости от его длины) заголовок может быть разбит тегом <caption> на несколько строк.
Добавить в таблице заголовок "Результаты пересдачи экзаменов", который должен выводиться полужирным.
В результате таблица должна выглядеть следующим образом:
7. Задание цвет фона.
Цвет фона можно определять для таблицы в целом, для отдельной строки и даже для отдельной ячейки. Для этого в соответствующем теге (<table>, <tr> или <td>) нужно задать атрибут bgcolor (background color) со значением цвета, заданным текстовой константой (в html определено порядка 170 таких констант).
Для всей таблицы определить цвет фона как wheat (пшеничный), для строки заголовков столбцов — lightgreen (светло-зеленый), а для ячейки с оценкой "неудовлетворительно" — red (красный).
Таблица должна иметь приблизительно такой вид (оттенки цветов могут зависеть от дисплея):
8. Задание ширины таблицы и ее столбцов.
По умолчанию браузеры рассчитывают ширину столбцов таблицы и всей таблицы по некоторому алгоритму. Поэтому до сих пор в заданиях задавать ширину нигде не требовалось.
Когда задается только ширина всей таблицы, то для каждой из колонок браузер старается задать ширину, которая позволила нормально отобразить ее контент.
Когда дополнительно задается ширина столбца (в одном из тегов <td> этого столбца, желательно в первом) или нескольких столбцов, то ширина остальных колонок вычисляется с учетом заданных.
Задание ширины столбцов таблицы должно выполняться аккуратно, оно является частью этапа проектирования веб-страниц. Во всех случаях для этого используется атрибут width с целочисленные значениями (ширина в пикселах).
Для исследования влияния ширины таблицы и столбцов на отображения таблицы последовательно выполнить следующие действия.
а) Задать ширину всей таблицы, равной 400. Что произошло с колонками и содержимым таблицы?
б) Задать ширину всей таблицы, равной 800. Что произошло со столбцами таблицы?
в) При заданной ширине таблицы 800, определить ширину последнего столбца равной 150 (она должна уменьшиться). Как меняется ширина остальных столбцов?
г) Назначить ширину всей таблицы, равной 600. Проверить результат. Нет ли в какой-либо колонке переноса части текста ячейки на новую строку? Если есть, подобрать и задать ширину этого столбца так, чтобы такого переноса не было.
9. Задание высоты таблицы. Выравнивание в ячейках по вертикали.
По умолчанию браузер подбирает высоту строк, исходя из высоты элементов выводимого контента.
Если с помощью атрибута height (высота) задать высоту всей таблицы, то браузер по некоторому алгоритму распределяет ее по строкам. Можно также задавать высоту отдельных строк, указывая ее в тегах <tr> или <td>.
При увеличении высоты строки становится очевидной необходимость управления выравниваем элементов по высоте. Для этого применяется атрибут valign (vertical align — вертикальное выравнивание). Он может принимать значения top (по верхней границе), bottom (по нижней границе) и middle (по середине, применяется по умолчанию).
а) В теге <table> задать высоту таблицы равно 300. Как изменился внешний вид таблицы?
б) Задать высоту строки с заголовками равной 40. Как изменился внешний вид таблицы?
в) Управляя выравниваем по вертикали в строках и ячейках (первая и вторая строка, последняя ячейка), добиться того, чтобы таблица выглядела следующим образом:
Объединение ячеек
Часто в таблицах требуется объединить расположенные по соседству (в строке или столбце) ячейки. В HTML это выполняется с помощью специальных атрибутов тега <td>.
Когда нужно объединить несколько последовательных ячеек в строке, то для них создается один (общий) элемент <td>, в котором указывается атрибут colspan (column span — охватить столбцы) с числом объединяемых ячеек. В следующем примере предполагается, что строка таблицы содержит пять ячеек:
<tr>
<td>…</td>
<td colspan="3">…</td>
<td>…</td>
</tr>
Аналогично, когда требуется объединить ячейки в столбце (т.е. в соседних строках), в <td> задается атрибут rowspan (row span — охватить строки). В этом случае для всех ячеек также создается один элемент <td>, поэтому в соответствующих местах расположенных ниже строк элемент отсутствует. В следующем примере в таблице 3*3 объединены три ячейки во втором столбце <td>
<tr>
<td>…</td> <td rowspan="3">…</td><td>…</td>
</tr>
<tr>
<td>…</td> <td>…</td>
</tr>
<tr>
<td>…</td> <td>…</td>
</tr>
Замечание
Объединение ячеек по горизонтали вертикали может сочетаться.
ЗАДАНИЕ 3 (Объединение соседних ячеек)
1. Для изучения влияния атрибутов rowspan и colspan создать три таблицы (две размером 2*2 ячеек, третья — 3*4) и провести объединение их ячеек. Общий вид результирующей страницы показан на рисунке (ячейки пронумерованы последовательно по строкам):
2. Подготовить таблицу, предназначенную для представления в процентах числа студентов, успешно сдавших экзамены в сессию:
