Презентація до теми: Язык разметки гипертекста -2

KNOWLEDGE HYPERMARKET

 		Версия 12:41, 20 июля 2011 (просмотреть исходный код)
User16  (Обсуждение | вклад)
← Предыдущая правка
		Текущая версия на 12:48, 20 июля 2011 (просмотреть исходный код)
User16  (Обсуждение | вклад) 
 
		
Строка 9:
Строка 9:
 <br>    <br>  
  
- '''<br>''' + '''<br>'''  
-   + 
- '''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА'''<br><br>'''<br>Часть 2.''' Работа с таблицами: создание, обрамление, слияние ячеек, построение вложенных таблиц. Оформление таблиц.<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Создание таблицы'''<br><br>Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. <br>C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. <br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Параметры таблицы'''<br><br>Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table параметр1=... параметр2=...&gt; ''' + 
  
  + '''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА'''<br><br>'''<br>Часть 2.''' Работа с таблицами: создание, обрамление, слияние ячеек, построение вложенных таблиц. Оформление таблиц.<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Создание таблицы'''<br><br>Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. <br>C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. <br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Параметры таблицы'''<br><br>Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table параметр1=... параметр2=...&gt; ''' 
  
  + <br> 
  
 {| cellspacing="1" cellpadding="1" border="1" style="width: 628px; height: 120px;"  {| cellspacing="1" cellpadding="1" border="1" style="width: 628px; height: 120px;"
 |-  |-
- | &nbsp; Свойство + | &nbsp; Свойство  
- | &nbsp;&nbsp;&nbsp;&nbsp; Значение + | &nbsp;&nbsp;&nbsp;&nbsp; Значение  
 | &nbsp;&nbsp;&nbsp;&nbsp; Описание    | &nbsp;&nbsp;&nbsp;&nbsp; Описание  
 | &nbsp;&nbsp;&nbsp; Пример  | &nbsp;&nbsp;&nbsp; Пример
 |-  |-
- | &nbsp; align= + | &nbsp; align=  
- | &nbsp;&nbsp;&nbsp;&nbsp; left<br> + | &nbsp;&nbsp;&nbsp;&nbsp; left<br>  
- &nbsp;&nbsp;&nbsp;&nbsp; right<br> + &nbsp;&nbsp;&nbsp;&nbsp; right<br> &nbsp;&nbsp;&nbsp;&nbsp; center&nbsp; <br>  
- &nbsp;&nbsp;&nbsp;&nbsp; center&nbsp; <br> +  
- | &nbsp; Выравнивание таблицы + | &nbsp; Выравнивание таблицы  
 | &nbsp;&nbsp;&nbsp;&nbsp; align=center  | &nbsp;&nbsp;&nbsp;&nbsp; align=center
 |-  |-
 | &nbsp; background=    | &nbsp; background=  
- | &nbsp;&nbsp;&nbsp; URL + | &nbsp;&nbsp;&nbsp; URL  
 | &nbsp;&nbsp;&nbsp;&nbsp; Фоновый рисунок    | &nbsp;&nbsp;&nbsp;&nbsp; Фоновый рисунок  
 | &nbsp;&nbsp;&nbsp; background=pic.gif  | &nbsp;&nbsp;&nbsp; background=pic.gif
 |-  |-
- | &nbsp; bgcolor=&nbsp; <br> + | &nbsp; bgcolor=&nbsp; <br>  
- | &nbsp; &nbsp; #rrggbb + | &nbsp; &nbsp; #rrggbb  
- | &nbsp;&nbsp;&nbsp;&nbsp; Цвет фона таблицы + | &nbsp;&nbsp;&nbsp;&nbsp; Цвет фона таблицы  
 | &nbsp;&nbsp;&nbsp;&nbsp; bgcolor=#FF9900  | &nbsp;&nbsp;&nbsp;&nbsp; bgcolor=#FF9900
 |-  |-
- | &nbsp; border= + | &nbsp; border=  
- | &nbsp;&nbsp;&nbsp;&nbsp; n + | &nbsp;&nbsp;&nbsp;&nbsp; n  
- | &nbsp;&nbsp;&nbsp;&nbsp; Толщина рамки в пикселах + | &nbsp;&nbsp;&nbsp;&nbsp; Толщина рамки в пикселах  
 | &nbsp;&nbsp;&nbsp;&nbsp; border=2  | &nbsp;&nbsp;&nbsp;&nbsp; border=2
 |-  |-
- | &nbsp; bordercolor= + | &nbsp; bordercolor=  
- | &nbsp;&nbsp;&nbsp;&nbsp; #rrggbb + | &nbsp;&nbsp;&nbsp;&nbsp; #rrggbb  
- | &nbsp;&nbsp;&nbsp;&nbsp; Цвет рамки + | &nbsp;&nbsp;&nbsp;&nbsp; Цвет рамки  
 | &nbsp;&nbsp;&nbsp;&nbsp; bordercolor=#333333  | &nbsp;&nbsp;&nbsp;&nbsp; bordercolor=#333333
 |}  |}
  
- <br> + <br>  
  
 {| cellspacing="1" cellpadding="1" border="1" style="width: 637px; height: 100px;"  {| cellspacing="1" cellpadding="1" border="1" style="width: 637px; height: 100px;"
 |-  |-
- | &nbsp; Свойство + | &nbsp; Свойство  
- | &nbsp;&nbsp;&nbsp;&nbsp; Значение + | &nbsp;&nbsp;&nbsp;&nbsp; Значение  
- | &nbsp;&nbsp;&nbsp;&nbsp; Описание + | &nbsp;&nbsp;&nbsp;&nbsp; Описание  
 | &nbsp;&nbsp;&nbsp;&nbsp; Пример  | &nbsp;&nbsp;&nbsp;&nbsp; Пример
 |-  |-
- | &nbsp;bordercolordark= + | &nbsp;bordercolordark=  
 | &nbsp;&nbsp;&nbsp;&nbsp; #rrggbb    | &nbsp;&nbsp;&nbsp;&nbsp; #rrggbb  
- | &nbsp;&nbsp;&nbsp; Тень рамки + | &nbsp;&nbsp;&nbsp; Тень рамки  
 | &nbsp;&nbsp;&nbsp;&nbsp; bordercolordark=#f0f0f0  | &nbsp;&nbsp;&nbsp;&nbsp; bordercolordark=#f0f0f0
 |-  |-
- | &nbsp; cellpadding=&nbsp; <br> + | &nbsp; cellpadding=&nbsp; <br>  
- | &nbsp;&nbsp;&nbsp; n + | &nbsp;&nbsp;&nbsp; n  
 | &nbsp;&nbsp;&nbsp;&nbsp; Расстояние между ячейкой и ее содержимым    | &nbsp;&nbsp;&nbsp;&nbsp; Расстояние между ячейкой и ее содержимым  
 | &nbsp;&nbsp;&nbsp; cellpadding=7  | &nbsp;&nbsp;&nbsp; cellpadding=7
 |-  |-
- | &nbsp; cellspacing= + | &nbsp; cellspacing=  
- | &nbsp;&nbsp;&nbsp;&nbsp; n + | &nbsp;&nbsp;&nbsp;&nbsp; n  
 | &nbsp;&nbsp;&nbsp;&nbsp; Дистанция между ячейками    | &nbsp;&nbsp;&nbsp;&nbsp; Дистанция между ячейками  
 | &nbsp;&nbsp;&nbsp; cellspacing=3  | &nbsp;&nbsp;&nbsp; cellspacing=3
 |-  |-
- | &nbsp;&nbsp; frame=&nbsp;&nbsp; <br> + | &nbsp;&nbsp; frame=&nbsp;&nbsp; <br>  
- | &nbsp;void<br> + | &nbsp;void<br>  
- above<br> + above<br>  
  
- below<br> + below<br>  
  
- lhs<br> + lhs<br>  
  
- rhs<br> + rhs<br>  
  
- hsides<br> + hsides<br>  
  
- vsides<br> + vsides<br>  
  
- box&nbsp;&nbsp; <br> + box&nbsp;&nbsp; <br>  
  
 | &nbsp;Задание типа рамки таблицы    | &nbsp;Задание типа рамки таблицы  
Строка 94:
Строка 94:
 |}  |}
  
-   + <br> 
  
 {| cellspacing="1" cellpadding="1" border="1" style="width: 644px; height: 100px;"  {| cellspacing="1" cellpadding="1" border="1" style="width: 644px; height: 100px;"
 |-  |-
- | &nbsp; Свойство + | &nbsp; Свойство  
- | &nbsp;&nbsp;&nbsp;&nbsp; Значение + | &nbsp;&nbsp;&nbsp;&nbsp; Значение  
- | &nbsp;&nbsp;&nbsp; Описание + | &nbsp;&nbsp;&nbsp; Описание  
 | &nbsp;&nbsp;&nbsp;&nbsp; Пример  | &nbsp;&nbsp;&nbsp;&nbsp; Пример
 |-  |-
 | &nbsp; nowrap    | &nbsp; nowrap  
 |    |  
- | &nbsp;&nbsp;&nbsp; Запрещает переносы строк в тексте + | &nbsp;&nbsp;&nbsp; Запрещает переносы строк в тексте  
 | &nbsp;&nbsp;&nbsp;&nbsp; &lt;table nowrap&gt;  | &nbsp;&nbsp;&nbsp;&nbsp; &lt;table nowrap&gt;
 |-  |-
- | &nbsp; valign= + | &nbsp; valign=  
 | &nbsp;&nbsp;&nbsp; top bottom    | &nbsp;&nbsp;&nbsp; top bottom  
 | &nbsp;&nbsp;&nbsp; Выравнивание по высоте    | &nbsp;&nbsp;&nbsp; Выравнивание по высоте  
 | &nbsp;&nbsp;&nbsp; valign=top  | &nbsp;&nbsp;&nbsp; valign=top
 |-  |-
- | &nbsp; width= + | &nbsp; width=  
- | &nbsp;&nbsp;&nbsp;&nbsp; n<br>&nbsp;&nbsp;&nbsp;&nbsp; n% + | &nbsp;&nbsp;&nbsp;&nbsp; n<br>&nbsp;&nbsp;&nbsp;&nbsp; n%  
- | &nbsp;&nbsp;&nbsp;&nbsp; Минимальная ширина таблицы, можно задавать в пикселах или процентах + | &nbsp;&nbsp;&nbsp;&nbsp; Минимальная ширина таблицы, можно задавать в пикселах или процентах  
 | &nbsp;&nbsp;&nbsp;&nbsp; width=90%  | &nbsp;&nbsp;&nbsp;&nbsp; width=90%
 |-  |-
- | &nbsp; height + | &nbsp; height  
- | &nbsp;&nbsp;&nbsp;&nbsp; n<br>&nbsp;&nbsp;&nbsp;&nbsp; n% + | &nbsp;&nbsp;&nbsp;&nbsp; n<br>&nbsp;&nbsp;&nbsp;&nbsp; n%  
- | &nbsp;&nbsp;&nbsp; Минимальная высота таблицы, можно задавать в пикселах или процентах + | &nbsp;&nbsp;&nbsp; Минимальная высота таблицы, можно задавать в пикселах или процентах  
 | &nbsp;&nbsp;&nbsp;&nbsp; height=18  | &nbsp;&nbsp;&nbsp;&nbsp; height=18
 |}  |}
  
  + <br> 
  
-   + '''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Слияние ячеек таблицы'''<br><br>Механизм слияния ячеек таблицы, предусмотренный в HTML, позволяет объединять несколько соседних ячеек строки или столбца в одну большую ячейку.<br><br>&lt;TABLE BORDER=1&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH COLSPAN=3&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Последние модели<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/TH&gt; <br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Наименование товара&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Цена 1 шт.&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Количество на складе&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Бумага&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;100&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;20&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;/TABLE&gt;<br><br>Атрибут COLSPAN тегов &lt;TH&gt; и &lt;TD&gt; позволяет выполнить слияние ячеек из нескольких столбцов в пределах одной строки таблицы, а ROWSPAN, употребляемый с теми же тегами, – ячеек из нескольких строк в пределах одного столбца. <br><br>[[Image:29.06-16.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Заголовки таблицы'''<br><br>[[Image:29.06-17.jpg|617x354px]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Примеры таблиц'''<br><br>[[Image:29.06-18.jpg|606x461px]]<br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Вложенные таблицы'''<br><br>&lt;TABLE BORDER=1&gt; <br>&lt;TR&gt;<br>&lt;TD&gt; <br>&lt;TABLE WIDTH=100%&gt; <br>&lt;TR&gt;&lt;TD&gt;вложенная таблица&lt;/TD&gt;&lt;/TR&gt;<br>&lt;/TABLE&gt; <br>&lt;/TD&gt; <br>&lt;/TR&gt; <br>&lt;/TABLE&gt; <br><br>[[Image:29.06-19.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Отображение границ таблицы'''<br><br>Атрибут FRAME тега &lt;TABLE&gt; позволяет указать тип внешнего обрамления таблицы.  
- '''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Слияние ячеек таблицы'''<br><br>Механизм слияния ячеек таблицы, предусмотренный в HTML, позволяет объединять несколько соседних ячеек строки или столбца в одну большую ячейку.<br><br>&lt;TABLE BORDER=1&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH COLSPAN=3&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Последние модели<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/TH&gt; <br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Наименование товара&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Цена 1 шт.&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Количество на складе&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Бумага&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;100&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;20&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;/TABLE&gt;<br><br>Атрибут COLSPAN тегов &lt;TH&gt; и &lt;TD&gt; позволяет выполнить слияние ячеек из нескольких столбцов в пределах одной строки таблицы, а ROWSPAN, употребляемый с теми же тегами, – ячеек из нескольких строк в пределах одного столбца. <br><br>[[Image:29.06-16.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Заголовки таблицы'''<br><br>[[Image:29.06-17.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Примеры таблиц'''<br><br>[[Image:29.06-18.jpg]]<br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Вложенные таблицы'''<br><br>&lt;TABLE BORDER=1&gt; <br>&lt;TR&gt;<br>&lt;TD&gt; <br>&lt;TABLE WIDTH=100%&gt; <br>&lt;TR&gt;&lt;TD&gt;вложенная таблица&lt;/TD&gt;&lt;/TR&gt;<br>&lt;/TABLE&gt; <br>&lt;/TD&gt; <br>&lt;/TR&gt; <br>&lt;/TABLE&gt; <br><br>[[Image:29.06-19.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Отображение границ таблицы'''<br><br>Атрибут FRAME тега &lt;TABLE&gt; позволяет указать тип внешнего обрамления таблицы. + 
  
 {| cellspacing="1" cellpadding="1" border="1" style="width: 515px; height: 178px;"  {| cellspacing="1" cellpadding="1" border="1" style="width: 515px; height: 178px;"
 |-  |-
- | &nbsp; Значение + | &nbsp; Значение  
 | &nbsp;&nbsp;&nbsp; Результат  | &nbsp;&nbsp;&nbsp; Результат
 |-  |-
- | &nbsp; void + | &nbsp; void  
 | &nbsp;&nbsp;&nbsp; Все линии внешней границы отсутствуют  | &nbsp;&nbsp;&nbsp; Все линии внешней границы отсутствуют
 |-  |-
- | &nbsp; above + | &nbsp; above  
 | &nbsp;&nbsp;&nbsp; Линия над таблицей  | &nbsp;&nbsp;&nbsp; Линия над таблицей
 |-  |-
- | &nbsp; below + | &nbsp; below  
 | &nbsp;&nbsp;&nbsp; Линия под таблицей  | &nbsp;&nbsp;&nbsp; Линия под таблицей
 |-  |-
- | &nbsp; rhs + | &nbsp; rhs  
 | &nbsp;&nbsp;&nbsp; Линия справа от таблицы  | &nbsp;&nbsp;&nbsp; Линия справа от таблицы
 |-  |-
- | &nbsp; lhs + | &nbsp; lhs  
 | &nbsp;&nbsp;&nbsp; Линия слева от таблицы  | &nbsp;&nbsp;&nbsp; Линия слева от таблицы
 |-  |-
- | &nbsp; hsides + | &nbsp; hsides  
 | &nbsp;&nbsp;&nbsp; Линия над и под таблицей  | &nbsp;&nbsp;&nbsp; Линия над и под таблицей
 |-  |-
- | &nbsp; vsides + | &nbsp; vsides  
 | &nbsp;&nbsp;&nbsp; Линия справа и слева от таблицы  | &nbsp;&nbsp;&nbsp; Линия справа и слева от таблицы
 |-  |-
- | &nbsp; border + | &nbsp; border  
 | &nbsp;&nbsp;&nbsp; Все линии внешней границы присутствуют (значение по умолчанию)  | &nbsp;&nbsp;&nbsp; Все линии внешней границы присутствуют (значение по умолчанию)
 |}  |}
  
- <br>Атрибут RULES тега &lt;TABLE&gt; позволяет указать тип внутренних разделительных линий таблицы. + <br>Атрибут RULES тега &lt;TABLE&gt; позволяет указать тип внутренних разделительных линий таблицы.  
-   + 
  
  + <br> 
  
 {| cellspacing="1" cellpadding="1" border="1" style="width: 518px; height: 120px;"  {| cellspacing="1" cellpadding="1" border="1" style="width: 518px; height: 120px;"
 |-  |-
- | &nbsp; Значение + | &nbsp; Значение  
 | &nbsp;&nbsp;&nbsp; Результат  | &nbsp;&nbsp;&nbsp; Результат
 |-  |-
- | &nbsp; none + | &nbsp; none  
 | &nbsp;&nbsp;&nbsp; Все внутренние линии отсутствуют  | &nbsp;&nbsp;&nbsp; Все внутренние линии отсутствуют
 |-  |-
- | &nbsp; cols + | &nbsp; cols  
 | &nbsp;&nbsp;&nbsp; Линии между столбцами  | &nbsp;&nbsp;&nbsp; Линии между столбцами
 |-  |-
- | &nbsp; rows + | &nbsp; rows  
 | &nbsp;&nbsp;&nbsp; Линии между строками  | &nbsp;&nbsp;&nbsp; Линии между строками
 |-  |-
- | &nbsp; groups + | &nbsp; groups  
 | &nbsp;&nbsp;&nbsp; Линии между группами столбцов и группами строк  | &nbsp;&nbsp;&nbsp; Линии между группами столбцов и группами строк
 |-  |-
- | &nbsp; all <br> + | &nbsp; all <br>  
 | &nbsp;&nbsp; Все внутренние линии присутствуют <br>&nbsp;&nbsp; (значение по умолчанию)  | &nbsp;&nbsp; Все внутренние линии присутствуют <br>&nbsp;&nbsp; (значение по умолчанию)
 |}  |}
Строка 191:
Строка 191:
 Рамка таблицы, в случае добавления параметра border к тегу TABLE, изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя эффект трехмерности.    Рамка таблицы, в случае добавления параметра border к тегу TABLE, изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя эффект трехмерности.  
  
- Если ширина таблицы не задана, она подгоняется под содержание ячеек. <br>Пока таблица не загрузится полностью, ее содержимое не начнет отображаться.<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Примеры использования таблиц'''<br><br>[[Image:29.06-20.jpg]]<br><br>Вертикальные линии – прекрасный декоративный элемент, который находит применение в множестве разных случаев. <br><br>Создаем таблицу, одна из ячеек которой имеет ширину 1-2 пиксела. Параметры cellpadding и border должны быть равны нулю, а cellspacing определяет расстояние от текста до линии. А затем в этой ячейке указываем фон нужного цвета: <br>&lt;td width=1 bgcolor=#ff0000&gt;.<br>Чтобы такая линия была видна в Netscape&nbsp;4, в ячейку можно поместить прозрачный рисунок размером 1 на 1 пиксел.<br><br>Можно при помощи бордера таблицы имитировать паспарту для какой-нибудь картинки.<br><br>&lt;TABLE border=1 cellPadding=0 cellSpacing=0 width=200&gt;&nbsp; &nbsp;<br>&lt;TR bgColor=#f7f7f7&gt;<br>&lt;TD&gt;&lt;IMG border=1 height=106 hspace=24 src="4.jpg" vspace=24 width=152&gt;<br>&lt;/TD&gt;<br>&lt;/TR&gt;<br>&lt;/TABLE&gt;<br><br>[[Image:29.06-21.jpg]]<br><br>Таким способом можно создать кнопки при помощи кода. Изменить текст на кнопке намного проще, чем на картинке. <br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Верстка с помощью таблиц'''<br><br>Использование таблиц с невидимой границей для разделения страницы на блоки — довольно мощный способ верстки веб-страниц, который нашел применение на большинстве сайтов.<br>'''<br>Верстка с помощью таблиц используется в следующих случаях: ''' + Если ширина таблицы не задана, она подгоняется под содержание ячеек. <br>Пока таблица не загрузится полностью, ее содержимое не начнет отображаться.<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Примеры использования таблиц'''<br><br>[[Image:29.06-20.jpg]]<br><br>Вертикальные линии – прекрасный декоративный элемент, который находит применение в множестве разных случаев. <br><br>Создаем таблицу, одна из ячеек которой имеет ширину 1-2 пиксела. Параметры cellpadding и border должны быть равны нулю, а cellspacing определяет расстояние от текста до линии. А затем в этой ячейке указываем фон нужного цвета: <br>&lt;td width=1 bgcolor=#ff0000&gt;.<br>Чтобы такая линия была видна в Netscape&nbsp;4, в ячейку можно поместить прозрачный рисунок размером 1 на 1 пиксел.<br><br>Можно при помощи бордера таблицы имитировать паспарту для какой-нибудь картинки.<br><br>&lt;TABLE border=1 cellPadding=0 cellSpacing=0 width=200&gt;&nbsp; &nbsp;<br>&lt;TR bgColor=#f7f7f7&gt;<br>&lt;TD&gt;&lt;IMG border=1 height=106 hspace=24 src="4.jpg" vspace=24 width=152&gt;<br>&lt;/TD&gt;<br>&lt;/TR&gt;<br>&lt;/TABLE&gt;<br><br>[[Image:29.06-21.jpg]]<br><br>Таким способом можно создать кнопки при помощи кода. Изменить текст на кнопке намного проще, чем на картинке. <br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Верстка с помощью таблиц'''<br><br>Использование таблиц с невидимой границей для разделения страницы на блоки — довольно мощный способ верстки веб-страниц, который нашел применение на большинстве сайтов.<br>'''<br>Верстка с помощью таблиц используется в следующих случаях: '''  
-   + 
- выравнивание элементов на странице по правой стороне, левой стороне и по центру; <br>создание колонок; <br>заливка областей однотонным цветом или фоновым рисунком; <br>создание вертикальных линий; <br>объединение разрезанных кусочков изображений в одно; <br>отступы вокруг текста; <br>создание различных рамок. <br><br>[[Image:29.06-22.jpg]] + 
  
  + выравнивание элементов на странице по правой стороне, левой стороне и по центру; <br>создание колонок; <br>заливка областей однотонным цветом или фоновым рисунком; <br>создание вертикальных линий; <br>объединение разрезанных кусочков изображений в одно; <br>отступы вокруг текста; <br>создание различных рамок. <br><br>[[Image:29.06-22.jpg|766x489px]] 
  
  + <br> 
  
 [[Image:29.06-23.jpg]]<br><br>Этот пример - очень популярная сетка на информационных сайтах: трехколоночный вариант по пятиколоночному делению. <br><br>Позволяет получать огромное количество внешних вариантов без каких-то влияний на общий стиль. Визуальные особенности сайта достигаются за счет цвета, шрифта заголовков, цвета панелей.<br><br>Человек всегда формировал окружающую среду, интуитивно руководствуясь чувством пропорции, то есть соотношений. <br>Существуют законы, которые позволяют создать модульные сетки, приятные глазу человеку. <br><br>Еще Фидий (создатель Акрополя) и Иктин (Парфенон) продемонстрировали знание закона золотого сечения. <br>Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине: a:b=b:(a+b). <br>    [[Image:29.06-23.jpg]]<br><br>Этот пример - очень популярная сетка на информационных сайтах: трехколоночный вариант по пятиколоночному делению. <br><br>Позволяет получать огромное количество внешних вариантов без каких-то влияний на общий стиль. Визуальные особенности сайта достигаются за счет цвета, шрифта заголовков, цвета панелей.<br><br>Человек всегда формировал окружающую среду, интуитивно руководствуясь чувством пропорции, то есть соотношений. <br>Существуют законы, которые позволяют создать модульные сетки, приятные глазу человеку. <br><br>Еще Фидий (создатель Акрополя) и Иктин (Парфенон) продемонстрировали знание закона золотого сечения. <br>Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине: a:b=b:(a+b). <br>  

Текущая версия на 12:48, 20 июля 2011
 
Гіпермаркет Знань>>Інформатика >>Інформатика 8 клас>> Інформатика:Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали. 
Презентація до предмету Інформатика 8 клас. 
Тема «Язык разметки гипертекста -2». 

 

 
                                                       ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА


Часть 2. Работа с таблицами: создание, обрамление, слияние ячеек, построение вложенных таблиц. Оформление таблиц.

                                                                       Создание таблицы

Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. 
C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. 

                                                                    Параметры таблицы

Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE

                                                 <table параметр1=... параметр2=...>  

 




   Свойство
      Значение
      Описание
     Пример


   align=
      left

     right
      center  
 

   Выравнивание таблицы
      align=center


   background=
     URL
      Фоновый рисунок
     background=pic.gif


   bgcolor=  

     #rrggbb
      Цвет фона таблицы
      bgcolor=#FF9900


   border=
      n
      Толщина рамки в пикселах
      border=2


   bordercolor=
      #rrggbb
      Цвет рамки
      bordercolor=#333333


 




   Свойство
      Значение
      Описание
      Пример


  bordercolordark=
      #rrggbb
     Тень рамки
      bordercolordark=#f0f0f0


   cellpadding=  

     n
      Расстояние между ячейкой и ее содержимым
     cellpadding=7


   cellspacing=
      n
      Дистанция между ячейками
     cellspacing=3


    frame=   

  void

above
 
below
 
lhs
 
rhs
 
hsides
 
vsides
 
box   
 

  Задание типа рамки таблицы
     frame=hsides


 




   Свойство
      Значение
     Описание
      Пример


   nowrap

     Запрещает переносы строк в тексте
      <table nowrap>


   valign=
     top bottom
     Выравнивание по высоте
     valign=top


   width=
      n
     n%
      Минимальная ширина таблицы, можно задавать в пикселах или процентах
      width=90%


   height
      n
     n%
     Минимальная высота таблицы, можно задавать в пикселах или процентах
      height=18


 
                                                       Слияние ячеек таблицы

Механизм слияния ячеек таблицы, предусмотренный в HTML, позволяет объединять несколько соседних ячеек строки или столбца в одну большую ячейку.

<TABLE BORDER=1>
<TR>
      <TH COLSPAN=3>
      Последние модели
      </TH> 
</TR>
<TR>
      <TH>Наименование товара</TH>
      <TH>Цена 1 шт.</TH>
      <TH>Количество на складе</TH>
</TR>
<TR>
      <TH>Бумага</TH>
      <TH>100</TH>
      <TH>20</TH>
</TR>
</TABLE>

Атрибут COLSPAN тегов <TH> и <TD> позволяет выполнить слияние ячеек из нескольких столбцов в пределах одной строки таблицы, а ROWSPAN, употребляемый с теми же тегами, – ячеек из нескольких строк в пределах одного столбца. 



                                                    Заголовки таблицы



                                                   Примеры таблиц



                                                 Вложенные таблицы

<TABLE BORDER=1> 
<TR>
<TD> 
<TABLE WIDTH=100%> 
<TR><TD>вложенная таблица</TD></TR>
</TABLE> 
</TD> 
</TR> 
</TABLE> 



                                                 Отображение границ таблицы

Атрибут FRAME тега <TABLE> позволяет указать тип внешнего обрамления таблицы. 




   Значение
     Результат


   void
     Все линии внешней границы отсутствуют


   above
     Линия над таблицей


   below
     Линия под таблицей


   rhs
     Линия справа от таблицы


   lhs
     Линия слева от таблицы


   hsides
     Линия над и под таблицей


   vsides
     Линия справа и слева от таблицы


   border
     Все линии внешней границы присутствуют (значение по умолчанию)


Атрибут RULES тега <TABLE> позволяет указать тип внутренних разделительных линий таблицы. 

 




   Значение
     Результат


   none
     Все внутренние линии отсутствуют


   cols
     Линии между столбцами


   rows
     Линии между строками


   groups
     Линии между группами столбцов и группами строк


   all 

    Все внутренние линии присутствуют 
   (значение по умолчанию)



                                                    Особенности таблиц

Таблица, если не указано особо, всегда выравнивается по левому краю; 
Параметр background, отвечающий за рисунок фона, по-разному понимается в разных браузерах: IE вставляет картинку во всю таблицу (если таблица по размеру больше фонового рисунка, он повторяется по горизонтали или вертикали), Netscape4 добавляет фоновое изображение в каждую ячейку таблицы; 
По умолчанию, таблица выводится без рамки. Однако, Netscape 4 добавляет тонкую линию между ячеек. Чтобы ее не было, всегда указывайте параметр border=0; 
Рамка таблицы, в случае добавления параметра border к тегу TABLE, изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя эффект трехмерности. 
Если ширина таблицы не задана, она подгоняется под содержание ячеек. 
Пока таблица не загрузится полностью, ее содержимое не начнет отображаться.

                                         Примеры использования таблиц



Вертикальные линии – прекрасный декоративный элемент, который находит применение в множестве разных случаев. 

Создаем таблицу, одна из ячеек которой имеет ширину 1-2 пиксела. Параметры cellpadding и border должны быть равны нулю, а cellspacing определяет расстояние от текста до линии. А затем в этой ячейке указываем фон нужного цвета: 
<td width=1 bgcolor=#ff0000>.
Чтобы такая линия была видна в Netscape 4, в ячейку можно поместить прозрачный рисунок размером 1 на 1 пиксел.

Можно при помощи бордера таблицы имитировать паспарту для какой-нибудь картинки.

<TABLE border=1 cellPadding=0 cellSpacing=0 width=200>   
<TR bgColor=#f7f7f7>
<TD><IMG border=1 height=106 hspace=24 src="4.jpg" vspace=24 width=152>
</TD>
</TR>
</TABLE>



Таким способом можно создать кнопки при помощи кода. Изменить текст на кнопке намного проще, чем на картинке. 

                                                           Верстка с помощью таблиц

Использование таблиц с невидимой границей для разделения страницы на блоки — довольно мощный способ верстки веб-страниц, который нашел применение на большинстве сайтов.

Верстка с помощью таблиц используется в следующих случаях:  
выравнивание элементов на странице по правой стороне, левой стороне и по центру; 
создание колонок; 
заливка областей однотонным цветом или фоновым рисунком; 
создание вертикальных линий; 
объединение разрезанных кусочков изображений в одно; 
отступы вокруг текста; 
создание различных рамок. 

 

 


Этот пример - очень популярная сетка на информационных сайтах: трехколоночный вариант по пятиколоночному делению. 

Позволяет получать огромное количество внешних вариантов без каких-то влияний на общий стиль. Визуальные особенности сайта достигаются за счет цвета, шрифта заголовков, цвета панелей.

Человек всегда формировал окружающую среду, интуитивно руководствуясь чувством пропорции, то есть соотношений. 
Существуют законы, которые позволяют создать модульные сетки, приятные глазу человеку. 

Еще Фидий (создатель Акрополя) и Иктин (Парфенон) продемонстрировали знание закона золотого сечения. 
Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине: a:b=b:(a+b). 
 

Перейти до презентації можна клікнувши на текст "Презентація" і встановивши Microsoft PowerPoint 
 
 
Надіслано вчителем інформатики Ісуповим С. Л. 
_{Інформатика скачати, завдання школяру 8 класу, матеріали з інформатики для 8 класу онлайн}

Источник — «http://edufuture.biz/index.php?title=%D0%9F%D1%80%D0%B5%D0%B7%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F_%D0%B4%D0%BE_%D1%82%D0%B5%D0%BC%D0%B8:_%D0%AF%D0%B7%D1%8B%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0_-2»
Предмети > Інформатика > Інформатика 8 клас > Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали > Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали. Презентація уроку
@@ Строка 9: / Строка 9: @@
 <br>
 '''<br>'''
-'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА'''<br><br>'''<br>Часть 2.''' Работа с таблицами: создание, обрамление, слияние ячеек, построение вложенных таблиц. Оформление таблиц.<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Создание таблицы'''<br><br>Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. <br>C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. <br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Параметры таблицы'''<br><br>Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table параметр1=... параметр2=...&gt; '''
+'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА'''<br><br>'''<br>Часть 2.''' Работа с таблицами: создание, обрамление, слияние ячеек, построение вложенных таблиц. Оформление таблиц.<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Создание таблицы'''<br><br>Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. <br>C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. <br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Параметры таблицы'''<br><br>Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table параметр1=... параметр2=...&gt; '''
+<br>
 {| cellspacing="1" cellpadding="1" border="1" style="width: 628px; height: 120px;"
 |-
 | &nbsp; Свойство
 | &nbsp;&nbsp;&nbsp;&nbsp; Значение
 | &nbsp;&nbsp;&nbsp;&nbsp; Описание
 | &nbsp;&nbsp;&nbsp; Пример
 |-
 | &nbsp; align=
 | &nbsp;&nbsp;&nbsp;&nbsp; left<br>
-&nbsp;&nbsp;&nbsp;&nbsp; right<br>
+&nbsp;&nbsp;&nbsp;&nbsp; right<br> &nbsp;&nbsp;&nbsp;&nbsp; center&nbsp; <br>
-&nbsp;&nbsp;&nbsp;&nbsp; center&nbsp; <br>
 | &nbsp; Выравнивание таблицы
 | &nbsp;&nbsp;&nbsp;&nbsp; align=center
 |-
 | &nbsp; background=
 | &nbsp;&nbsp;&nbsp; URL
 | &nbsp;&nbsp;&nbsp;&nbsp; Фоновый рисунок
 | &nbsp;&nbsp;&nbsp; background=pic.gif
 |-
 | &nbsp; bgcolor=&nbsp; <br>
 | &nbsp; &nbsp; #rrggbb
 | &nbsp;&nbsp;&nbsp;&nbsp; Цвет фона таблицы
 | &nbsp;&nbsp;&nbsp;&nbsp; bgcolor=#FF9900
 |-
 | &nbsp; border=
 | &nbsp;&nbsp;&nbsp;&nbsp; n
 | &nbsp;&nbsp;&nbsp;&nbsp; Толщина рамки в пикселах
 | &nbsp;&nbsp;&nbsp;&nbsp; border=2
 |-
 | &nbsp; bordercolor=
 | &nbsp;&nbsp;&nbsp;&nbsp; #rrggbb
 | &nbsp;&nbsp;&nbsp;&nbsp; Цвет рамки
 | &nbsp;&nbsp;&nbsp;&nbsp; bordercolor=#333333
 |}
 <br>
 {| cellspacing="1" cellpadding="1" border="1" style="width: 637px; height: 100px;"
 |-
 | &nbsp; Свойство
 | &nbsp;&nbsp;&nbsp;&nbsp; Значение
 | &nbsp;&nbsp;&nbsp;&nbsp; Описание
 | &nbsp;&nbsp;&nbsp;&nbsp; Пример
 |-
 | &nbsp;bordercolordark=
 | &nbsp;&nbsp;&nbsp;&nbsp; #rrggbb
 | &nbsp;&nbsp;&nbsp; Тень рамки
 | &nbsp;&nbsp;&nbsp;&nbsp; bordercolordark=#f0f0f0
 |-
 | &nbsp; cellpadding=&nbsp; <br>
 | &nbsp;&nbsp;&nbsp; n
 | &nbsp;&nbsp;&nbsp;&nbsp; Расстояние между ячейкой и ее содержимым
 | &nbsp;&nbsp;&nbsp; cellpadding=7
 |-
 | &nbsp; cellspacing=
 | &nbsp;&nbsp;&nbsp;&nbsp; n
 | &nbsp;&nbsp;&nbsp;&nbsp; Дистанция между ячейками
 | &nbsp;&nbsp;&nbsp; cellspacing=3
 |-
 | &nbsp;&nbsp; frame=&nbsp;&nbsp; <br>
 | &nbsp;void<br>
 above<br>
 below<br>
 lhs<br>
 rhs<br>
 hsides<br>
 vsides<br>
 box&nbsp;&nbsp; <br>
 | &nbsp;Задание типа рамки таблицы
@@ Строка 94: / Строка 94: @@
 |}
+<br>
 {| cellspacing="1" cellpadding="1" border="1" style="width: 644px; height: 100px;"
 |-
 | &nbsp; Свойство
 | &nbsp;&nbsp;&nbsp;&nbsp; Значение
 | &nbsp;&nbsp;&nbsp; Описание
 | &nbsp;&nbsp;&nbsp;&nbsp; Пример
 |-
 | &nbsp; nowrap
 |
 | &nbsp;&nbsp;&nbsp; Запрещает переносы строк в тексте
 | &nbsp;&nbsp;&nbsp;&nbsp; &lt;table nowrap&gt;
 |-
 | &nbsp; valign=
 | &nbsp;&nbsp;&nbsp; top bottom
 | &nbsp;&nbsp;&nbsp; Выравнивание по высоте
 | &nbsp;&nbsp;&nbsp; valign=top
 |-
 | &nbsp; width=
 | &nbsp;&nbsp;&nbsp;&nbsp; n<br>&nbsp;&nbsp;&nbsp;&nbsp; n%
 | &nbsp;&nbsp;&nbsp;&nbsp; Минимальная ширина таблицы, можно задавать в пикселах или процентах
 | &nbsp;&nbsp;&nbsp;&nbsp; width=90%
 |-
 | &nbsp; height
 | &nbsp;&nbsp;&nbsp;&nbsp; n<br>&nbsp;&nbsp;&nbsp;&nbsp; n%
 | &nbsp;&nbsp;&nbsp; Минимальная высота таблицы, можно задавать в пикселах или процентах
 | &nbsp;&nbsp;&nbsp;&nbsp; height=18
 |}
+<br>
+'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Слияние ячеек таблицы'''<br><br>Механизм слияния ячеек таблицы, предусмотренный в HTML, позволяет объединять несколько соседних ячеек строки или столбца в одну большую ячейку.<br><br>&lt;TABLE BORDER=1&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH COLSPAN=3&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Последние модели<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/TH&gt; <br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Наименование товара&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Цена 1 шт.&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Количество на складе&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Бумага&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;100&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;20&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;/TABLE&gt;<br><br>Атрибут COLSPAN тегов &lt;TH&gt; и &lt;TD&gt; позволяет выполнить слияние ячеек из нескольких столбцов в пределах одной строки таблицы, а ROWSPAN, употребляемый с теми же тегами, – ячеек из нескольких строк в пределах одного столбца. <br><br>[[Image:29.06-16.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Заголовки таблицы'''<br><br>[[Image:29.06-17.jpg|617x354px]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Примеры таблиц'''<br><br>[[Image:29.06-18.jpg|606x461px]]<br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Вложенные таблицы'''<br><br>&lt;TABLE BORDER=1&gt; <br>&lt;TR&gt;<br>&lt;TD&gt; <br>&lt;TABLE WIDTH=100%&gt; <br>&lt;TR&gt;&lt;TD&gt;вложенная таблица&lt;/TD&gt;&lt;/TR&gt;<br>&lt;/TABLE&gt; <br>&lt;/TD&gt; <br>&lt;/TR&gt; <br>&lt;/TABLE&gt; <br><br>[[Image:29.06-19.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Отображение границ таблицы'''<br><br>Атрибут FRAME тега &lt;TABLE&gt; позволяет указать тип внешнего обрамления таблицы.
-'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Слияние ячеек таблицы'''<br><br>Механизм слияния ячеек таблицы, предусмотренный в HTML, позволяет объединять несколько соседних ячеек строки или столбца в одну большую ячейку.<br><br>&lt;TABLE BORDER=1&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH COLSPAN=3&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Последние модели<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/TH&gt; <br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Наименование товара&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Цена 1 шт.&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Количество на складе&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;Бумага&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;100&lt;/TH&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TH&gt;20&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;/TABLE&gt;<br><br>Атрибут COLSPAN тегов &lt;TH&gt; и &lt;TD&gt; позволяет выполнить слияние ячеек из нескольких столбцов в пределах одной строки таблицы, а ROWSPAN, употребляемый с теми же тегами, – ячеек из нескольких строк в пределах одного столбца. <br><br>[[Image:29.06-16.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Заголовки таблицы'''<br><br>[[Image:29.06-17.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Примеры таблиц'''<br><br>[[Image:29.06-18.jpg]]<br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Вложенные таблицы'''<br><br>&lt;TABLE BORDER=1&gt; <br>&lt;TR&gt;<br>&lt;TD&gt; <br>&lt;TABLE WIDTH=100%&gt; <br>&lt;TR&gt;&lt;TD&gt;вложенная таблица&lt;/TD&gt;&lt;/TR&gt;<br>&lt;/TABLE&gt; <br>&lt;/TD&gt; <br>&lt;/TR&gt; <br>&lt;/TABLE&gt; <br><br>[[Image:29.06-19.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Отображение границ таблицы'''<br><br>Атрибут FRAME тега &lt;TABLE&gt; позволяет указать тип внешнего обрамления таблицы.
 {| cellspacing="1" cellpadding="1" border="1" style="width: 515px; height: 178px;"
 |-
 | &nbsp; Значение
 | &nbsp;&nbsp;&nbsp; Результат
 |-
 | &nbsp; void
 | &nbsp;&nbsp;&nbsp; Все линии внешней границы отсутствуют
 |-
 | &nbsp; above
 | &nbsp;&nbsp;&nbsp; Линия над таблицей
 |-
 | &nbsp; below
 | &nbsp;&nbsp;&nbsp; Линия под таблицей
 |-
 | &nbsp; rhs
 | &nbsp;&nbsp;&nbsp; Линия справа от таблицы
 |-
 | &nbsp; lhs
 | &nbsp;&nbsp;&nbsp; Линия слева от таблицы
 |-
 | &nbsp; hsides
 | &nbsp;&nbsp;&nbsp; Линия над и под таблицей
 |-
 | &nbsp; vsides
 | &nbsp;&nbsp;&nbsp; Линия справа и слева от таблицы
 |-
 | &nbsp; border
 | &nbsp;&nbsp;&nbsp; Все линии внешней границы присутствуют (значение по умолчанию)
 |}
 <br>Атрибут RULES тега &lt;TABLE&gt; позволяет указать тип внутренних разделительных линий таблицы.
+<br>
 {| cellspacing="1" cellpadding="1" border="1" style="width: 518px; height: 120px;"
 |-
 | &nbsp; Значение
 | &nbsp;&nbsp;&nbsp; Результат
 |-
 | &nbsp; none
 | &nbsp;&nbsp;&nbsp; Все внутренние линии отсутствуют
 |-
 | &nbsp; cols
 | &nbsp;&nbsp;&nbsp; Линии между столбцами
 |-
 | &nbsp; rows
 | &nbsp;&nbsp;&nbsp; Линии между строками
 |-
 | &nbsp; groups
 | &nbsp;&nbsp;&nbsp; Линии между группами столбцов и группами строк
 |-
 | &nbsp; all <br>
 | &nbsp;&nbsp; Все внутренние линии присутствуют <br>&nbsp;&nbsp; (значение по умолчанию)
 |}
@@ Строка 191: / Строка 191: @@
 Рамка таблицы, в случае добавления параметра border к тегу TABLE, изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя эффект трехмерности.
 Если ширина таблицы не задана, она подгоняется под содержание ячеек. <br>Пока таблица не загрузится полностью, ее содержимое не начнет отображаться.<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Примеры использования таблиц'''<br><br>[[Image:29.06-20.jpg]]<br><br>Вертикальные линии – прекрасный декоративный элемент, который находит применение в множестве разных случаев. <br><br>Создаем таблицу, одна из ячеек которой имеет ширину 1-2 пиксела. Параметры cellpadding и border должны быть равны нулю, а cellspacing определяет расстояние от текста до линии. А затем в этой ячейке указываем фон нужного цвета: <br>&lt;td width=1 bgcolor=#ff0000&gt;.<br>Чтобы такая линия была видна в Netscape&nbsp;4, в ячейку можно поместить прозрачный рисунок размером 1 на 1 пиксел.<br><br>Можно при помощи бордера таблицы имитировать паспарту для какой-нибудь картинки.<br><br>&lt;TABLE border=1 cellPadding=0 cellSpacing=0 width=200&gt;&nbsp; &nbsp;<br>&lt;TR bgColor=#f7f7f7&gt;<br>&lt;TD&gt;&lt;IMG border=1 height=106 hspace=24 src="4.jpg" vspace=24 width=152&gt;<br>&lt;/TD&gt;<br>&lt;/TR&gt;<br>&lt;/TABLE&gt;<br><br>[[Image:29.06-21.jpg]]<br><br>Таким способом можно создать кнопки при помощи кода. Изменить текст на кнопке намного проще, чем на картинке. <br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Верстка с помощью таблиц'''<br><br>Использование таблиц с невидимой границей для разделения страницы на блоки — довольно мощный способ верстки веб-страниц, который нашел применение на большинстве сайтов.<br>'''<br>Верстка с помощью таблиц используется в следующих случаях: '''
-выравнивание элементов на странице по правой стороне, левой стороне и по центру; <br>создание колонок; <br>заливка областей однотонным цветом или фоновым рисунком; <br>создание вертикальных линий; <br>объединение разрезанных кусочков изображений в одно; <br>отступы вокруг текста; <br>создание различных рамок. <br><br>[[Image:29.06-22.jpg]]
+выравнивание элементов на странице по правой стороне, левой стороне и по центру; <br>создание колонок; <br>заливка областей однотонным цветом или фоновым рисунком; <br>создание вертикальных линий; <br>объединение разрезанных кусочков изображений в одно; <br>отступы вокруг текста; <br>создание различных рамок. <br><br>[[Image:29.06-22.jpg|766x489px]]
+<br>
 [[Image:29.06-23.jpg]]<br><br>Этот пример - очень популярная сетка на информационных сайтах: трехколоночный вариант по пятиколоночному делению. <br><br>Позволяет получать огромное количество внешних вариантов без каких-то влияний на общий стиль. Визуальные особенности сайта достигаются за счет цвета, шрифта заголовков, цвета панелей.<br><br>Человек всегда формировал окружающую среду, интуитивно руководствуясь чувством пропорции, то есть соотношений. <br>Существуют законы, которые позволяют создать модульные сетки, приятные глазу человеку. <br><br>Еще Фидий (создатель Акрополя) и Иктин (Парфенон) продемонстрировали знание закона золотого сечения. <br>Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине: a:b=b:(a+b). <br>
-   Свойство
+     Пример
-   align=
+      align=center
-   background=
+     background=pic.gif
-   bgcolor=
+      bgcolor=#FF9900
-   border=
+      border=2
-   bordercolor=
+      bordercolor=#333333
-   Свойство
+      Пример
-  bordercolordark=
+      bordercolordark=#f0f0f0
-   cellpadding=
+     cellpadding=7
-   cellspacing=
+     cellspacing=3
-    frame=
+     frame=hsides
-   Свойство
+      Пример
-   nowrap
+      <table nowrap>
-   valign=
+     valign=top
-   width=
+      width=90%
-   height
+      height=18
-   Значение
+     Результат
-   void
+     Все линии внешней границы отсутствуют
-   above
+     Линия над таблицей
-   below
+     Линия под таблицей
-   rhs
+     Линия справа от таблицы
-   lhs
+     Линия слева от таблицы
-   hsides
+     Линия над и под таблицей
-   vsides
+     Линия справа и слева от таблицы
-   border
+     Все линии внешней границы присутствуют (значение по умолчанию)
-   Значение
+     Результат
-   none
+     Все внутренние линии отсутствуют
-   cols
+     Линии между столбцами
-   rows
+     Линии между строками
-   groups
+     Линии между группами столбцов и группами строк
-   all
+    Все внутренние линии присутствуют 
   (значение по умолчанию)

При использовании материалов ресурса
ссылка на edufuture.biz обязательна (для интернет ресурсов - гиперссылка).
edufuture.biz 2008-© Все права защищены.
Сайт edufuture.biz является порталом, в котором не предусмотрены темы политики, наркомании, алкоголизма, курения и других "взрослых" тем.

Разработка - Гипермаркет знаний 2008-

Ждем Ваши замечания и предложения на email:
По вопросам рекламы и спонсорства пишите на email: