Дистанционный курс
Создание простейших HTML-страниц
Смирнова Валерия Владимировна

Занятие 12. Таблицы

Информация

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

Таблица состоит из трех основных частей:

  • название таблицы,
  • заголовки столбцов,
  • ячейки.

Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо.
Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.

Теги оформления таблиц

Тег

Формат

Описание
TABLE <TABLE>текст</TABLE> Описание таблиц
TR <TR>текст</TR> Тег строки
TD <TD>текст</TD> Тег данных
Атрибуты тега <TABLE>

Атрибут

Формат

Описание
BORDER <TABLE BORDER=X> Задает толщину рамки вокруг таблицы. Измеряется в пикселях.
WIDTH <TABLE WIDTH=XX%> Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пикселев.
BGCOLOR <TABLE BGCOLOR="RRGGBB"> Задает цвет фона таблицы.
Атрибуты тегов <TD> и <TR>

Атрибут

Формат

Описание
ALIGN <TD ALIGN=CENTER> Устанавливает выравнивание по горизонтали (Right, Left, Center).
VALIGN <TD VALIGN=CENTER> Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline).
BGCOLOR <TABLE BGCOLOR="RRGGBB"> Задает цвет фона ячейки.

 

1. Запустите стандартную программу Блокнот (Notepad).

2. Наберите в окне редактора:

<HTML>

<HEAD>

<TITLE> Расписание занятий 5 классов </TITLE>

</HEAD>

<BODY BGCOLOR="FFFFFF">

<P ALIGN=CENTER>

<FONT COLOR="RED" SIZE="6" FACE="ARIAL">

<B> 5 класс </B></FONT><BR>

</P>

<FONT COLOR="BLUE" SIZE="4" FACE="COURIER">

<B> Понедельник </B></FONT><BR>

<TABLE BORDER="1" WIDTH=100% BGCOLOR="99CCCC">

<TR BGCOLOR="CCCCFF" ALIGN=CENTER>

<TD>Урок</TD> <TD>5 А</TD> <TD>5 Б</TD> <TD>5 В</TD>

</TR>

<TR>

<TD>1</TD> <TD>Русский язык</TD> <TD>Литература</TD> <TD>История</TD>

</TR>

<TR>

<TD>2</TD> <TD>Алгебра</TD> <TD>Информатика</TD> <TD>Англ.язык</TD>

</TR>

<TR>

<TD>3</TD> <TD>История</TD> <TD>Информатика</TD> <TD> Алгебра </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Посмотреть пример страницы

3. Сохраните файл под именем 5.HTM.

4. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer.

5. Самостоятельно дополните полученную Web-страницу по аналогии расписанием на последующие дни: ВТОРНИК, СРЕДУ, ЧЕТВЕРГ, ПЯТНИЦУ, СУББОТУ.

Оглавление                              
Введение 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16