Вложенные таблицы
Как следует из названия одну таблицу можно поместить внутрь другой, а имеено внутрь любого столбца. Сделаем это на примере нашей последней разметки. Итак, у нас есть вот такой код:
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<table width="715" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr bgcolor="darkred">
<td width="70%" height="60">шапка</td>
<td rowspan="2">меню</td>
</tr>
<tr bgcolor="oldlace">
<td height="200">контент</td>
</tr>
<tr bgcolor="darkred">
<td colspan="2" height="30">низ сайта</td>
</tr>
</table>
</body>
</html>
Давайте внутрь нашего контента поместим во такую таблицу:
Картинки для нее подберите сами. Код этой таблицы простой - три строки и два столбца:
<table width="470" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr>
<td width="100"><img src="f1.jpg" width="100" height="70"></td>
<td>Здесь текст о ромашках</td>
</tr>
<tr>
<td width="100"><img src="f2.jpg" width="100" height="70"></td>
<td>Здесь текст о тюльпанах</td>
</tr>
<tr>
<td width="100"><img src="f3.jpg" width="100" height="70"></td>
<td>Здесь текст о герберах</td>
</tr>
</table>
Теперь возьмем код этой таблицы и поместим его вместо слова "контент" в код нашей разметки:
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<table width="715" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr bgcolor="darkred">
<td width="70%" height="60">шапка</td>
<td rowspan="2">меню</td>
</tr>
<tr bgcolor="oldlace">
<td height="200">
<table width="470" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr>
<td width="100"><img src="f1.jpg" width="100" height="70"></td>
<td>Здесь текст о ромашках</td>
</tr>
<tr>
<td width="100"><img src="f2.jpg" width="100" height="70"></td>
<td>Здесь текст о тюльпанах</td>
</tr>
<tr>
<td width="100"><img src="f3.jpg" width="100" height="70"></td>
<td>Здесь текст о герберах</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="darkred">
<td colspan="2" height="30">низ сайта</td>
</tr>
</table>
</body>
</html>
Результат:
Теперь уберем все границы у вложенной таблицы. Для этого в теге <table> этой таблицы зададим параметр <border="0">
<table width="470" border="0"
align="center" cellspacing="0" cellpadding="10" >
Результат:
Именно так оформляется контент при табличной верстке сайтов. В общем, в каждую ячейку таблицы можно вставлять любые элементы, в том числе и другие таблицы. Потренируйтесь, попробуйте оформить разделы меню и шапки, используя знания, полученные на предыдущих уроках. А на сегодня урок закончен.
Вот серия наших уроков и подошла к концу. Теперь вы знаете, как сделать простой сайт и разместить его в интернете. Согласитесь, что это совсем не сложно. Пробуйте, продолжайте учиться и развивайте свои проекты. Удачи Вам!
ТАБЛИЦА ЦВЕТОВ
Таблица 16 основных цветов, которые используются во всех браузерах.
|
|
|
|
Название |
Цвет |
Hex |
(RGB) |
Aqua (морская волна) |
|
#00FFFF |
(000,255,255) |
Black (черный) |
|
#000000 |
(000,000,000) |
Blue (голубой) |
|
#0000FF |
(000,000,255) |
Fuchsia (фуксин) |
|
#FF00FF |
(255,000,255) |
Gray (серый) |
|
#808080 |
(128,128,128) |
Green (зеленый) |
|
#008000 |
(000,128,000) |
Lime (ярко-зеленый) |
|
#00FF00 |
(000,255,000) |
Maroon (темно-бордовый) |
|
#800000 |
(128,000,000) |
Navy (темно-синий) |
|
#000080 |
(000,000,128) |
Olive (оливковый) |
|
#808000 |
(128,128,000) |
Purple (фиолетовый) |
|
#800080 |
(128,000,128) |
Red (красный) |
|
#FF0000 |
(255,000,000) |
Silver (серебряный) |
|
#C0C0C0 |
(192,192,192) |
Teal (серо-зеленый) |
|
#008080 |
(000,128,128) |
White (белый) |
|
#FFFFFF |
(255,255,255) |
Yellow (желтый) |
|
#FFFF00 |
(255,255,000) |
Таблица пурпурного цвета и его оттенков.
Название |
Цвет |
Hex |
(RGB) |
Magenta (пурпурный) |
|
#FFCBDB |
(255,203,219) |
Magenta (пурпурный) |
|
#FF0099 |
(255,000,153) |
Magenta (маджента) |
|
#F95A61 |
(249,090,097) |
Fuchsia (фуксия) |
|
#FF00FF |
(255,000,255) |
Мовеин (анилиновый пурпур) |
|
#EF0097 |
(239,000,151) |
Salmon pink (оранжево розовый) |
|
#FF91A4 |
(255,145,164) |
Cenise (оттенок пурпурного) |
|
#DE3163 |
(153,149,140) |
Aubergine Eggplant (баклажановый) |
|
#990066 |
(153,000,132) |
Lavender blush (розовато-лавандовый) |
|
#FFF0F5 |
(255,240,245) |
Lilac (сиреневый) |
|
#C8A2C8 |
(200,162,200) |
Magenta (маджента) |
|
#FF008F |
(255,000,143) |
Orchid (орхидея) |
|
#DA70D6 |
(218,112,214) |
Red-violet (фиолетово-красный) |
|
#C71585 |
(199,021,133) |
Sanguine (сангиновый) |
|
#92000A |
(146,000,010) |
Thistle (оттенок пурпурного) |
|
#D8BFD8 |
(185,211,238) |
Violet-eggplant (оттенок пурпурного) |
|
#991199 |
(153,017,153) |
Rosa vivo (насыщено розовый) |
|
#FF007F |
(255,000,127) |
Lavender-rose (оттенок пурпурного) |
|
#FBA0E3 |
(108,123,139) |
Mountbatten pink (розовый Маунбаттена) |
|
#997ABD |
(153,122,141) |
ТАБЛИЦА ОСНОВНЫХ ТЕГОВ ЯЗЫКА HTML.
Основные теги |
|
<html></html> |
Указывает программе просмотра страниц что это HTML документ. |
<head></head> |
Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. |
<body></body> |
Определяет видимую часть документа Теги оглавления |
Теги Оглавления |
|
<title></title> |
Помещает название документа в оглавление программы просмотра страниц |
Атрибуты тела документа |
|
<body bgcolor=?> |
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет. |
<body text=?> |
Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет. |
<body link=?> |
Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет. |
<body vlink=?> |
Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: #333333 - серый цвет. |
<body alink=?> |
Устанавливает цвет гиперссылок при нажатии. |
Теги для форматирования текста |
|
<pre></pre> |
Обрамляет предварительно отформатированный текст. |
<h1></h1> |
Создает САМЫЙ БОЛЬШОЙ заголовок |
<h6></h6> |
Создает самый маленький заголовок |
<b></b> |
Создает жирный текст |
<i></i> |
Создает наклонный текст |
<tt></tt> |
Создает текст - имитирующий стиль печатной машинки. |
<cite></cite> |
Используется для цитат, обычно наклонный текст. |
<em></em> |
Используется для выделения из текста слова (наклонный или жирный текст) |
<strong></strong> |
Используется для выделения наиболее важных частей текста (наклонный или жирный текст) |
<font size=?></font> |
Устанавливает размер текста в пределах от 1 до 7. |
<font color=?></font> |
Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
Гиперссылки |
|
<a href="URL"></a> |
Создает гиперссылку на другие документы или часть текущего документа. |
<a href="mailto:EMAIL"> </a> |
Создает гиперссылку вызова почтовой программы для написания письма автору документа. |
<a name="NAME"></a> |
Отмечает часть текста как цель для гипперссылок в документе. |
<a href="#NAME"></a> |
Создает гиперссылку на часть текущего документа. |
Форматирование текста |
|
<p> |
Создает новый параграф |
<p align=?> |
Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center |
<br/> |
Вставляет перевод строки. |
<blockquote> </blockquote> |
Создает отступы с обеих сторон текста. |
<dl></dl> |
Создает список определений. |
<dt> |
Определяет каждый из терминов списка |
<dd> |
Описывает каждое определение |
<ol></ol> |
Создает нумерованный список |
<li> |
Определяет каждый элемент списка и присваивает номер |
<ul></ul> |
Создает ненумерованный список |
<li> |
Предваряет каждый элемент списка и добавляет кружок или квадратик. |
<div align=?> |
Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей |
Графические элементы |
|
<img src="name"> |
Добавляет изображение в HTML документ |
<img src="name" align=?> |
Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle |
<img src="name" border=?> |
Устанавливает толщину рамки вокруг изображения |
<hr> |
Добавляет в HTML документ горизонтальную линию. |
<hr size=?> |
Устанавливает высоту(толщину) линии |
<hr width=?> |
Устанавливает ширину линии, можно указать ширину в пикселах или процентах. |
<hr noshade> |
Создает линию без тени. |
<hr color=?> |
Задает линии определенный цвет. Значение RRGGBB. |
Таблицы |
|
<table></table> |
Создает таблицу. |
<tr></tr> |
Определяет строку в таблице. |
<td></td> |
Определяет отдельную ячейку в таблице. |
<th></th> |
Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом) |
Атрибуты таблицы |
|
<table border=?> |
Задает толщину рамки таблицы. |
<table cellspacing=?> |
Задает расстояние между ячейками таблицы. |
<table cellpadding=?> |
Задает расстояние между содержимым ячейки и ее рамкой. |
<table width=?> |
Устанавливает ширину таблицы в пикселах или процентах от ширины документа. |
<tr align=?> или <td align=?> |
Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. |
<tr valign=?> или <td valign=?> |
Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. |
<td colspan=?> |
Указывает кол-во столбцов которое объединено в одной ячейке. (по умолчанию=1) |
<td rowspan=?> |
Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1) |
<td nowrap> |
Не позволяет программе просмотра делать перевод строки в ячейке таблицы. |