Ячейки таблицы могут включать самые разнообразные элементы гипер текста: элементы управления, встроенные таблицы, заголовки, тексты, списковые структуры, изображения, элементы форм, анимационные изображения и так далее. Форматируя столбцы и строки таблицы, можно создавать многостраничные структуры взаимосвязанных элементов, образующих Web-сайт.
Пример 2.18. Образец табличной верстки
В примере приводится начальная часть табличной верстки.
<html>
<head>
<title>Новинки от Кирилла и Мефодия</title>
</head>
<body bgcolor="#000000" text="#000000" leftmargin="0" topmargin="0">
<table border="3" width="100%" height="100%" cellpadding="0" cellspacing="0" align = "center">
<tr><td align="center" valign="top">
<table border="3" width="760" height="100%" cellpadding="0" cellspacing= "0" align="center" valign="center">
<tr>
<td bgcolor="#E0E0E0" width="760" height="18" style="background: url(../images/0049.gif) #E9E9E9;"><table cellpadding="0" cellspacing="0" border="1">
<tr>
<td><img src="../images/0051.gif" border="1" width="22" height="17"></td> <td class="upline"> <a href="../main.htm" class="upmenu"> Главная </a> <a href="../default.htm" class="upmenu">Организация процесса обучения дома</a>:: Энциклопедии и справочники: БЭКМ'2003</td> </tr></table></td></tr>
<tr>
<td bgcolor="#FFFFFF" height="283"><!--<div STYLE="overflow-y:scroll; float:center; width:780px; height:425px">-->
<table border="3" width="100%" height="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center" valign="top"><table width="764" border="3" cellpadding ="0" cellspacing="0" align="center" valign="top">
<tr >
<td colspan=6 height="5"></td></tr>
<tr >
<td valign="top" style="background: url(../images/0022.gif) #FFffff; background-repeat:repeat-x; background-position:0px 15px" align=center><a href="../cdit/default.htm"><img border="1" src="../images/red_nadp.gif" alt="CD-курсы по IT"></a></td>
<td valign="top" style="background: url(../images/0022.gif) #FFffff; background-repeat:repeat-x; background-position:0px 15px" align=center><a href="../vschool/default.htm"><img border="1" src="../images/0025.gif" alt="Виртуальная школа"></a></td>
<td valign="top" style="background: url(../images/0022.gif) #FFffff; background-repeat:repeat-x; background-position:0px 15px" align=center><img border="1" src="../images/0048.gif" alt="Энциклопедии и справочники"></td>
<td valign="top" style="background: url(../images/0022.gif) #FFffff; background-repeat:repeat-x; background-position:0px 15px" align=center><a href="../acult/default.htm"><img border="1" src="../images/0037.gif" alt="Искусство и культура"></a></td>
<td valign="top" style="background: url(../images/0022.gif) #FFffff; background-repeat:repeat-x; background-position:0px 15px" align=center><a href="../english/default.htm"><img border="1" src="../images/0056.gif" alt="Английский язык"></a></td>
<td valign="top"style="background: url(../images/0022.gif) #FFffff; background-repeat:repeat-x; background-position:0px 15px" align=center><a href="../games/default.htm"><img border="1" src="../images/0059.gif" alt="Развивающие игры"></a></td></tr>
<tr height="95">
<td valign="bottom"><a href="../cdit/default.htm"><img border="0" src="../images/0050.gif" width="118" height="90" alt="CD-курсы по IT"></a></td>
<td valign="bottom"><a href="../vschool/default.htm"><img border="1" src="../images/0024.gif" width="118" height="90" alt="Виртуальная школа"></a> </td>
<td valign="bottom"><img border="1" src="../images/0046.gif" width="118" height ="90" alt="Энциклопедии и справочники"></td>
<td valign="bottom"><a href="../acult/default.htm"><img border="1" src= "../images/0036.gif" width="118" height="90" alt="Искусство и культура"> </a> </td>
<td valign="bottom"><a href="../english/default.htm"><img border="" src= "../images/0055.gif" width="118" height="90" alt="Английский язык"> </a> </td>
<td valign="bottom"><a href="../games/default.htm"><img border="0" src= "../images/0058.gif" width="118" height="90" alt="Развивающие игры"> </a> </td></tr>
...................................
Результат выполнения примера 2.18 имеет вид (Рис.2.18).
Рис.2.18. Просмотр примера 2.18 (параметр border=3). Табличная верстка
В рассматриваемом примере все ячейки таблицы имеют границы (параметры border равны 3 или 1). При табличной верстке границы ячеек, как правило, отсутствуют (параметр border равен нулю). Результат просмотра примера 2.18 при отсутствии границ ячеек приведен на рис.2.19.
Рис.2.19. Просмотр примера 2.18 (параметр border=0). Табличная верстка
Дата добавления: 2015-10-02; просмотров: 54 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Организация колонок. Элементы <COLGROUP> и <COL>. | | | Каскадные таблицы стилей |