Опубликован: 12.08.2003 | Уровень: для всех | Доступ: платный | ВУЗ: Российский государственный гуманитарный университет
Лекция 5:

Таблицы в HTML

< Лекция 4 || Лекция 5: 123 || Лекция 6 >

Использование таблиц в дизайне страницы

Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.

Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью (открыть)

<HTML>
<BODY>
  <CENTER>
  <TABLE CELLPADDING="10" CELLSPACING="0"
         BORDER="16">
    <TR>
      <TD ALIGN="center">
        <H2>Интернет-Университет 
            Информационных Технологий</H2>
        <H3>Добро пожаловать!</H3>
        <TABLE BORDER WIDTH="100%">
          <TR>
            <TD ALIGN="center"><I>Учебный курс
             "Основы Web-технологий"</I></TD>
          </TR>
        </TABLE>
      </TD>
    </TR>
  </TABLE>
  </CENTER>
</BODY>
</HTML>

Использование таблиц в дизайне

Рис. 4.2. Использование таблиц в дизайне

Создание разноцветных таблиц

Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.

Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:

<BODY ВАСКGROUND="image.gif" ВGCOLOR="#FF0000">

Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях ( <НR> ). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.

< Лекция 4 || Лекция 5: 123 || Лекция 6 >
Олеся Артюх
Олеся Артюх

(Лекция №2, курс Введение в HTML:

"...Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа ( HEAD ) и тела документа ( BODY ). Рассмотрим простейший пример классического документа.

<HTML> <HEAD> <TITLE>Простейший документ</TITLE> </HEAD> <BODY TEXT=#0000ff BGCOLOR=#f0f0f0> <H1>Пример простого документа</H1> <HR> Формы HTML-документов <UL> <LI>Классическая <LI>Фреймовая </UL> <HR> </BODY> </HTML>

Роман Шумилов
Роман Шумилов

В Тесте #4 в качестве ответа на одно из заданий, причем верного ответа, используется тег, о котором ни в лекции 4, ни в предыдущих вообще не упоминалось. По этой причине, сдать тест #4 на отлично с первой попытки возможно только наугад. Конкретно тег <INPUT> до 4-ой лекции не упоминался ни разу.

Сергей Пантелеев
Сергей Пантелеев
Россия, Москва
Ахмет Арчаков
Ахмет Арчаков
Россия, Магас