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