You are on page 1of 7

Раздел 3. Оформление html-документа. Таблицы (3 ч.

)
Видеоурок по верстке страниц вставить
Материал взять из http://htmlbook.ru/content/osnovy-verstki
И книг по верстке + Монахов воронин стр. 82
Разметка Web-страницы с использованием таблицы
Разметку Web-страницы удобно производить с использованием таблицы.
Возможны различные варианты разметки. Рассмотрим некоторые из них.
1 вариант
Разметка страницы производится с использованием таблицы шириной на весь
экран, независимо от того, каково разрешение экрана (width=100%). В данном
случае удобно создать таблицу, состоящую из двух строк и двух столбцов.
Верхняя строка будет отведена под заголовок странички, левый столбец будет
отведен под меню Web-сайта.
2 вариант
Разметка страницы производится с использованием таблицы шириной 760
пикселей, выровненной по центру экрана. В данном случае удобно создать
таблицу, состоящую из трех строк и одного столбца. Верхняя строка будет
отведена под заголовок странички, вторая строка будет отведена под меню
Web-сайта, а третья строка отведена непосредственно под содержание сайта.
Если

необходимо

разместить

внутри

текста

странички

какие-либо

иллюстрации, фотографии и пр., то в этом случае также используются
таблицы. В приведенном ниже примере во вторую ячейку второй строки
вставлена таблица, состоящая из двух строк и трех столбцов. В первую и в
третью ячейки первой строки вставлены рисунки, а во вторую ячейку первой
строки - название страницы.
Во все ячейки второй строки введен текст странички.
Задание
Создайте Web-сайт, состоящий из пяти страничек. Разметку страниц
производить при помощи таблицы (можете выбрать любой из предложенных
вариантов или придумать свой).

а также и между ячейками. Лабораторная работа №3 Тема: «Оформление html-документа." и cellspacing=". соответственно." – рисует рамку вокруг таблицы и каждой ячейки colspan=".прижать вправо align = "center" ......" определяют." (горизонтальное положение) align = "left " .. вокруг которых рисуется рамка.. расстояние в пикселях между границей ячейки и ее содержимым.. border=".позволяют объединять ячейки таблицы в группы. Таблицы». ОС Windows XP..прижать влево align = "right" .Заголовки столбцов таблицы <САРТIОN> ..на каждой страничке должны быть ссылки на другие страницы вашего сайта. Оборудование и программное обеспечение: ПК.." – ширина таблицы align = ". Создайте таблицу следующего вида: ..прижать вверх valign = "bottom" .на каждой страничке должны быть размещены иллюстрации.Использование заголовков таблицы width = ". Internet Explorer. Ход работы: 1." (вертикальное положение) valign = "top" ..разместить по центру cellpadding=". . Теоретический материал: <TABLE>." и rowspan=".... текстовый редактор Блокнот. Цель работы: научиться создавать таблицы в html-документе и использовать основные атрибуты для ее форматирования..</TABLE> {создание таблицы} <ТR>создание строк таблицы</ТR> <ТD> создание ячеек таблицы</ТD> <ТН> текст. содержащийся в ячейке </ТН> ..разместить по центру valign = ".." .прижать вниз valign = "middle" .

Построить таблицу следующего вида: . Создайте таблицу следующего вида: 3. расстояние между ячейками=10 Ширина рамки=10. расстояние между ячейками=10 Ширина рамки=5.2. Создать таблицы с различными параметрами рамки: Ширина рамки=1. расстояние между ячейками=10 4.

Листинг html-программы: <HTML> <HEAD> <TITLE> Таблица </TITLE> </HEAD> <BODY bgcolor='pink'> <H1 ALIGN = 'CENTER'> <B> Таблицы в html-документе </B> </H1> <font FACE = 'Comic Sans MS' color='blue'> </font> . Создать таблицу с разными цветами ячеек 7.htm в папке RABOCHLAB в директории HTMLLAB. Сохранить этот документ под любым именем с расширением .5.

77 </td> </tr> </table> <hr> <table border='1' cellpadding='10'> <tr> <th colspan='3'> 1 </th> </tr> <tr> <th> 2 </th> <th> 3 </th> <th> 4 </th> </tr> </table> <br> <table border='5' cellpadding='10'> <tr> <th colspan='3'> 1 </th> </tr> <tr> <th> 2 </th> <th> 3 </th> <th> 4 </th> </tr> </table> <br> <table border='10' cellpadding='10'> <tr> <th colspan='3'> 1 </th> </tr> <tr> <th> 2 </th> <th> 3 </th> <th> 4 </th> </tr> </table> <br> <hr> <table border width='300' height='300'> <tr> <th colspan='8' bgcolor='lime' align='center'> 1 </th> </tr> <tr> <th rowspan='6' bgcolor='yellow' align='center'> 4 </th> <th colspan='6' bgcolor='lime' align='center'> 2 </th> <th rowspan='6' bgcolor='yellow' align='center'> 5 </th> </tr> <tr> <th rowspan='4' bgcolor='yellow' align='center'> 3.2 </th> </tr> .75 </td> <td rowspan='4'> Технический </td> </tr> <tr> <td> Савчук </td> <td> Юрий </td> <td> Олегович </td> <td> 02.05.10.<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.79 </td> </tr> <tr> <td> Тарасов </td> <td> Алексей </td> <td> Сергеевич </td> <td> 27.10.72</td> <td> </td> <td> </td></tr> <tr> <td> Данилов </td> <td> Петр </td> <td> Андреевич </td> <td> 17.02.1 </th> <th colspan='4' bgcolor='lime' align='center'> 3 </th> <th rowspan='4' bgcolor='yellow' align='center'> 3.

4 </TD> <TD bgcolor='pink' align='center'> 12 </TD> .2 </TD> <th rowspan='2' bgcolor='green' align='center'> </th> <TD bgcolor='white' align='center'> 10 </TD> </TR> <TR> <TD bgcolor='white' align='center'> 11 </TD> <TD bgcolor='blue' align='center'> 9.1 </TD> <TD bgcolor='yellow' align='center'> 9.3 </TD> <TD bgcolor='blue' align='center'> 9.<tr> <th rowspan='2' bgcolor='yellow' align='center'> 6 </th> <td bgcolor='red' align='center'> 7 </td> <td bgcolor='blue' align='center'> 8 </td> <th rowspan='2' bgcolor='yellow' align='center'> 9 </th> </tr> <tr> <td bgcolor='pink' align='center'> 10 </td> <td bgcolor='purple' align='center'> 11 </td> </tr> <tr> <th colspan='4' bgcolor='lime' align='center'> 12 </th> </tr> <tr> <th colspan='6' bgcolor='lime' align='center'> 13 </th> </tr> <tr> <th colspan='8' bgcolor='lime' align='center'> 12 </th> </tr> </table> <hr> <TABLE border width='550' height='300'> <TR> <Th rowspan='2' bgcolor='fuchisia' align='center'> 1 </Th> <th colspan='6'bgcolor='blue' align='center'> 2 </th> </TR> <TR> <TD bgcolor='white' align='center'> 3 </TD> <Th colspan='2' bgcolor='purple' align='center'> 4 </Th> <Th colspan='2' bgcolor='aqua' align='center'> 5 </Th> <TD bgcolor='brown' align='center'> 6 </TD> </TR> <TR> <th rowspan='3' bgcolor='silver' align='center'> 7 </th> <TD bgcolor='maroon' align='center'> 8 </TD> <th rowspan='2' bgcolor='green' align='center'> </th> <TD bgcolor='yellow' align='center'> 9.

</TR> <TR> <TD bgcolor='lime' align='center'> 13 </TD> <Th colspan='2' bgcolor='teal' align='center'> 14 </Th> <Th colspan='2' bgcolor='Navy' align='center'> 15 </Th> <TD bgcolor='Maroon' align='center'> 16 </TD> </TR> </TABLE> </BODY> </HTML> .