Файловый архив студентов. Файловый архив студентов.
1264 вуза, 4635 предмета.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Уфимский Государственный Авиационный Технический Университет
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
WEB-dizayn_VM_4_kurs.doc
Скачиваний:
39
Добавлен:
17.11.2018
Размер:
3.55 Mб
Скачать
☆
►Содержание►

Вариант 2

<html>

<head>

<title>Учебник HTML: таблицы html страницы: задание цвета таблицы, графический фон</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link rel="stylesheet" href="../style.css" type="text/css">

</head>

<body>

<table cellspacing="0" cellpadding="0" border="0">

<tr>

<td rowspan="2" bgcolor="#F0E1C8" width="150" height="150"><img src="../sova.jpg" alt="Обучение HTML, Excel, Word. Как сделать свой сайт бесплатно" border="0"></td>

<td height="120" valign="middle" align="center">

<table cellspacing="2" cellpadding="2" border="0" width="100%">

<tr>

<td><p><strong>Microsoft Office</strong></p></td>

<td><p><strong>Сайтостроение</strong></p></td>

<td><p><strong>HTML</strong></p></td>

<td><p><strong>Программинг</strong></p></td>

<td><p><strong>Компьютер</strong></p></td>

<td><p><strong>Графика</strong></p></td>

<td><p><strong>Разное</strong></p></td>

</tr>

<tr>

<td valign="top">

· <a href="http://on-line-teaching.com/word/index.html">Основы Word</a><br>

</td>

<td valign="top">

· <a href="http://on-line-teaching.com/site/index.html">Как сделать сайт</a><br>

</td>

<td valign="top">

· <a href="http://on-line-teaching.com/html/index.html">Основы HTML</a><br>

</td>

<td valign="top">

· <a href="http://on-line-teaching.com/php/index.html">Основы PHP</a><br>

</td>

<td valign="top">

· <a href="http://on-line-teaching.com/IBM-computer/index.html">Что внутри ПК</a><br>

· <a href="http://on-line-teaching.com/IBM-PC/index.html">ПК для чайников</a><br>

</td>

<td valign="top">

<!--

· CorelDraw<br>

· Corel Photo-Paint<br>

-->

· <a href="http://on-line-teaching.com/graphika/index.html">Web-графика</a><br>

· <a href="http://on-line-teaching.com/autocad/index.html">САПР: AutoCAD</a><br>

</td>

<td valign="top">

· <a href="http://on-line-teaching.com/art/index.html">Статьи</a><br>

</td>

</tr>

</table>

</td>

</tr>

</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#B8984B">

<tr>

<td width="20%" align="left">

<a href="../index.html"><img src="../images/h_home.gif" alt="Главная страница" width="17" height="17" border="0"></a>

<a href="../sitemap.html"><img src="../images/h_map.gif" alt="Карта сайта" width="17" height="17" border="0"></a>

</td>

<td width="80%">

<p class="nav"><a class="a4" title="На главную страницу" href="../index.html">HTML, Excel, Word, SEO</a> <img src="../img/line6.gif" alt="" width="11" height="10" border="0">  <a class="a4" href="index.html">Основы Html</a><img src="../img/line6.gif" alt="" width="11" height="10" border="0">  Таблицы html</p>

</td>

</tr>

</table>

<table width="100%" border="1" bordercolor="#897132" align="center" cellpadding="0" cellspacing="0">

<tr>

<td width="18%" valign="top" bgcolor="#DCB464">

<table width="100%" cellpadding="0" cellspacing="0">

<tr><td><h3 align="center">Основы HTML</h3></td></tr>

<tr><td align="center"><a class="a" href="books.html">Книги по HTML</a></td></tr>

<tr><td><img src="../images/blankbutton.jpg" alt="" width="156" height="10" border="0"> </td></tr>

<tr><td><a class="a2" href="../html-tag/index.html">  <font color="#000080">Справочник HTML-тегов</font></a></td></tr>

<tr><td><a class="a2" href="../templates/index.html">  <font color="#008000">Шаблоны для сайтов</font></a></td></tr>

<tr><td> <form>

<h4>Как будете расплачиваться?</h4>

<table border="1" cellspacing="0" bordercolor="#cceeee">

<tbody>

<tr>

<td><input name="pay" type="radio" value="cahs" />Наличными</td>

</tr>

<tr>

<td><input name="pay" type="radio" value="check" />Чеком</td>

</tr>

<tr>

<td><input name="pay" type="radio" value="debit" />Дебитной картой</td>

</tr>

<tr>

<td><dl><dt> Кредитной карточкой</dt><dd><input name="pay" type="radio" value="mc" />MasterCard</dd><dd><input name="pay" type="radio" value="visa" />Visa</dd><dd><input name="pay" type="radio" value="dick" />Discovery</dd><dd><input name="pay" type="radio" value="ae" />American Express</dd></dl></td>

</tr>

</tbody>

</table>

<p><input type="submit" value="Отправить" /> <input type="Reset" /></p>

</form></td></tr>

<tr><td><img src="../images/blankbutton.jpg" alt="" width="156" height="10" border="0"> </td></tr>

<tr><td> </td></tr>

<tr><td>

<div align="center"><a href="../art/art18.html">

<img src="../img/submit.jpg" alt="Сабмит сайта в каталоги" width="240" height="172" border="0"></a>

</div>

</td></tr>

<tr><td>

<p class="topic2"> Здесь. Разные продукты от Microsoft - <a href="http://www.winblog.ru/win7/" target="_blank" class="a3">Windows 7</a> Server 2008 и другие. Бесплатно. </p>

<hr>

<br>

<!-- on-line-teaching.com разместите на месте показа блока -->

<div id="mix_block_12949321151294933089"></div>

<br>

<!-- on-line-teaching.com разместите на месте показа блока -->

<div id="mix_block_12949321151294932475"></div>

<br>

</td></tr>

</table>

<index></td>

<td width="64%" valign="top">

<br>

<p class="nav"><a class="a5" href="lsn013.html">«создание таблиц</a>

 || 

<a class="a5" href="index.html">язык HTML</a>

 || 

<a class="a5" href="lsn015.html">вид таблиц»</a></p>

<h1>Таблицы html страницы (ч.2)</h1>

<p><a class="a1" href="#1">Задание цвета элементов таблицы</a></p>

<p><a class="a1" href="#2">Графический фон таблицы</a></p>

<p><a class="a1" href="#3">Выравнивание данных в таблице</a></p>

<p><a class="a1" href="#4">Изменение размеров таблицы</a></p>

<a name="1"></a><h3>Задание цвета элементов таблицы html страницы</h3>

<p>При помощи атрибута BGCOLOR можно изменять цвет содержимого ячейки, строки, группы столбцов, крупы строк, таблицы целиком.</p>

<p>Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.</p>

<p><font color="#FF00FF">Пример:</font></p>

<table width="100%" border="1" bordercolor="#0000ff">

<tr>

<td width="50%" valign="top">

<p><strong>HTML-код:</strong></p><br>

<p><div align="left" style="font-size:8pt">  <td>1</td></div></p>

<p><div align="left" style="font-size:8pt">  <td>2</td></div></p>

</td>

<td width="50%" valign="top">

<p><strong>Отображение в браузере:</strong></p><br>

<table border="1">

<tr bgcolor="#ff00ff">

<td>1</td>

<td>2</td>

</tr>

<tr bgcolor="#5555ff">

<td>3</td>

<td>4</td>

</tr>

</table>

</td>

</tr></table>

<a name="3"></a><h3>Выравнивание данных в таблице html страницы</h3>

<p>Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.</p>

<p>Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.</p>

<p>Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине.

Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы.</p>

<p>Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.</p>

<p><font color="#FF00FF">Пример:</font></p>

<table width="100%" border="1" bordercolor="#0000ff">

<tr>

<td width="50%" valign="top">

<p><strong>HTML-код:</strong></p><br>

<p><div align="left" style="font-size:8pt"><table border="1" cellpadding="5"></div></p>

<p><div align="left" style="font-size:8pt"> <tr></div></p>

<p><div align="left" style="font-size:8pt">  <td align="right">1111<br>2222</td></div></p>

<p><div align="left" style="font-size:8pt">  <td valign="top" align="center">22222</td></div></p>

<p><div align="left" style="font-size:8pt"> </tr></div></p>

<p><div align="left" style="font-size:8pt"> <tr></div></p>

<p><div align="left" style="font-size:8pt">  <td>Нижняя ячейка</td></div></p>

<p><div align="left" style="font-size:8pt">  <td>Нижняя ячейка</td></div></p>

<p><div align="left" style="font-size:8pt"> </tr></div></p>

<p><div align="left" style="font-size:8pt"></table></div></p>

</td>

<td width="50%" valign="top">

<p><strong>Отображение в браузере:</strong></p><br>

<table border="1" cellpadding="5">

<tr>

<td align="right">1111<br>2222</td>

<td valign="top" align="center">22222</td>

</tr>

<tr>

<td>Нижняя ячейка</td>

<td>Нижняя ячейка</td>

</tr>

</table>

</td>

</tr></table>

<a name="4"></a><h3>Изменение размеров таблицы html страницы</h3>

<p>Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.</p>

<p>То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.</p>

<p>При задании чрезмерно малых величин ширины и высоты таблицы, браузер определяет минимальные значения, которые позволяют нормально отображать данные.</p>

<p>Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки.</p><p><font color="#FF00FF">Пример:</font></p>

<table width="100%" border="1" bordercolor="#0000ff"><tr><td width="50%" valign="top">

<p><strong>HTML-код:</strong></p><br>

<p><div align="left" style="font-size:8pt"><table border="1" width="200"></div></p>

<p><div align="left" style="font-size:8pt">  <td><p>Ширина 60%</p></td></div></p>

<p><div align="left" style="font-size:8pt"> </tr></div></p>

<p><div align="left" style="font-size:8pt"></table></div></p></td>

<td width="50%" valign="top">

<p><strong>Отображение в браузере:</strong></p><br>

<table border="1" width="200"><tr>

<td><p>Ширина 200 пикселей</p></td></tr></table><br><table border="1" width="60%">

<tr>

<td><p>Ширина 60%</p></td>

</tr>

</table></td></tr></table>

<p class="boldright"><img src="../img/top.gif" alt="" width="11" height="10" border="0"><a class="a3" href="#Начало страницы">top</a> </p>

<p class="nav"><a class="a5" href="lsn013.html">«создание таблиц</a>

 || 

<a class="a5" href="index.html">язык HTML</a>

 || 

<a class="a5" href="lsn015.html">вид таблиц»</a></p>

</index>

</body>

</html>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности