Цель работы: научиться создавать таблицы в html-документе и использовать основные атрибуты для ее форматирования.
Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.
Теоретический материал:
<TABLE>...</TABLE> {создание таблицы}
<ТR>создание строк таблицы</ТR>
<ТD> создание ячеек таблицы</ТD>
<ТН> текст, содержащийся в ячейке </ТН> - Заголовки столбцов таблицы
<САРТIОN> - Использование заголовков таблицы
width = "..." – ширина таблицы
align = "..." (горизонтальное положение)
align = "left " - прижать влево
align = "right" - прижать вправо
align = "center" - разместить по центру
valign = "..." (вертикальное положение)
valign = "top" - прижать вверх
valign = "bottom" - прижать вниз
valign = "middle" - разместить по центру
cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками.
border="..." – рисует рамку вокруг таблицы и каждой ячейки
colspan="..." и rowspan="..." - позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.
Ход работы:
Создайте таблицу следующего вида:
Создайте таблицу следующего вида:
Создать таблицы с различными параметрами рамки:
Ширина рамки=1, расстояние между ячейками=10
Ширина рамки=5, расстояние между ячейками=10
Ширина рамки=10, расстояние между ячейками=10
Построить таблицу следующего вида:
5. Создать таблицу с разными цветами ячеек
7. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB.
Листинг html-программы:
<HTML>
<HEAD>
<TITLE> Таблица </TITLE>
</HEAD>
<BODY bgcolor='pink'>
<H1 ALIGN = 'CENTER'> <B> Таблицы в html-документе </B> </H1>
<font FACE = 'Comic Sans MS' color='blue'>
</font>
<table border>
<tr> <th colspan='5'> Список сотрудников </th> </tr>
<tr> <th> Фамилия </th> <th> Имя </th> <th> Отчество </th> <th> Дата рождения </th> <th> Отдел </th> </tr>
<tr> <td> Гончаров </td> <td> Александр </td> <td> Петрович </td> <td> 13.10.75 </td> <td rowspan='4'> Технический </td> </tr>
