Практическая работа
Тема: Таблицы на страницах Web
Цель: Научиться строить таблицы на странице Web
Теоретическое обоснование
Использование таблиц
У списков есть один недостаток — они одномерны. Это означает, что вы можете располагать информацию только на следующих друг за другом строках. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам. У вас появляется гибкость двухмерной структуры для вывода информации на Web-страницу.
Важно использовать таблицы так, чтобы они не занимали попусту место на Web-странице. Благодаря наличию строк и столбцов таблицы удобны для сравнения и противопоставления информации. Каждые строку и столбец можно озаглавить, чтобы информация выглядела подобно электронной таблице.
Хорошая таблица делает Web-страницу информативной, аккуратной и организованной, а неудачная разбивает ее и запутывает то, что вы хотели сообщить.
Хотя в таблице подающие расположены без определенного порядка, такая организация информации облегчает восприятие Web-страницы. Вы можете перечислить команды в порядке возрастания очков, побед или поражений, тогда лучшие (или худшие) команды окажутся вверху списка. Организация информации в определенном порядке намного удобнее для посетителей, так как облегчает сравнение.
Как построить таблицу
Задание таблицы может показаться сложным, поскольку для этого применяется целый ряд тегов. Теги <TABLE> и </TABLE> обрамляют таблицу целиком, а ряд других тегов определяют, каким образом будет выводиться информация. В таблице 1 приведено полное описание тегов таблиц.
Таблица 1. Теги HTML для построения таблиц
Теги___________Описание_______________________________________________
<TABLE> и </TABLE> | Эти теги охватывают таблицу. Тег <table> сообщает броузерам, что далее следует описание таблицы. Если вы хотите, чтобы была видна сетка, разделяющая строки и столбцы, добавьте ключевое слово border (получится <TABLE BORDER>) |
<CAPTION> и </CAPTION> | Текст, отмеченный этими тегами, выводится в виде заголовка. Для задания заголовка можно также применять теги <тс> и </ТС> |
<ТН> и </ТН> | Теги отображают текст заголовка строки или столбца немного более крупным полужирным шрифтом |
<TR> и </TR> | Теги определяют каждую строку таблицы. Тег </TR> необязателен, но он делает ваш НTML-код более полным и понятным |
<TD> и </TD> | Эта пара тегов отделяет текст каждой ячейки таблицы |
При использовании этих тегов следует быть очень аккуратным, иначе создание таблицы, состоящей из нескольких строк, может оказаться сложным делом. Чтобы создать даже такую простую таблицу, понадобится довольно много строк HTML-кода. На листинге показан HTML-код, задающий эту таблицу.
Листинг 1 Таблица из нескольких строк
<TABLE BORDER>
<CAPTION ALIGN=top>Лучшие бейсбольные подающие 1997 года</САРТIOМ>
<TR>
<ТН>Имя</ТН>
<ТН>Команда</ТН>
<ТН>Победы/ поражения</ТН>
<ТН>Очки</ТН>
<ТН>Ауты</ТН>
</TR>
<TR>
<ТD>Пит Шурек</ТD>
<ТD>Цинциннати</ТD>
<TD>16-2</TD>
<TD>2,73</TD>
<TD>194</TD>
</TR>
<TR>
<ТD>Гидео Немо</ТD>
<ТD>Лос-Анджелес</ТD>
<TD>19-8</TD>
<TD>2,94</TD>
<TD>399</TD>
</TR>
<TR>
<ТD>Грег Энгриус</ТD>
<ТD>Атланта</ТD>
<TD>24-6</TD>
<TD>2,2K/TD>
<TD>275</TD>
</TR>
</TABLE>
Ваш первый шаг — ввод родового тега <TABLE>:
<TABLE>…</TABLE>
Чтобы все ячейки таблицы были разделены тонкими линиями, добавьте в тег <TABLE> ключевое слово BORDER=1. Без этого слова ячейки будут автоматически выровнены, но сетки в таблице не будет.
Теперь создайте каждую ячейку, одну за другой. Сначала задайте строку:
<TABLE>
<TR>
</TR> </TABLE>
После этого задайте ячейки, которые будут заголовками столбцов. Броузеры отображают заголовки немного более жирным шрифтом, чем остальной текст.
<TABLE> <TR>
<ТН>Год</ТН> <ТН>Модель</ТН> <ТН>Марка</ТН> </TR> </TABLE>
Сейчас ваша таблица состоит из одной строки, причем каждая ячейка отмечена как заголовок столбца. Теперь введем остальные строки. Следите за тем, чтобы в каждой строке было одинаковое число столбцов, в данном случае три.
Листинг 2
<TABLE BORDER=1> <TR>
<ТН>Год</ТН>
<ТН>Модель</ТН>
<ТН>Марка</ТН>
</TR>
<TR>
<TD>1986</TD>
<TD>Toyota</TD>
<TD>Corolla</TD>
</TR>
<TR>
<TD>1986</TD>
<TD>Chevrolet</TD>
<TD>Nova</TD>
</TR>
<TR>
<TD>1996</TD>
<TD>Plymouth</TD>
<TD>Neon</TD>
</TR>
</TABLE>
На рис. 1 показана простая таблица — она состоит из трех столбцов и четырех строк. Вы можете проследить соответствие каждой строки в листинге HTML (<TR> и </TR>) и в таблице на рисунке.
Рис. 1. На этом простом примере показана техника задания таблиц
В Web-страницах можно применять таблицы, состоящие из очень многих строк и столбцов.
Не жалейте времени на форматирование тегов таблицы, облегчающее их чтение. Возможно, позднее вы захотите внести изменения.
Расширенные возможности формирования таблиц
Теперь, когда вы умеете создавать простую красивую таблицу, попробуем ее слегка оживить. Современные броузеры предлагают несколько впечатляющих способов настройки таблиц.
При использовании каждого из этих методов подразумевается, что вы аккуратно сосчитали количество строк и столбцов.
Объединение нескольких строк в одну ячейку
Если вы будете часто применять таблицы, то непременно столкнетесь с ситуацией, когда какая-либо ячейка должна занимать несколько строк таблицы. Здесь вам пригодится ключевое слово ROWSPAN, которое добавляется в тег <TD> заданной ячейки. Чтобы ячейка занимала две строки вместо одной, замените ваш код, например <ТD>Текст вашей ячейки</ТD>, на следующий:
<TD ROWSPAN=2>Ваш расширенный текст</ТD>
Теперь при отображении таблицы ячейка с ключевым словом ROWS PAN займет две строки. Так можно изменить бейсбольную таблицу:
Листинг 3
<TR>
<ТD>Пит Шурек</ТD>
<TD ROWSPAN=2>Цинциннати</ТD>
<TD>16-2</TD>
<TD>2,73</TD>
<TD>194</TD>
</TR>
<TR>
<TD>Xoce Рио</ТD>
<TD>28-2</TD>
<TD>1.92</TD>
<TD>199</TD>
</TR>
При использовании ROWSPAN (или COLSPAN,CM. ниже) не забудьте соответственно уменшить количество строк или столбцов таблицы. Например, в строке с информацией о Хосе Рио столбец меньше, чем в других.
Объединение нескольких столбцов в одну ячейку
Подобно тому, как ROWSPAN распространяет ячейку на несколько строк, COLS PAN «раздвигает» ее на несколько столбцов. С помощью ключевого слова COLS PAN вы можете распространить ячейку на любое количество столбцов. Обратите внимание на следующий пример:
Листинг 4
<TR>
<ТН COLSPAN=2>Личнaя информация</ТН>
<ТН COLSPAN=3>Статистика</TH>
</TR>
<TR>
<ТН>Имя</ТН>
<ТНЮ Команда</ТН>
<ТН>Победы/ поражения</ТН>
<ТН>Очки</ТН>
<ТН>Ауты</ТН>
</TR>
Также можно попробовать вставить таблицу в таблицу. Это выглядит очень привлекательно, но отслеживание HTML-кода может обернуться кошмаром. Убедитесь, что вы правильно применили все закрывающие теги </TABLE>. Выравнивание элементов в данном случае также может оказаться сложным делом. Во вложенных таблицах обычно не используют заголовки и сетку.
Включение списка в таблицу
Таблицы можно комбинировать с другими элементами HTML. Так, они могут содержать списки любого из описанных выше типов. Строго следите за тем, чтобы всегда использовались закрывающие теги, иначе коды списков трудно отслеживать.
Выравнивание текста
Для каждой ячейки таблицы вы можете задать способ выравнивания текста как по вертикали, так и по горизонтали. Способы выравнивания задаются специальными ключевыми словами ALIGN и VALIGN. Вы можете задать также способ выравнивания для всей таблицы (в теге <TABLE>), для заданной строки (в теге <TR>) или для одной ячейки (в теге <TD>).
Каждое из ключевых слов ALIGN и VALIGN имеет три возможных значения. Они используются так же, как и описанные выше ключевые слова объединения в теге <TD>. В таблице 2 приведено описание этих ключевых слов.
Таблица 2. Ключевые слова выравнивания
Значение ключевого | Описание слова |
ALIGN=LEFT | Выравнивает текст в ячейке по левому краю (по умолчанию) |
ALIGN=CENTER | Выравнивает текст в ячейке по центру |
ALIGN=RIGHN | Выравнивает текст в ячейке по правому краю |
VALIGN=TOP | Выводит текст от самого верха ячейки (полезно, когда информация состоит из нескольких строк) |
VALIGN=MIDDLE | Выравнивает текст в ячейке вертикально по центру (по умолчанию) |
VALIGN=BOTTOM | Выравнивает текст в ячейке по нижнему краю |
Продолжая работать с бейсбольной таблицей, введем ключевое слово VALIGN=TOP для всей строки, содержащей список, чтобы текст не «плавал» в центре ячейки. Изменим тег TABLE таким образом:
<TR VALIGN=TOP>
В некоторых Web-страницах ключевые слова ALIGN и VALIGN применяются для выравнивания графики в таблицах. Удалив рамки из таблицы, вы можете выровнять графику.
Цвета в таблице
До недавнего времени не было возможности управлять цветами таблицы на Web-странице. Сетка таблицы была черной, фон совпадал по цвету с фоном остальной страницы. Было очень трудно выделить какую-то ячейку другим цветом или использовать разные цвета.
Теперь существует ряд новых тегов, позволяющих задавать цвета фона и сетки таблицы. В первом случае ключевое слово BGCOLOR вставляется в тег <TABLE> следующим образом:
<TABLE BORDER BGCOLOR=YELLOW> </TABLE>
Теперь цвет фона всей таблицы будет желтый. Вы можете задать любой из перечисленных в таблице 16 цветов, указав его название.
Таблица 3. Возможные цвета фона
Black - Черный | Maroon - Малиновый | Green - Темно-зеленый | Olive - Оливковый |
Navy - Темно-синий | Purple - Сиреневый | Teal - Голубой | Gray - Темно-серый |
Silver - Светло-серый | Red - Красный | Lime - Зеленый | Yellow - Желтый |
Blue - Синий | Fuchsia - Розовый | Aqua - Бирюзовый | White - Белый |
Кроме ключевого слова BGCOLOR, существуют и другие способы управлять цветом:
BORDERCOLOR Изменяет цвет сетки таблицы
BORDERCOLORDARK/BORDERCOLORLIGHT Используется для изменения
цвета сетки с дополнительным эффектом трехмерности. Если установлены эти атрибуты, ваша таблица выглядит трехмерной. Поэкспериментируйте с этой установкой, задав широкое обрамление (BORDER=6)
Вот простой пример использования всех новых ключевых слов сразу:
<TABLE BORDER BGCOLOR=YELLOW BORDERCOLOR=RED BORDERCOLORDARK=BLUE BORDERCOLORLIGHT=GREY> </TABLE>
Как видите, эти ключевые слова предоставляют много возможностей изменять внешний вид таблицы. Вы можете задавать эти ключевые слова для каждой отдельной строки или ячейки. В приведенном ниже HTML-коде цвет каждой ячейки задается отдельно.
Листинг 5
<TABLE BORDER=2 WIDTH=300> <TR>
<TD BGCOLOR=YELLOW>He кажется ли Вам,</TD>
<TD BGCOLOR=BLACK><FONT COLOR=YELLOW> что эта таблица </FONT></TD>
</TR>
<TR>
<TD BGCOLOR=BLACK><FONT COLOR=YELLOW>Напоминает</FONT></TD>
<TD ВССОLОR= YELLOW >ШМЕЛЯ!!!</TD>
</TR>
</TABLE>
Ход работы
1. Выполнить листинг 1, 2, 3, 4, 5
2. Создайте следующую таблицу
1№п/п | Наименование | Цена | Количество | Сумма |
2 | Наименование №1 | 26,5 | 6 шт | 4229,4 |
3 | Наименование №2 | 37,7 | 5 шт | 188,5 |
4 | Наименование №3 | 50 | 10 шт | 500 |
5 | Наименование №4 | 89,3 | 75 шт | 6697,5 |
1 строка – шрифт Фиолетовый
2 строка - фон строки красный, цвет шрифта – белый.
3 строка - шрифт зеленый
4 строка - заливка синяя, шрифт желтый
Содержание отчета
· Тема
· Цель
· Законспектировать новый материал в конспект
· Кратко ход работы
· Вывод
Контрольные вопросы
1. Для чего необходимо создание таблицы в документе HTML?
2. Перечислите основные теги, используемые для создания таблиц
3. Отличие ROWSPAN и COLSPAN?
