Использование списков и таблиц при разработке html-страниц, страница 4

Также введён новый тег <TH> - заголовок таблицы. Данный тег аналогичен тегу <TD>, но текст в нём отображается жирным шрифтом и выводится по центру ячейки.

2.3. Картинки и таблицы

Использование таблиц позволяет добиться ряда эффектов, которые разработчиками HTML явно были не предусмотрены. Так, например, можно вставлять картинку в картинку, фиксировать элементы html-страницы друг относительно друга, создавать рамки вокруг текста и расширить возможности по его выравниванию, использовать несколько фонов на одной странице. Нетрудно догадаться, как добиться большинства из перечисленных эффектов. Наиболее трудно сообразить, как вставить картинку в картинку. Существует два подхода.

Старый приём состоит в том, чтобы, за неимением атрибута HEIGHT тега <TD> (который отсутствовал в 1-й спецификации HTML), задать высоту ячейки, используя прозрачную картинку. Пример:

<TD width=110 background=images/border_ie.gif align=left>

     <IMG src=images/1x1.gif width=38 height=110 align=middle>

     <IMG src=images/umbrella.gif align=middle>

</TD>

Здесь картинка 1x1.gif состоит из одного пиксела, цвет которого задан как прозрачный. Она сдвигает картинку umbrella.gif и одновременно устанавливает высоту ячейки таблицы. Данный приём не очень удобен, но им вынужденно пользовались.

С появлением атрибута HEIGHT у элементов таблицы помещать картинку в картинку стало проще. Пример:

<TD width=110 height=110 background=images/border_ie.gif

align=center valign=center>

     <IMG src=images/umbrella.gif>

</TD>

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

2.4. Пример HTML-страницы

Следующий пример демонстрирует описанные в работе возможности HTML. См. также файл test_l5.html.

<HTML>

<HEAD>

     <TITLE>Списки и таблицы в HTML</TITLE>

</HEAD>

<BODY>

<H1 align=center>Списки и таблицы в HTML</H1>

<H2 align=center>(примеры)</H2>