Шаг 40.
Дополнительные возможности построения и оформления таблиц

    На этом шаге мы рассмотрим несколько дополнительных параметров, которые можно использовать при построении таблиц. Однако начнем мы с вопроса создания вложенных таблиц.

    1. Вложенные таблицы. Отдельные ячейки таблицы могут содержать практически любые данные, в том числе, внутри ячейки таблицы может быть целиком размещена другая таблица. Такие таблицы называются вложенными. Главное при создании таких таблиц – не запутаться и четко определить для себя, где основная таблица, а где – вложенная. Поэтому мы приведем два способа создания вложенных таблиц.
1-й способ: 2-й способ:
- построить главную (основную) таблицу, оставив ячейки, предназначенные для размещения вложенных таблиц, пустыми; - создать отдельно основную и вложенную таблицы;
- создать в оставленных ячейках вложенные таблицы. - после проверки правильности построения таблиц перенести описание вложенной таблицы внутрь описания соответ-ствующей ячейки главной таблицы.

    Вы можете выбрать любой из предложенных способов или изобрести свой; главное – чтобы у вас получалось то, что вы задумали.

    Замечание.
  • Избегайте чрезмерного усложнения структуры таблиц – в противном случае вы рискуете существенно затруднить восприятие ваших таблиц читателями.
  • Не все браузеры, поддерживающие таблицы, правильно отражают сложные таблицы с несколькими уровнями вложенности, поэтому их использование требует осторожности.

    Приведем пример вложенности таблиц. Пусть требуется создать HTML-документ, при просмотре которого в браузере отображается таблица, первая колонка которой содержит фамилию и инициалы учителя, а в соответствующей строке второй колонки выводится список предметов, которые он ведет.

    Создадим сначала основную таблицу, оставив пустыми те ячейки, где должны располагаться вложенные таблицы. 


<HTML>
<HEAD>
<TITLE>Основная таблица</TITLE>
</HEAD>
<BODY> 
<TABLE BORDER>
<TR><!--Первая строка таблицы.-->
<!--Первый столбец.-->
<TH>Фамилия и инициалы</TH>
<!--Второй столбец.-->
<TH>Предметы</TH>
</TR>
<TR><!--Вторая строка таблицы.-->
<TD>Семенова Т.А./TD>
<!--Ячейку оставляем пустой.-->
<TD> </TD>
</TR>
<TR><!--Третья строка таблицы.-->
<TD>Гусева В.В.</TD>
<TD>Химия</TD>
</TR>
<TR><!--Четвертая строка таблицы.-->
<TD>Вальковская Т.А.</TD>
<!--Ячейку оставляем пустой.-->
<TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>

    Проверяем результат в браузере. У вас должна получиться следующая “картинка” (рисунок 1).


Рис.1. Пример простейшей таблицы

    Дополним теперь приведенный код двумя таблицами, которые разместим в пустых ячейках. 


.    .    .    .
<!--Первая вложенная таблица.-->
<TABLE BORDER=2
<TR> <!--Первая строка таблицы.-->
<TD>Русский язык</TD>
</TR>
<TR><!--Вторая строка таблицы.-->
<TD>Литература</TD>
</TR>
</TABLE>
.    .    .    .
<!--Вторая вложенная таблица.-->
<TABLE BORDER=2>
<TR> <!--Первая строка таблицы.-->
<TD>Алгебра</TD>
</TR>
<TR><!--Вторая строка таблицы.-->
<TD>Геометрия</TD>
</TR>
</TABLE>
.    .    .    .

    Окончательный результат приведен на рисунке 2.


Рис.2. Пример вложенной таблицы

Текст этого документа можно взять здесь.

    2. Задание цвета рамок таблицы. До сих пор мы не изменяли цвет рамок таблиц. Однако в некоторых случаях было бы интересно поменять цвет рамки либо всей таблицы, либо отдельной ячейки. Такую возможность предоставляют нам три параметра: BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK, которые могут задаваться в тэгах <TABLE>, <TR>, <TH>, <TD>. В качестве значения этих параметров может использоваться звание цвета или его шестнадцатеричное значение.

    Рассмотрим назначение каждого параметра.

    Самым простым из них является BORDERCOLOR, который определяет цвет всей рамки таблицы (тэг <TABLE>), рамок в отдельной строке (тэг <TR>) или рамки отдельной ячейки (тэги <TH>, <TD>).

    Другие два параметра задают цвет отдельных составляющих рамок, переопределяя значение BORDERCOLOR. Результаты их работы сильно зависят от местоположения. В таблице перечислены параметры и результаты, которые они оказывают.

Таблица 1. Использование параметров задания цвета границ
Параметр BORDERCOLOR-LIGHT BORDERCOLOR-DARK
В тэге <TABLE>. Оказывает влияние на всю таблицу. Окрашивает в заданный цвет левый и верхний края всей таблицы и соответственно правый и нижний края каждой ячейки. Окрашивает в заданный цвет правый и нижний края всей таблицы и соответственно левый и верхний края каждой ячейки.
В тэге <TR>. Оказывает влияние на все ячейки строки. Окрашивает в заданный цвет правый и нижний края каждой ячейки строки. Окрашивает в заданный цвет левый и верхний края каждой ячейки строки.
В тэгах <TH>, <TD>. Оказывает влияние на ячейку. Окрашивает в заданный цвет правый и нижний края ячейки. Окрашивает в заданный цвет левый и верхний края ячейки.

Задание 1. В созданном при изучении предыдущего пункта HTML-документе, задайте эти параметры и проследите результаты их использования в различных тэгах.

    Решение и комментарии вы можете посмотреть здесь.

    3. Задание фонового рисунка для таблицы. Для того чтобы таблица приняла более привлекательный вид, можно задать фоновое изображение как для таблицы целиком, так и для отдельных ее ячеек. Это достигается использованием параметра BACKGROUND, определяющего такой рисунок.

    Какова форма записи этого параметра?

    Этот параметр может задаваться в тэгах <TABLE>, <TD>, <TH>.

Задание 2. В созданном при изучении предыдущего пункта HTML-документе, задайте значение этого параметра и проанализируйте результат его использования в различных тэгах.

    Решение и комментарии вы можете посмотреть здесь.

    Со следующего шага мы начнем рассматривать работу с данными мультимедиа.




Предыдущий шаг Содержание Следующий шаг