HTML, Excel, Word, SEOОсновы Html ⇒ Таблицы документа html

ОСНОВЫ HTML

Справочная информация:
Справочник 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 (ч.1)



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

Обрамление таблицы

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

Группирование столбцов

Группирование строк


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

Создание таблицы документа html

Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.

Тэг <TH> используется для создания ячеек с заголовками.

Тэг <TD> - для обыкновенных ячеек с данными.

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

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

Пример:

HTML-код:


<table border="1">

 <tr>

  <td>1</td>

  <td>2</td>

 </tr>

 <tr>

  <td>3</td>

  <td>4</td>

 </tr>

 <tr>

  <td>5</td>

  <td>6</td>

 </tr>

</table>

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


1 2
3 4
5 6

Обрамление таблицы документа html

Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>.

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

По умолчанию браузер отображает рамку таблицы темно-серым цветом. Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR.

Пример:

HTML-код:


<table border="2" cellspacing="5" bordercolor="#0ff00f">

 <tr>

  <td>1</td>

  <td>2</td>

 </tr>

 <tr>

  <td>3</td>

  <td>4</td>

 </tr>

 <tr>

  <td>5</td>

  <td>6</td>

 </tr>

</table>

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


1 2
3 4
5 6

Заголовок таблицы документа html

Для создания заголовка таблицы служит тэг <CAPTION>.

По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей.

Следует сказать, что стандарт HTML не позволяет ставить одной таблице несколько заголовков.

Пример:

HTML-код:


<table border="1">

<caption> Заголовок таблицы </caption>

 <tr>

  <td>1</td>

  <td>2</td>

 </tr>

</table>

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


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

Группирование столбцов документа html

Для группирования столбцов таблицы служат тэги <COLGROUP> и <COL>.

Дескриптор <COLGROUP> создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Так одна структурная группа может охватывать ячейки заголовков столбцов, а другая - ячейки, содержащие данные.

Дескриптор <COL> предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа.

Пример:

HTML-код:


<table border="1">

<colgroup span="1" style="color:red"></colgroup>

<colgroup span="2">

 <tr>

  <th>Товар</th>

  <th>Цена</th>

  <th>Кол-во</th>

 </tr>

 <tr>

  <th>Гайка</th>

  <td>20р</td>

  <td>50</td>

 </tr>

 <tr>

  <th>Болт</th>

  <td>30р</td>

  <td>80</td>

 </tr>

</table>

<br>

<table border="1">

<col span="1" style="color:green">

<col span="2" style="color:red">

 <tr>

  <th>Товар</th>

  <th>Цена</th>

  <th>Кол-во</th>

 </tr>

 <tr>

  <th>Гайка</th>

  <td>20р</td>

  <td>50</td>

 </tr>

 <tr>

  <th>Болт</th>

  <td>30р</td>

  <td>80</td>

 </tr>

</table>

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


Товар Цена Кол-во
Гайка 20р 50
Болт 30р 80

Товар Цена Кол-во
Гайка 20р 50
Болт 30р 80

Группирование строк документа html

Для группирования строк таблицы служат тэги <THEAD>, <TBODY>, <TFOOT>.

<THEAD> - нужен для создания группы заголовков для столбцов таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз.

<TBODY> - применяется для создания одной или нескольких групп строк таблицы, содержащих основные данные.

<TFOOT> - позволяет создать группу строк для представления информации о суммах или итогах, располагаемую в нижней части таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов.

Пример:

HTML-код:


<table border="1">

<thead style="color:green">

 <tr>

  <th>Товар</th>

  <th>Цена</th>

  <th>Кол-во</th>

 </tr>

</thead>

 <tr>

  <th>Гайка</th>

  <td>20р</td>

  <td>50</td>

 </tr>

 <tr>

  <th>Болт</th>

  <td>30р</td>

  <td>80</td>

 </tr>

<tfoot>

 <tr>

  <td colspan="3" align="center">Итоговая строка</td>

 </tr>

</tfoot>

</table>

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


Товар Цена Кол-во
Гайка 20р 50
Болт 30р 80
Итоговая строка


В начало страницы



В начало страницы