Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Порядок выполнения
|
|
Создание таблиц в HTML-документе.
Таблицы представляют собой особую часть HTML-документа. Данные в ней организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и горизонтальных рядов. Каждая клетка таблицы является ячейкой. Ячейки могут содержать в себе текст, графику или другую таблицу. Таблица состоит из трех основных частей:
- название таблицы,
- заголовки столбцов,
- ячейки.
Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.
Теги оформления таблиц
| Тег | Форма записи | Примечание |
| TABLE | < TABLE> текст< /TABLE> | Объявление таблиц. |
| TR | < TR> текст< /TR> | Объявление строки. |
| TD | < TD> текст< /TD> | Объявление ячейки в строке. |
Строка состоит из ячеек, таблица состоит из строк. Тег TD всегда должен быть вложен внутрь тега TR, а тег TR должен находиться между открывающимися и закрывающимися тегами таблицы TABLE.
Атрибуты тега < TABLE>
| Атрибут | Форма записи | Примечание |
| BORDER | < TABLE BORDER=X> | Задает рамку вокруг таблицы. |
| WIDTH | < TABLE WIDTH=XX%> | Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пиксель. |
| BGCOLOR | < TABLE BGCOLOR=" #RRGGBB" > | Задает цвет фона таблицы. |
Атрибуты тегов < TD> и < TR>
| Атрибут | Форма записи | Примечание |
| ALIGN | < TD ALIGN=X> | Устанавливает выравнивание по горизонтали (Right, Left, Center) |
| VALIGN | < TD VALIGN=X> | Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline) |
| BGCOLOR | < TD BGCOLOR= " #RRGGBB" > | Задает цвет фона ячейки. |
Еще один тег для оформления ячеек таблиц — тег < TH>...< /TH> — нужен для задания заголовочных ячеек. Он во всем совпадает с тегом < TD>, но в отличие от него, содержимое выдается жирным шрифтом и центрируется.
Если нужно задать заголовок всей таблицы, используйте тег < CAPTION параметры>...< /CAPTION>. Он должен быть внутри тега < TABLE>, но вне описания ячеек. Тег имеет один параметр:
ALIGN - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы.
Задание №1.
Создайте на языке HTML таблицу следующего вида:
|
Порядок выполнения
1. Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:
< html>
< body>
< table border=2 width=50% align=" center" cellspacing=0>
< tr> < th rowspan=2> Сумма< /th> < th colspan=3> I квартал < /th> < /tr>
< tr align=" center" > < td > Январь< /td> < td > Февраль < /td> < td > Март < /td> < /tr>
< tr align=" center" > < td > 2750< /td> < td > 1600< /td> < td > 300 < /td> < td > 850 < /td> < /tr>
< tr> < th rowspan=2> Сумма< /th> < th colspan=3> II квартал < /th> < /tr>
< tr align=" center" > < td > Апрель< /td> < td > Май < /td> < td > Июнь < /td> < /tr>
< tr align=" center" > < td > 2050< /td> < td > 900< /td> < td > 400 < /td> < td > 750 < /td> < /tr>
< /table>
< /body>
< /html>
2. Сохраните файл с расширением html
3. Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer