на главную

Основы HTML: таблицы и списки на веб-страницах.

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

Создание списков html страницы


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

Создание таблицы Обрамление таблицы Заголовок таблицы Группирование столбцов Группирование строк Задание цвета элементов таблицы Графический фон таблицы Выравнивание данных в таблице Изменение размеров таблицы Слияние ячеек таблицы Улучшение внешнего вида таблицы Отображение границ таблицы Перенос слов в ячейках таблицы Вложенные таблицы Обтекание таблицы текстом

Переходим к изучению таблиц. Таблицы играют огромную роль в создании 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
Итоговая строка

Задание цвета элементов таблицы html страницы

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

Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.



Пример:

HTML-код:


<table border="1">
<tr bgcolor="#ff00ff">
<td>1</td>
<td>2</td>
</tr>
<tr bgcolor="#5555ff">
<td>3</td>
<td>4</td>
</tr>
</table>

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


1 2
3 4

Графический фон таблицы html страницы

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

Пример:

HTML-код:


<table background="img/sea.jpg">
<tr>
<td>11111</td>
<td>22222</td>
</tr>
<tr>
<td>33333</td>
<td>44444</td>
</tr>
</table>

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


11111 22222
33333 44444

Выравнивание данных в таблице html страницы

Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.

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

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

Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.

Пример:

HTML-код:


<table border="1" cellpadding="5">
<tr>
<td align="right">1111<br>2222</td>
<td valign="top" align="center">22222</td>
</tr>
<tr>
<td>Нижняя ячейка</td>
<td>Нижняя ячейка</td>
</tr>
</table>

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


1111
2222 		22222
Нижняя ячейка Нижняя ячейка

Изменение размеров таблицы html страницы

Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.

То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.

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

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

Пример:

HTML-код:


<table border="1" width="200">
<tr>
<td><p>Ширина 200 пикселей</p></td>
</tr>
</table>
<br>
<table border="1" width="60%">
<tr>
<td><p>Ширина 60%</p></td>
</tr>
</table>

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


Ширина 200 пикселей

Ширина 60%
Слияние ячеек таблицы 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

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


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

Создание списков html страницы

Нумерованный список Маркированный список Многоуровненвый список Списки определений

Основное применение списков:

Нумерованные - для перечисления элементов, следующих в строго определенном порядке.

Маркированные - для перечисления элементов, следующих в произвольном порядке.

Многоуровневые - для конкретизации информации определенных элементов.

Список определений - используется для форматирования словарей.


Нумерованный список html страницы

Для создания нумерованных списков используются тэги <OL> <LI>

Тэгом <OL> отмечается начало/окончание всего списка.

Тэгом <LI> обозначают начало/конец отдельного элемента списка.

По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации.

Значение Нумерация
 TYPE

 A A, B, C..
 a a, b, c..
 I I, II, III..
 i i, ii, iii..
 1 1. 2. 3..

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

При помощи атрибутов START VALUE можно изменить порядок нумерации списка.

START - служит для задания начального номера списка, отличного от 1.

VALUE - дает возможность назначить произвольный номер любому элементу списка.

Пример:

HTML-код:


<ol>

<li>элемент 1</li>

<li>элемент 2</li>

<li>элемент 3</li>

</ol>

<ol type="A">

<li>элемент 1</li>

<li>элемент 2</li>

<li>элемент 3</li>

</ol>

<ol start="5">

<li>элемент 1</li>

<li value="9">элемент 2</li>

<li>элемент 3</li>

</ol>

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


  1. элемент 1
  2. элемент 2
  3. элемент 3
  1. элемент 1
  2. элемент 2
  3. элемент 3
  1. элемент 1
  2. элемент 2
  3. элемент 3
Маркированный список html страницы

Для создания маркированных списков применяют тэги <UL <LI>

Тэгом <UL> отмечается начало/окончание всего списка.

Тэгом <LI> обозначают начало/конец отдельного элемента списка.

По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута TYPE можно изменить стиль маркирования.

В пределах одного списка можно использовать различную маркировку элементов списка.

Пример:

HTML-код:


<ul type="circle">

<li>элемент 1</li>

<li>элемент 2</li>

<li type="disc">элемент 3</li>

<li type="square">элемент 4</li>

</ul>

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


  • элемент 1
  • элемент 2
  • элемент 3
  • элемент 4
Многоуровненвый список html страницы

Для создания многоуровневых списков можно использовать как маркированные, так и нумерованные списки, а также их сочетание. Многоуровневый список получается путем вложения одного списка в тело другого. Главная задача при этом не запутаться. Для этого советую делать различные отступы для отдельных списков.

Списки определений html страницы

Для создания списков определений используют три тэга:

<DL> - начало/конец списка.

<DT> - начало/конец конкретного термина.

<DD> - начало/конец поясняющей статьи термина.

Тэги <DT> и <DD> не обязательно чередовать. Т.е. можно "привязать" к одному определению несколько терминов, и, наоборот.

Пример:

HTML-код:


<dl>

<dt>Термин 1</dt>

<dd>Аннотация1 к термину 1</dd>

<dd>Аннотация2 к термину 1</dd>

</dl>

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


Термин 1
Аннотация1 к термину 1
Аннотация2 к термину 1