Реферат: Руководство по программированию на HTML
2. Данные для самой таблицы записываются после <CAPTION>, если таковой имеется. Таблица состоит из строк, а каждая строка состоит из отдельных ячеек, поэтому данные записываются в следующем виде:
<TR> {Содержимое первой строки} </tr>
<TR> {Содержимое второй строки} </tr>
<TR> {Содержимое третьей строки} </tr>
. . .
Контейнер TR (table row — строка таблицы) содержит данные для одной строки, а именно:
<TD> Ячейка 1 </td><TD> Ячейка 2 </td><TD> Ячейка 3 </td> . . .
Контейнер TD (table data — данные таблицы) содержит тест, графику или другие объекты, которые нужно поместить в конкретную ячейку. Если ячейка содержит текст, который является заголовком столбцы, то его можно выделить особо, используя вместо TD контейнер TH (table header — заголовок таблицы). Если какая-то ячейка должна выглядеть пустой, то в неё нужно записать хотя бы пробел, в противном случае браузер автоматически удалит её со страницы.
Простейший пример таблицы можно найти в файле Tables\T1.html.
9.2. Настройка размеров таблицы
В примере T1.html, как нетрудно заметить, таблица выглядит непривычно, поскольку у неё отсутствуют линии сетки. Для того чтобы их добавить, нужно указать атрибут BORDER в теге <TABLE>. Если дать этому атрибуту значение (натуральное число), то таким способом будет установлена толщина внешней границы в точках, например: <TABLE BORDER=12>.
Для установки ширины таблицы имеется атрибут WIDTH тега <TABLE>, в котором можно указать ширину двумя способами:
1. Абсолютный — в точках, размер таблицы не зависит от размеров окна браузера или настроек экрана. Пример: <TABLE WIDTH=600>.
2. Относительный — в процентах от ширины окна, например: <TABLE WIDTH=80%>.
Кроме ширины всей таблицы можно настраивать ширину отдельных ячеек, используя атрибут WIDTH тегов <TD> и <TH>. Ширина указывается либо в точках, либо в процентах (от ширины таблицы).
В теге <TABLE> можно настроить толщину внутренних линий сетки, используя атрибут CELLSPACING, значением которого является толщина в точках. Кроме того, возможна настройка размера отступов от линий сетки до содержимого ячейки (также в точках), для этого используется атрибут CELLPADDING тега <TABLE>.
Пример таблицы с настройками различных размеров находится в файле Tables\T2.html.
9.3. Настройка цвета фона для таблицы
В HTML имеется возможность использовать в качестве цвета фона для ячеек таблицы цвет, отличающийся от фонового цвета всего документа. Для этого используется атрибут BGCOLOR, который можно использовать в теге <TABLE> (фон для всей таблицы), <TR> (для одной строки), <TD> и <TH> (для отдельной ячейки). Значение цвета задаётся в уже известном нам виде: указывается либо одно из стандартных названий, либо интенсивности трёх составляющих цвета в виде #RRGGBB. Пример таблицы с настройками цветов фона имеется в файле Tables\T3.html.
9.4. Настройка вида содержимого ячеек таблицы
В примерах T1.html — T3.html текст внутри ячеек всегда выровнен по левому краю. Изменить горизонтальное выравнивание можно при помощи атрибута ALIGN в тегах <TR>, <TH> и <TD> (для строки или отдельной ячейки, соответственно). Значениями этого атрибута могут быть LEFT, RIGHT и CENTER.
Кроме горизонтального выравнивания можно указать вертикальное выравнивание содержимого отдельных ячеек. Для этого в теге <TD> или <TH> указывается атрибут VALIGN, значениями которого могут являться TOP, MIDDLE и BOTTOM.
Пример использования атрибутов ALIGN и VALIGN можно найти в файле Tables\T4.html.
При помещении текста в ячейки таблицы происходит автоматический переход на новую строку. Если текст в какой-либо ячейке разрывать нельзя, то в соответствующем теге <TH> или <TD> следует указывать атрибут NOWRAP (не требует значения). Очевидно, что засчет этого возможно увеличение ширины соответствующего столбца.
9.5. Слияние нескольких ячеек
Иногда соседние ячейки таблицы содержат одинаковые данные, в этом случае имеет смысл объединить их. Для того чтобы слить несколько соседних ячеек строки в одну, используют атрибут COLSPAN тега <TD> (или <TH>), значением которого является число ячеек, подлежащих слиянию. После такого контейнера пропускают несколько контейнеров <TD> (или <TH>), поскольку данные объединённой ячейки уже записаны. В файле Tables\T5.html приведён пример слияния двух ячеек с фамилией и именем в одну.
Аналогичным образом можно объединить смежные ячейки в одном столбце. Для этого в теге <TD> (или <TH>), соответствующем самой верхней из объединяемых ячеек, записывается атрибут ROWSPAN, значением которого является количество объединяемых ячеек. В последующих строках теги <TD> (или <TH>), соответствующие объединённой ячейке, не пишутся. Пример такого объединения ячеек приведён в файле Tables\T6.html.
При необходимости можно объединить прямоугольную область, состоящую из ячеек нескольких соседних строк и столбцов. Для этого потребуется одновременно использовать атрибуты COLSPAN и ROWSPAN в одном теге <TD> (или <TH>). Пример находится в Tables\T7.html.
10. Фреймы