Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АрхитектураБиологияГеографияДругоеИностранные языки
ИнформатикаИсторияКультураЛитератураМатематика
МедицинаМеханикаОбразованиеОхрана трудаПедагогика
ПолитикаПравоПрограммированиеПсихологияРелигия
СоциологияСпортСтроительствоФизикаФилософия
ФинансыХимияЭкологияЭкономикаЭлектроника

Лабораторная работа №3

Читайте также:
  1. AKM Работа с цепочками событий
  2. II. Работа с акварелью, гуашью, восковыми мелками, школьным мелом
  3. II. САМОСТОЯТЕЛЬНАЯ РАБОТА СТУДЕНТОВ
  4. III. Коррекционная работа с детьми.
  5. III. Работа с природным материалом
  6. IV. Работа с тканью, нитками
  7. Quot;Работа после работы".

Тема: «Оформление html-документа. Таблицы».

 

Цель работы: научиться создавать таблицы в 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. Создайте таблицу следующего вида:

 

 

  1. Создайте таблицу следующего вида:

 

 

  1. Создать таблицы с различными параметрами рамки:

Ширина рамки=1, расстояние между ячейками=10

 

 

Ширина рамки=5, расстояние между ячейками=10

 

Ширина рамки=10, расстояние между ячейками=10

 

  1. Построить таблицу следующего вида:

 

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>

<tr> <td> Савчук </td> <td> Юрий </td> <td> Олегович </td> <td> 02.05.79 </td> </tr>

<tr> <td> Тарасов </td> <td> Алексей </td> <td> Сергеевич </td> <td> 27.02.72</td> <td> </td> <td> </td></tr>

<tr> <td> Данилов </td> <td> Петр </td> <td> Андреевич </td> <td> 17.10.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.1 </th>

<th colspan='4' bgcolor='lime' align='center'> 3 </th>

<th rowspan='4' bgcolor='yellow' align='center'> 3.2 </th>

</tr>

<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.1 </TD>

<TD bgcolor='yellow' align='center'> 9.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.3 </TD>

<TD bgcolor='blue' align='center'> 9.4 </TD>

<TD bgcolor='pink' align='center'> 12 </TD>

</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>

 

Дата добавления: 2015-10-02; просмотров: 94 | Нарушение авторских прав

<== предыдущая страница | следующая страница ==>
Лабораторная работа №2| Лабораторная работа №4
mybiblioteka.su - 2015-2024 год. (0.013 сек.)