Главная страница Карта сайта Написать письмо

HTML, Excel, Word, SEO   учебник HTML (хтмл) таблицы
JavaScript + DHTML HTML Word Excel VBA Графика Свой сайт Free soft вебмастера SEO-новости Статьи
HTML профессионально
Учебник HTML (хтмл)
...Старт
...Основные тэги
...Заголовки и комментарии
...Специальные символы
...Форматирование текста ч.1
...Форматирование текста ч.2
...Форматирование текста ч.3
...Создание списков
...Работа с графикой ч.1
...Работа с графикой ч.2
...Работа с графикой ч.3
...Работа с графикой ч.4
...Таблицы ч.1
...Таблицы ч.2
...Таблицы ч.3
...Гиперссылки
...Фреймы
...Что такое формы
...Что такое JavaScript
...Маленькие секреты Вэб-дизайна
...Эффект постепенной прорисовки
...Карта ссылок
...Внутренний лист стилей
...Работа с листами стилей
...Свойства шрифта - font
...Свойства текста
...Свойство фона - background
...Рамки и размеры
...Относительное и абсолютное позиционирование элементов
...Основные мета тэги
...Таблица дескрипторов HTML и их атрибутов
...Таблица свойств css
...Заключительное слово
HTML-редакторы
...Что такое HTML-редактор
...FrontPage 2003
...Adobe GoLive CS
...Macromedia Dreamweaver MX 2004
...HomeSite
...CuteSite Builder
...Namo WebEditor
...CoffeeCup HTML Editor
...1stPage 2000
...Arachnophilia
...HotDog Professional
...CSE HTML Validator Pro
 
 

«цвет таблиц  ||  язык HTML  ||  гиперссылки»

Таблицы html-страницы (ч.3)

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

Улучшение внешнего вида таблицы

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

Перенос слов в ячейках таблицы

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

Обтекание таблицы текстом

Слияние ячеек таблицы html-страницы

При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку.

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

Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца.

Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.

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

Пример:

HTML-код:


<table border="1">

 <tr>

  <td rowspan="3">1111</td>

  <td colspan="2">22222</td>

  <td colspan="2">33333</td>

 </tr>

 <tr>

  <td>44444</td>

  <td colspan="2" rowspan="2">55555</td>

  <td>66666</td>

 </tr>

 <tr>

  <td>77777</td>

  <td>88888</td>

 </tr>

 <tr>

  <td colspan="5">99999</td>

 </tr>

</table>

Отображение в браузере:


1111 22222 33333
44444 55555 66666
77777 88888
99999
Улучшение внешнего вида таблицы html-страницы

Атрибут CELLSPACING дает возможность задавать размер полосы чистого пространства, обрамляющих таблицу извне. По умолчанию браузер разделяет ячейки таблицы полосой в 2 пикселя.

Атрибут CELLPADDING задает размеры полос чистого пространства внутри ячейки, отделяя ее содержимое от внешних границ. По умолчанию эта величина равна 1 пикселю.

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

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

Если значение атрибута BORDER тэга <TABLE> отлично от нуля, то браузер заключает таблицу в рамку и разграничивает соседние строки и столбцы таблицы. При помощи атрибутов FRAME, RULES можно указать какие именно части обрамлений таблицы следует показывать.

Атрибут FRAME служит для определения фрагментов внешнего очертания таблицы.

Атрибут RULES - указывает набор внутренних разделительных линий.

Ниже приведены допустимые значения этих атрибутов.

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

void      Все линии отсутствуют
above     Линия над таблицей
below     Линия под таблицей
rhs       Линия справа от таблицы
lhs       Линия слева от таблицы
hsides    Линии над и под таблицей
vsides    Линии слева и справа от таблицы
border    Все линии присутствуют (по умолчанию)

      RULES
none      Все линии отсутствуют
cols      Линии между столбцами
rows      Линии между строками
groups    Линии между группами столбцов и строк
all       Все линии присутствуют (по умолчанию)

Пример:

HTML-код:


<table border="1" rules="rows">

 <tr>

  <td>111</td>

  <td>111</td>

  <td>111</td>

 </tr>

 <tr>

  <td>111</td>

  <td>111</td>

  <td>111</td>

 </tr>

</table>

Отображение в браузере:


111 111 111
111 111 111
Перенос слов в ячейках таблицы html-страницы

По умолчанию браузер делает автоматический перенос слов текста внутри ячейки таблицы. Атрибут NOWRAP принудительно отключает функцию переноса слов внутри таблицы и отображает текст в одну строку. Поэтому этот атрибут рекомендуют применять по отношению к ячейкам таблицы, содержащим короткий текст, т.к. в противном случае он выйдет за пределы окна браузера. Следует сказать, что этот атрибут не оказывает воздействие на текст ячейки, отформатированный при помощи тэгов <P>, <BR>.

Вложенные таблицы html-страницы

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

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

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

Пример:

HTML-код:


<table border="1">

 <tr>

  <td>111</td>

  <td>111</td>

  <td>

   <table border="1" bgcolor="#00ff00">

    <tr>

     <td>01</td>

     <td>01</td>

    </tr>

    <tr>

     <td>01</td>

     <td>01</td>

    </tr>

   </table>

  </td>

 </tr>

 <tr>

  <td>111</td>

  <td>111</td>

  <td>111</td>

 </tr>

</table>

Отображение в браузере:


111 111
01 01
01 01
111 111 111
Обтекание таблицы текстом

Атрибут ALIGN, используемый для задания признака обтекания таблиц текстом, может принимать два значения - left, right. Первое - заставляет браузер поместить таблицу слева от текста, второе - справа.

Если необходимо, чтобы форматированию подвергся определенный фрагмент текста, надо применить тэг <BR> с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой обтекание отменяется. Значения left, right, all атрибута CLEAR позволяет определить, с какой стороны текст далее будет свободен от таблицы.

Пример:

HTML-код:


<table border="1" align="left">

 <tr>

  <td>11</td>

  <td>11</td>

 </tr>

 <tr>

  <td>11</td>

  <td>11</td>

 </tr>

</table>

<p>Текст обтекает таблицу</p>

<br clear="left">

<p>Текст не обтекает таблицу</p>

Отображение в браузере:


11 11
11 11

Текст обтекает таблицу


Текст не обтекает таблицу

top

«цвет таблиц  ||  язык HTML  ||  гиперссылки»
Рекомендую
Смотреть все книги»
 
 
 

БОНУС

Спасибо, что заглянули на сайт. Надеюсь, Вам понравилось. Заходите еще. Здесь всегда рады вам :)
При копировании материалов, размещенных на сайте, ссылка на первоисточник обязательна.

© 2008
Айнур Турушев All Rights Reserved

  

E-mail:
sozdaysait@narod.ru

Хостинг от uCoz