Структура таблицы
Таблица размещённая в HTML-документе может содержать в своих ячейках практически любую информацию: текст, рисунок, комбинацию рисунка и текста, ссылки, вложенные таблицы.
Структура вложенных контейнеров, задающих таблицу:
Контейнер
<TD>...</TD>
заключает содержмое каждой ячейки таблицы
Контейнер
<TR>...</TR>
ограничивает контейнеры <TD>, соответствующие ячейкам одной строки
Контейнер
<TABLE>...</TABLE>
является признаком таблицы и содержит все контейнеры <TR>...</TR>

Пример 8. Структура простой таблицы
Пример HTML кода <TABLE BORDER=1 WIDTH=100%> <TR> <TD>ячейка</TD> <TD>ячейка</TD> <TD>ячейка</TD> </TR> <TR> <TD>ячейка</TD> <TD>ячейка</TD> <TD>ячейка</TD> </TR> </TABLE>
Отображение в браузере
ячейка ячейка ячейка
ячейка ячейка ячейка

Параметры тэга <TABLE>
BORDER толщина разлиновки таблицы в пикселях или нуль, если разлиновку необходимо отключить (таблицы с невидимой разлиновкой - удобный в HTML способ размещения текста и графики); если параметр BORDER отсутствует, разлиновка также отключена.
WIDTH ширина таблицы, указывается в пикселях или процентах от ширины доступной области; если содержимое таблицы требует большего размера, чем это указано в параметре WIDTH, значение последнего игнорируется.
HEIGHT высота таблицы, указывается в пикселях, если содержимое таблицы требует большего размера, чем это указано в параметре HEIGHT, значение последнего игнорируется.
CELLPADDING отступ в пикселях содержимого ячеек от их границ (по умолчанию равен 1 пикселю)
CELLSPACING определяет расстояние между смежными ячейками (между рамками ячеек)
BGCOLOR цвет фона таблицы
BORDERCOLOR определяет цвет рамок таблицы, значение - название цвета или его шестнадцатеричное значение, также может входить в состав тэгов <TR> и <TD>

Пример 9. Параметры тэга <TABLE>
Пример HTML кода
<TABLE BORDER= BORDERCOLOR= WIDTH= HEIGHT= CELLPADDING= CELLSPACING= BGCOLOR=>...(код таблицы)
Отображение в браузере

Параметры тэга <TR>
ALIGN определяет горизонтальное выравнивание содержимого для всех ячеек данной строки
  • LEFT - по левому краю
  • CENTER - по центру
  • RIGHT - по правому краю
VALIGN определяет вертикальное выравнивание содержимого для всех ячеек данной строки
  • TOP - по верху ячеек
  • CENTER - центрировать по высоте
  • BOTTOM - по низу ячеек
BGCOLOR цвет фона для ячеек данной строки

Параметры тэга <TD>
WIDTH ширина ячейки, указывается в пикселях или процентах от ширины всей таблицы, достаточно указать ширину ячеек только первой строки таблицы, ширина всех последующих ячеек автоматически устанавливается по расположенным в первой строке, даже если для них установлены другие значения параметра WIDTH
ALIGN
VALIGN
BGCOLOR
действуют аналогично одноимённым параметрам тэга <TR>, но в пределах одной ячейки
BACKGROUND позволяет задать для данной ячейки отдельное фоновое изображение
NOWRAP отключение автопереноса текстовых строк в пределах ячейки
COLSPAN
ROWSPAN
объединение нескольких ячеек в одну по горизонтали и вертикали соответственно

Пример 10. Параметры тэгов <TR> и <TD>
Пример HTML кода
<TABLE BORDER=1 WIDTH=90% CELLPADDING=3 HEIGHT=120px CELLSPACING=1 BGCOLOR=khaki>
<TR ALIGN= VALIGN= BGCOLOR=>
<TD WIDTH= BGCOLOR= ALIGN= VALIGN=>(1,1)</TD>
<TD>(1,2)</TD><TD>(1,3)</TD>
</TR>
<TR><TD>(2,1)</TD> <TD>(2,2)</TD> <TD>(2,3)</TD>
</TR>
Отображение в браузере

Применение параметров COLSPAN и ROWSPAN
Данные параметры используются для разметки таблиц, содержащих объединённые ячейки.
COLSPAN значение параметра - число, показывающее сколько ячеек строки содержит данная ячейка
ROWSPAN значение параметра - число, показывающее сколько ячеек столбца содержит данная ячейка
  1. Задание 5.
    1. Используя шаблон base.html и текст из файла task5.txt создайте страницу
      • заголовок страницы - Задание 5
      • содержание страницы - текст из файла task5.txt, оформленный в виде таблицы.
      • имя файла станицы - task5.html
    2. Оформите таблицу по плану
      • Строка заголовка: Выравнивание по центру, шрифт полужирный.
      • Цвет фона для всех ячеек одинаковый
      • Выравнивание числовых данных по центру, текстовых по левому краю.
    3. Сохраните страницу в рабочей папке в указанным именем.
  2. Практическая работа 1.
    Используя образец HTML-документа work1.jpg записать соответствующий код. Исходные материалы:
  3. Полученную страницу сохранить под именем work1.html
© Смирнов Е.А. 2004 г.