|
 Задания к лабораторной работе №7
|
| Дата | 14.09.2023 | | өлшемі | 69,86 Kb. | | #43384 |
| Лабораторная №5 (1) (1) Задания к лабораторной работе № 7.
Таблицы HTML-документов
Задание 1. Создание таблицы по образцу.
В элементе укажите название странички "Задание 1. Создание таблицы по образцу"
<br /><li/>
<br />Создайте таблицу, как показано на рис.
<br /></ul> </ul> <table width="487" cellpadding="7" cellspacing="0"> <col width="152"> <col width="139"> <col width="152"> <tr valign="top"> <td width="152" height="5">
<br />Один
<br /></td> <td width="139">
<br />Два
<br /></td> <td width="152">
<br />Три
<br /></td> </tr> <tr valign="top"> <td width="152" height="5">
<br /><b>Четыре</b>
<br /></td> <td width="139">
<br /><b>Пять</b>
<br /></td> <td width="152">
<br /><b>Шесть</b>
<br /></td> </tr> </table>
<br />
<br />
<br /><ul> <ul> <li/>
<br />Текст в первой строке выровняйте по центру по горизонтали и по вертикали.
<br /><li/>
<br />Текст во второй строке выделите жирным шрифтом.
<br /></ul> </ul>
<br />
<br />
<br /><h2>
<br /></h2> <h2>
<br /></h2> <h2>Задание 2. Создание таблицы по образцу</h2> <h2>
<br /></h2> <h2> В элементе <TITLE> укажите название странички "Задание 2. Создание таблицы по образцу"</h2> <ul> <ul> <li/>
<br />Создайте HTML-документ, соответствующий следующему образцу:
<br /></ul> </ul>
<br /> <span id="frame1" dir="ltr"> <table dir="ltr" width="307" cellpadding="7" cellspacing="0"> <col width="134"> <col width="134"> <tr valign="top"> <td width="134" bgcolor="#ffff00">
<br /><b>Заголовок</b> <b>1</b>
<br /></td> <td width="134" bgcolor="#ffff00">
<br /><b>Заголовок</b> <b>2</b>
<br /></td> </tr> <tr></tr> <tr></tr> <tr></tr> <tr valign="top"> <td width="134" height="5">
<br />Ячейка 1
<br /></td> <td width="134">
<br />Ячейка 2
<br /></td> </tr> <tr></tr> <tr></tr> <tr></tr> <tr valign="top"> <td width="134">
<br />Ячейка 3
<br /></td> <td width="134">
<br />Ячейка 4
<br /></td> </tr> </table>
<br />
<br />
<br /></span>Примеры таблиц
<br /> <br clear="left"/>
<br />
<br /><span id='Стандартная_таблица_Заголовок_таблицы'><h2> Стандартная таблица Заголовок таблицы</span></h2>
<br /> <br clear="left"/>
<br />
<br /> <span id="frame2" dir="ltr"> <table dir="ltr" width="323" cellpadding="7" cellspacing="0"> <colgroup> <col width="4364"> <col width="143"> </colgroup> <colgroup> <col width="143"> </colgroup> <tr valign="top"> <td width="4364" height="24">
<br />
<br />
<br /></td> <td width="143">
<br />
<br />
<br /></td> <td width="143">
<br />
<br />
<br /></td> </tr> <tr valign="top"> <td width="4364" height="26">
<br />
<br />
<br /></td> <td width="143">
<br />
<br />
<br /></td> <td width="143">
<br />
<br />
<br /></td> </tr> </table>
<br />
<br />
<br /></span><b>Объединение ячеек</b>
<br />
<br />
<br /><table width="437" cellpadding="7" cellspacing="0"> <col width="129"> <col width="132"> <col width="129"> <tr valign="top"> <td width="129" height="1" bgcolor="#ffff00">
<br /><b>Заголовок</b> <b>1</b>
<br /></td> <td width="132" bgcolor="#ffff00">
<br /><b>Заголовок</b> <b>2</b>
<br /></td> <td width="129" bgcolor="#ffff00">
<br /><b>Заголовок</b> <b>3</b>
<br /></td> </tr> <tr></tr> <tr valign="top"> <td rowspan="4" colspan="2" width="274" height="4" bgcolor="#00ccff">
<br />
<p>Ячейка 1</p>
<br /></td> <td width="129">
<br />
<br />
<br /></td> </tr> <tr></tr> <tr valign="top"> <td width="129">
<br />Ячейка 2
<br /></td> </tr> <tr></tr> <tr valign="top"> <td width="129">
<br />Ячейка 3
<br /></td> </tr> <tr></tr> <tr valign="top"> <td width="129">
<br />Ячейка 4
<br /></td> </tr> <tr></tr> <tr> <td colspan="3" width="417" height="1" valign="top" bgcolor="#00ffff">
<br />Ячейка 5
<br /></td> </tr> </table>
<br /> <br clear="left"/>
<br />
<br /><h2> Вложенная таблица</h2>
<br />
<br />
<br /><table width="662" cellpadding="7" cellspacing="0"> <colgroup> <col width="71"> <col width="65"> <col width="65"> <col width="71"> </colgroup> <colgroup> <col width="4355"> </colgroup> <colgroup> <col width="4364"> </colgroup> <colgroup> <col width="91"> </colgroup> <colgroup> <col width="91"> </colgroup> <colgroup> <col width="91"> </colgroup> <colgroup> <col width="4360"> </colgroup> <tbody> <tr valign="top"> <td width="71" height="1">
<br />
<br />
<br /></td> <td width="65">
<br />
<br />
<br /></td> <td width="65">
<br />
<br />
<br /></td> <td colspan="2" width="71">
<br />
<br />
<br /></td> <td colspan="5" width="314">
<br />
<br />
<br /></td> </tr> <tr valign="top"> <td rowspan="2" width="71" height="3">
<br /><b>Ячейка</b> <b>1.1.1</b>
<br /></td> <td rowspan="2" width="65">
<br /><b>Ячейка</b> <b>1.1.2</b>
<br /></td> <td rowspan="2" width="65">
<br /><b>Ячейка</b> <b>1.1.3</b>
<br /></td> <td rowspan="2" colspan="2" width="71">
<br /><b>Ячейка</b> <b>1.1.4</b>
<br /></td> <td rowspan="2" width="4364">
<br />
<br />
<br /></td> <td width="91">
<br /><i><b>Ячейка 3.1.1</b></i>
<br /></td> <td width="91">
<br /><i><b>Ячейка 3.1.2</b></i>
<br /></td> <td width="91">
<br /><i><b>Ячейка 3.3.1</b></i>
<br /></td> <td width="4360">
<br />
<br />
<br /></td> </tr> <tr valign="top"> <td width="91">
<br />Ячейка 3.2.1
<br /></td> <td width="91">
<br />Ячейка 3.2.2
<br /></td> <td width="91">
<br />Ячейка 3.2.3
<br /></td> <td width="4360">
<br />
<br />
<br /></td> </tr> <tr></tr> </tbody> <tbody> <tr valign="top"> <td colspan="4" width="313" height="59">
<br />
<br />
<br /><b>Ячейка</b> <b>2.1.1 Ячейка</b> <b>2.1.2</b>
<br />Ячейка 2.2.1 Ячейка 2.2.2
<br /></td> <td colspan="6" width="314">
<br />
<p>Ячейка 4.1.1 Ячейка 4.1.2</p>
<br /><i><b>Ячейка 4.2.1 Ячейка</b></i><i> </i><i><b>4.2.2</b></i>
<br />Ячейка 4.3.1 Ячейка 4.3.2
<br /></td> </tr> </tbody> </table>
<br />
<br />
<br /> <br clear="left"/> </img>
<br />
<br />
<br /><b>Табличка</b>
<br /><div id="Frame3" dir="ltr" >
<br /><sub>Петровым</sub> 2 звонка
<br /></div>
<br />
<br /> <br clear="left"/> </img>
<br />
<br /><span id='Задание_3._Форматирование_таблицы'><h2> Задание 3. Форматирование таблицы</span></h2> <ul> <ul> <li/>
<br />Для выполнения этого задания воспользуйтесь результатами выполнения Задания 1.
<br /><li/>
<br />В элементе <TITLE> укажите название странички "Задание 3. Форматирование таблицы".
<br /><li/>
<br />Сделайте фон первого столбца зеленого цвета, второго – красного, третьего – синего.
<br /><li/>
<br />Задайте ширину бордюра таблицы, равным 3 пикселям.
<br /><li/>
<br />Ширину таблицы сделайте равной ширине экрана.
<br /><li/>
<br />Шрифт, которым написан текст внутри таблицы, сделайте белым.
<br /></ul> </ul>
<br />
<br />
<br /><span id='Задание_4._Заполнение_таблицы'><h2>Задание 4. Заполнение таблицы</span></h2> <ul> <ul> <li/>
<br />Для выполнения этого задания воспользуйтесь результатами выполнения Задания 1.
<br /><li/>
<br />В элементе <TITLE> укажите название странички "Задание 4. Заполнение таблицы".
<br /><li/>
<br />В первую ячейку первой строки вставьте рисунок из файла *.jpg.
<br /><li/>
<br />Во второй ячейке второй строки напишите ваше любимое четверостишие.
<br /><li/>
<br />Сделайте фон третьей ячейки второй строки красного цвета.
<br /></ul> </ul>
<br />
<br />
<br /><span id='Задание_5._Самостоятельное_проектирование_и_создание_таблицы'><h2>Задание 5. Самостоятельное проектирование и создание таблицы</span></h2> <ul> <ul> <li/>
<br />Составьте таблицу для расписания ваших занятий. Пусть эта таблица состоит из восьми столбцов и девяти строк. Ширина таблицы 100%.
<br /><li/>
<br />В первом столбце укажите время начала и конца ваших занятий. Выравнивание данных в ячейках должно быть по левому краю.
<br /><li/>
<br />В остальных столбцах укажите дисциплины по дням недели.
<br /><li/>
<br />Выравнивание дней недели по центру ячейки и жирным шрифтом.
<br /><li/>
<br />Выравнивание названий дисциплин в ячейках должно быть по левому краю.
<br /><li/>
<br />У всех столбцов фон сделайте разным цветом.
<br /><li/>
<br />Перед таблицей поместите заголовок "РАСПИСАНИЕ ЗАНЯТИЙ", выделив его тэгами <h2> и </h2>. Цвет заголовка красный.
<br /><li/>
<br />Между заголовком и таблицей поместите рисунок.
<br /></ul> </ul>
<br />
<br />
<br /><h2>Задание 6.</h2>
<br />Составьте справочную таблицу “Цветовая гамма HTML-документа” размером 5*3. Заполните ячейки таблицы записями кодов различных оттенков красного (строка 1), зеленого (строка 2) и синего (строка 3). Фон ячеек закрасьте теми же цветами, коды которых записаны в них.
<br />
<br />
<br /><h2>Задание 7.</h2>
<br />Составьте радугу, закрасив ячейки таблицы нужным цветом.
<br />
<br />
<br />
<br /><h2>Задание 8.</h2>
<br />Составьте выписку из своей зачетной книжки, оформив ее в виде таблицы.
<br />
<br />
<br /><h2>Задание 9.</h2>
<br />Изучите примеры и создайте WEB-страницу, на которой посередине разместите таблицу следующего вида (ширина таблицы=90%)
<br />
<br />
<br /><h2> Контрольные вопросы</h2>
<br />
<br />
<br /><ol> <li/>
<br />Основные методы создания таблиц.
<br /><li/>
<br />Параметры, которые используются при создании таблиц в HTML-документах.
<br /><li/>
<br />Группировка данных
<br /><li/>
<br />Колонтитулы таблицы
<br /><li/>
<br />Прорисовка структуры таблицы
<br /><li/>
<br />Вложенные таблицы
<br /><li/>
<br />Создание цветных таблиц.
<br /></ol>
<br />nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
Достарыңызбен бөлісу: |
|
|
