school.lab/HTML-5.htm at master · LEV13/school.lab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html>
<head>
	<title>Website</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body leftmargin=0 topmargin=0 marginheight="0" marginwidth="0" bgcolor="#ffffff">

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
  <tr>
	<td width="50%" background="images/bg.gif"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
        <td valign="bottom" background="images/bg_left.gif"><img src="images/bg_right.gif" alt="" width="17" height="0" border="0"></td>

	<td valign="top">
      <table width="950" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td height="29" background="images/fon06.gif">
          </div>
          </td>
        </tr>
        <tr>
          <td><img src="images/main04.jpg" width="950" height="160"></td>
        </tr>
      </table>
      <table border="0" cellpadding="0" cellspacing="0" width="950" background="images/fon_top.gif">
<tr>
	<td>
<table border="0" cellpadding="0" cellspacing="0" background="images/fon_top.gif" width="100%">
<tr align="center">
	<td><p class="menu01"><a href="index.htm">ГЛАВНАЯ</a></p></td>
	<td><img src="images/e01.gif" width="2" height="20" alt="" border="0"></td>
	<td><p class="menu01"><a href="HTML.htm">HTML</a></p></td>
	<td><img src="images/e01.gif" width="2" height="20" alt="" border="0"></td>
	<td><p class="menu01"><a href="CSS.htm">CSS</a></p></td>
	<td><img src="images/e01.gif" width="2" height="20" alt="" border="0"></td>
	<td><p class="menu01"><a href="IMG.htm">Картинки</a></p></td>
        <td><img src="images/e01.gif" width="2" height="20" alt="" border="0"></td>
	<td><p class="menu01"><a href="Dowland.htm">DOWNLOAD</a></p></td>
</tr>
</table>
	</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="780">
<tr valign="top">
	<td background="images/fon02.gif" width="230">
<!-- LEFT -->
<table border="0" cellpadding="0" cellspacing="0" width="230" height="46" background="images/fon01.gif">
<tr>
	<td><p class="title"><img src="images/e03.gif" width="14" height="16" alt="" border="0" align="absmiddle">&nbsp;&nbsp;МЕНЮ HTML</p></td>
</tr>
</table>
<p class="px5">
<div align="center"><img src="images/hr01.gif" width="227" height="2" alt="" border="0"></div>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0">  <a href="HTML-1.htm">Создание HTML-документа</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0">  <a href="HTML-2.htm">Структура HTML-кода</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0">  <a href="HTML-3.htm">Теги HTML</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0">  <a href="HTML-4.htm">Ссылки</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0">  <a href="HTML-5.htm">Таблицы</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0">  <a href="HTML-6.htm">Структура сайта</a></p>
<div align="center"><img src="images/hr01.gif" width="227" height="2" alt="" border="0"></div>
<br>
<!-- /LEFT -->
	</td>
	<td width="720">
<!-- main -->
<table border="0" cellpadding="0" cellspacing="0" width="720" height="45" background="">


<table border="0" cellpadding="0" cellspacing="0" width="100%" height="45" background="images/fon03.gif">
<tr>
	<td><p class="title" style="margin-top: 11px;">&nbsp;&nbsp;Таблицы</p></td>
</tr>
</table>
<table border="0" cellpadding="10" cellspacing="0" align="center" width="100%">
<tr align="center">
</tr>
</table>
<p>Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.</p>
<p><b>Создание таблиц:</b> Для добавления таблицы на веб-страницу используется тег &lt;TABLE&gt . Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов &lt;TR&gt и &lt;TD&gt соответственно. Таблица должна содержать хотя бы одну ячейку. Допускается вместо тега &lt;TD&gt использовать тег &lt;TH&gt . Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. В остальном, разницы между ячейками, созданными через теги &lt;TD&gt и &lt;TH&gt , нет.</p>
<div align="center"><img src="images/Ris08.png"></div>
<p><b> Особенности таблиц</b></p>
<p>У каждого параметра таблицы есть свое значение установленное по умолчанию. Это означает, что если какой-то атрибут пропущен, то неявно он все равно присутствует, причем с некоторым значением. Из-за чего вид таблицы может оказаться совсем другим, нежели предполагал разработчик. Чтобы понимать, что можно ожидать от таблиц, следует знать их явные и неявные особенности, которые перечислены далее.</p>
    <p>* Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, уже как обычная таблица.</p>
    <p>* Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически исходя из суммарной ширины содержимого ячеек плюс ширина границ между ячейками, поля вокруг содержимого, устанавливаемые через параметр cellpadding и расстояние между ячейками, которые определяются значением cellspacing.</p>
    <p>* Если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит при добавлении рисунков в ячейку. В этом случае ширина таблицы увеличивается, несмотря на указанные размеры.</p>
    <p>* Рамка таблицы, в случае добавления параметра border к тегу &lt;TABLE&gt;  , изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя тем самым эффект трехмерности.</p>
    <p>* Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.</p>
<!-- /main -->
	</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="950" height="47" background="images/fon04.gif">
<tr>
	<td>
<table border="0" cellpadding="0" cellspacing="0" width="90%" background="" align="center">
<tr>
	<td><p>by LEV13 &copy;2010</p></td>
</p>
	</td>
</tr>
</table>
	</td>
</tr>
</table>
	<td valign="bottom" background="images/bg_right.gif"><img src="images/bg_right.gif" alt="" width="17" height="16" border="0"></td>
	<td width="50%" background="images/bg.gif"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</body>
</html>