Самоучитель по HTML

Справочник HTML

Оглавление:

  1. С чего начать?
  2. тег <BODY>
  3. Комментарии
  4. Просмотр результата
  5. Создание абзацев
  6. Создание заголовков
  7. Выравнивание текста
  8. Тег <PRE>
  9. Форматирование текста
  10. Атрибуты шрифта
  11. Специальные символы и таблица UNICODE
  12. Тег <HR>
  13. Гиперссылки
  14. Ссылки на объект в текущем документе
  15. Вставка графических изображений
  16. Бегущая строка
  17. Создание списков
  18. Создание таблиц
  19. Фреймы
  20. Встроенный фрейм
  21. Создание форм

CSS

  1. Каскадные таблицы стилей
  2. Способы определения стилей
  3. Определение стилей через классы
  4. Определение стилей через индентификаторы
  5. Позиционирование элементов Web-страницы
  6. Шрифты
  7. Свойства текста
  8. Свойства блоков текста
  9. Цветовое оформление
  10. Создание полей в документе
  11. Абзацный отступ
  1. Корректное отображение Web-страницы
  2. Атрибуты тега <META>

Создание таблиц

Таблицы как правило нужны для позиционирования элементов на Web-странице.
Для создания таблиц используется контейнер тегов <TABLE>...</TABLE>
Пример (рис.18): 

      <HTML>
         <HEAD>
            <TITLE>Создание таблицы</TITLE>
         </HEAD>
         <BODY>
            <TABLE border="3">
               <TR>
                  <TD>
                     Первая ячейка первой строки
                  </TD>
                  <TD>
                     Вторая ячейка первой строки
                  </TD>
               </TR>
               <TR>
                  <TD>
                     Первая ячейка второй строки
                  </TD>
                  <TD>
                     Вторая ячейка второй строки
                  </TD>
               </TR>
               <TR>
                  <TD colspan="2" align="center">
                     Здесь объеденены две горизонтальные ячейки
                  </TD>
               </TR>
            </TABLE>
         </BODY>
      </HTML>

table, tr, td, border, colspan, rowspan
рис. 18. Пример создания таблицы.

Атрибут border="..." в теге <TABLE> указывает толщину рамки таблицы.

Контейнер тегов <TR>...</TR> даёт описание строки таблицы. Так как в данном примере мы использовали этот контейнер три раза, то и строки у нас получилось три.

Контейнер тегов <TD>...</TD> даёт описание ячейки таблицы. В первой и второй строке в нашем примере указано по два таких контейнера, поэтому и ячеек каждая строка имеет по две. В третьей строке две горизонтальные ячейки объединены в одну с помощью атрибута colspan="..." в теге <TD>. В значении данного атрибута ставится количество объединяемых ячеек. Если же мы хотим объединить вертикальные ячейки, то нужно использовать атрибут rowspan="...".

С помощью атрибута align="..." в теге <TD> мы выравниваем текст по горизонтали (значения right, center, left). Если же мы хотим выравнить текст в ячейке по вертикали, то нужно использовать атрибут valign="...". Его значения top (текст прижимается кверху), middle (текст центрируется), bottom (текст прижимается книзу). По умолчанию текст по вертикали имеет значение middle.

В теге <TABLE> также могут использоваться атрибуты cellpadding="..." и cellspacing="...". Первый задаёт расстояние между границей ячейки и её содержимым, а второй определяет расстояние между ячейками. Значения указываются в пикселях.

Используя атрибут width="..." в теге <TABLE> мы можем задать ширину таблицы либо в пикселях, либо в процентах. Также этот атрибут используется в теге <TD> для задания ширины ячейки.

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

Используя тег <TH> после тегов <TR> и <TD> можно задать заголовок строки и столбца соответственно.


Предыдущая страница         Следующая страница

Вы можете свободно использовать фрагменты сайта, с условием размещения ссылки на наш сайт:
<a href="http://tri222.narod.ru"><b>Самоучитель по созданию Web-страниц.</b></a>

Copyright © 2008 "tri222.narod.ru"
Вопросы и свои предложения вы можете отправлять на tri222@yandex.ru

Хостинг от uCoz