Главная » Мастерская » Статьи » Web-сайт своими руками » Шаг 3
Шаг 1 - Шаг первый - создание простейшего документа HTML
Шаг 2 - Рассмотрим теги нашего документа
Шаг 3 - Рассмотрим создание таблиц в документах HTML
Шаг 4 - Вставка графических изображений в документах HTML
Шаг 5 - Создание карт-изображений
Шаг 6 - Форматирование текста HTML
Шаг 7 - Создадим простейшую страничку HTML
Шаг 8 - Как разместить свою HTML страницу в интернете
Шаг 9 - Как разместить на HTML-странице счетчик посещений
Шаг 10 - Создание фрэймов в документах HTML
Шаг 11 - Бегущая строка в HTML документе
Шаг 12 - Где взять и как сделать гостевую книгу
Шаг 13 - Создание форм
Шаг 14 -Изменение дизайна Гостевой книги
Шаг 15 - Немного о JavaScript
Шаг 16 - Примеры фотоальбомов с использованием JavaScript
Шаг 17 - Еще раз о фреймах
Шаг 18 - Изменение информации в двух разных фреймах, нажатием на одну ссылку
Шаг 19 - Анимация и JavaScript
Шаг 20 - Изменение картинки при наведении курсора мыши
Шаг 21 - Как адаптировать сайт под различные видеорежимы

Шаг 3 - Создание таблиц

Таблицы очень часто используют для позиционирования различных элементов на Web-странице.

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

По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце.

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

<HTML> 
  <HEAD>
    <TITLE>Таблица</TITLE> 
  </HEAD> 
<BODY>
  <TABLE border="2">  <!-- Начало таблицы --> 
    <TR>
      <TD colspan=2 align=center>
        <B>Заголовок Таблицы.</В> 
      </TD> 
    </TR> 
   <TR>
     <TD align="center">
       Первая ячейка первой строки. 
     </TD> 
     <TD align="center">
       Вторая ячейка первой строки. 
     </TD> 
   </TR> 
   <TR>
     <td align="center">
       Первая ячейка второй строки. 
     </TD> 
     <TD align="center">
       Вторая ячейка второй строки. 
     </TD> 
   </TR>
 </TABLE>             <!-- конец таблицы --> 
</BODY> 
</HTML>
Результат этого кода вы можете посмотреть здесь.

Ширина таблицы задается атрибутом width="..." для тега <TABLE>, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана. Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="..." (горизонтальное положение) и valign="..." (вертикальное положение) для тегов <TR> или <TD>.

Атрибут valign="..." может принимать следующие значения: top - прижать вверх, bottom - прижать вниз и middle - разместить по центру, а атрибут align="..." принимает следующие значения: left - прижать влево, right - прижать вправо и center - разместить по центру.

Атрибуты cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками.

Допускается добавлять к таблице, к строке или столбцу заголовок. Тег <CAPTION>, который располагается после тега <TABLE>, задает заголовок к таблице, центрируемый по умолчанию относительно таблицы. При помощи атрибутов align="..." или valign="..." заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы. Задание заголовка для строки или столбца таблицы осуществляется при помощи тега <TH> после тегов <TR> или <TD> соответственно.

Атрибут border="..." тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Следует иметь в виду, что атрибуты colspan="..." и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.

Рассмотрим пример таблицы, занимающей по ширине весь экран броузера:

<TABLE border="l" width="100%"> 
<CAPTION>Пример таблицы</CAPTION>
  <TR>
    <TD width="66%" colspan="2"> 
      <P align="center">
      Две ячейки, объединенные по горизонтали
    </TD> 
  </TR> 
  <TR>
    <TD width="33%" rowspan="2" valign="middle">
      Две ячейки, объединенные по вертикали 
    </TD>
    <TD width="33%">
      no левому краю 
    </TD> 
  </TR> 
  <TR>
    <TD width="33%">
      <P align="right">
        no правому краю 
    </TD> 
  </TR> 
</TABLE>

Copyright ByWeb©
Hosted by uCoz