HTML - основы

Таблицы. Теория (описание тегов, атрибутов и значений)

Таблицы создаются тегом <table></table>.
По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации.

Но это еще не все: необходимо указать строчки и столбцы таблицы.
<tr></tr> - строчка таблицы.
<td></td> - ячейка (столбец) таблицы.

А так же к таблицам можно отнести следующие теги:
<th></th>- создает ячейку, но определяет ее как ячейку-заголовок. В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.
<caption></ caption >- заголовок таблицы. при этом содержание заголовка должно состоять только из текста.

Рассмотрим возможные атрибуты для всех тегов:

Внимание! Далее рассматривается применение всех элементов доходчиво и подробно. Смотри практику.

Итак, возможные атрибуты у тега table:

BORDER-определяет ширину внешней рамки таблицы (в пикселах). Если этот параметр не указан или BORDER="0" рамка отображаться не будет.

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

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

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

BGCOLOR-устанавливает цвет фона для всей таблицы. Значение задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета.

BACKGROUND-позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать адрес (URL) рисунка.

CELLPADDING-определяет расстояние (в пикселях) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

CELLSPACING-определяет расстояние (в пикселях) между границами соседних ячеек.

Рассмотрим возможные атрибуты у тега tr:

ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.

VALIGN- определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения:

top-содержимое будет находится наверху.
bottom-содержимое будет находится внизу.
middle-содержимое будет находится в центре.

BGCOLOR-определяет цвет фона для всех ячеек данного ряда. Значение задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета.

Рассмотрим возможные атрибуты у тега td и th:

HEIGHT-определяет высоту ячейки. Высота задается в пикселях или в процентном отношении к ширине таблицы.

WIDTH-определяет ширину ячейки. Ширина задается в пикселях или в процентном отношении к ширине таблицы.

ALIGN-определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование.

VALIGN-- определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру, если значение этого параметра не было задано ранее в элементе TR.

COLSPAN-определяет количество столбцов, на которые простирается данная ячейка. По умолчанию установлено значение 1.

ROWSPAN-определяет количество рядов, на которые простирается данная ячейка. По умолчанию установлено значение 1.

NOWRAP-автоматический перенос слов в пределах текущей ячейки.

BGCOLOR-определяет цвет фона ячейки.

BACKGROUND-- заполняет ячейку фоновым рисунком. В качестве значения необходимо указать адрес (URL) рисунка.

Рассмотрим возможные атрибуты у тега caption:

ALIGN-определяет способ вертикального выравнивания заголовка таблицы. Возможные значения:

top - помещает заголовок над таблицей (по умолчанию).
bottom - помещает заголовок под таблицей.

Практика

Сделаем таблицу состоящую из 2-х строчек и 2-х столбцов. Получается по 2 ячейки в каждой строчке, а всего 4 ячейки.

1) В начале указываем сколько строчек в таблице тегом <tr></tr>

<table>
<tr></tr>
<tr></tr>
</table>

2) А затем уже в каждой строчке задаем число столбцов тегом <td></td>

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

3) Теперь впишем сюда что нибудь.

<table>
<tr>
<td> 1-я ячейка </td>
<td> 2-я ячейка </td>
</tr>
<tr>
<td> 3-я ячейка </td>
<td> 4-я ячейка </td>
</tr>
</table>

Вот что мы получили:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

4) Чтобы раскрасить ячейки используем атрибут bgcolor, а в качестве значение используем цвет (bgcolor="цвет_фона"). Таким способом фон можно задавать как для таблицы в целом, так и для строки и(или) ячейки. В нашем случае зададим цвет для каждой ячейки.

<table >
<tr>
<td bgcolor="#d3d7f3"> 1-я ячейка </td>
<td bgcolor="#f3efd3"> 2-я ячейка </td>
</tr>
<tr >
<td bgcolor="#f3efd3"> 3-я ячейка </td>
<td bgcolor="#d3d7f3"> 4-я ячейка </td>
</tr>
</table>

Вот что у нас получилось:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

5) Но ячейки слишком маленькие, хотелось бы сделать их пошире и длиннее. Необходимо задать ширину и высоту атрибутами width и height, а значения можно задавать как в пикселях так и в процентах

height="35" width="50" (в пикселях)
height="15%" width="25%" (в процентах)

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

<table >
<tr>
<td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td>
<td bgcolor="#f3efd3" width="120"> 2-я ячейка </td>
</tr>
<tr >
<td bgcolor="#f3efd3" height="45"> 3-я ячейка </td>
<td bgcolor="#d3d7f3"> 4-я ячейка </td>
</tr>
</table>

А вот и результат:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

Внимание!!!!
Мы задавали ширину и высоту не в каждой ячейке. Почему? Ответ прост:
Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, все ячейки вашего ряда станут по высоте равны наибольшей. Тоже самое с рядами, если вы зададите для какой-либо ячейки наибольшую ширину, то весь столбец выровняются по этому наибольшему значению.
Следовательно можно задать один раз ширину ячейки, и весь столбец станет такого же размера.
Можно задать в одной ячейки высоту, и вся строчка станет такой высоты.
В этом примере мы задали высоту в одной ячейке и вся строчка стала такой высоты. Так же мы задали ширину в одной ячейке и весть столбец стал такой ширины.

6)Теперь рассмотрим как разместить текст не только по середине (по умолчанию), но вверху или внизу. Для этого используем атрибут valign. Сделаем в первой строчке выравнивание по верхнему краю, а во второй строке по нижнему краю.

<table >
<tr valign="top">
<td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td>
<td bgcolor="#f3efd3" width="120"> 2-я ячейка </td>
</tr>
<tr valign="bottom" >
<td bgcolor="#f3efd3" height="45"> 3-я ячейка </td>
<td bgcolor="#d3d7f3"> 4-я ячейка </td>
</tr>
</table>

Смотрим, что вышло:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

6.a) Определим способ горизонтального выравнивания. Для этого используем атрибут align
В нашем случае мы расположим все по центру.

<table >
<tr valign="top" align="center">
<td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td>
<td bgcolor="#f3efd3" width="120"> 2-я ячейка </td>
</tr>
<tr valign="bottom" align="center">
<td bgcolor="#f3efd3" height="45"> 3-я ячейка </td>
<td bgcolor="#d3d7f3"> 4-я ячейка </td>
</tr>
</table>

Смотрим, что вышло:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

7) Давайте изменим пространство между ячейками атрибутом cellspacing.
Мы возьмем значение равное 0 (cellspacing ="0"), по этому расстояние между ячейками исчезло вообще.
Если бы в качестве значения мы выбрали 5 (cellspacing ="5"), то оно увеличилось бы до 5 пикселей.

<table cellspacing="0" >
<tr valign="top" align="center">
<td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td>
<td bgcolor="#f3efd3" width="120"> 2-я ячейка </td>
</tr>
<tr valign="bottom" align="center">
<td bgcolor="#f3efd3" height="45"> 3-я ячейка </td>
<td bgcolor="#d3d7f3"> 4-я ячейка </td>
</tr>
</table>

Результат на лицо:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

8)Теперь рассмотрим атрибут cellpadding. Как мы помним он определяет расстояние (в пикселях) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

<table cellspacing="0" cellpadding="10">
<tr valign="top" align="center">
<td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td>
<td bgcolor="#f3efd3" width="120"> 2-я ячейка </td>
</tr>
<tr valign="bottom" align="center">
<td bgcolor="#f3efd3" height="45"> 3-я ячейка </td>
<td bgcolor="#d3d7f3"> 4-я ячейка </td>
</tr>
</table>

А вот и результат:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

9) Ну и последнее на этом этапе. Сделаем фоном 4-й ячейки картинку. Для этого используем атрибут background.

<table cellspacing="0" cellpadding="10">
<tr valign="top" align="center">
<td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td>
<td bgcolor="#f3efd3" width="120"> 2-я ячейка </td>
</tr>
<tr valign="bottom" align="center">
<td bgcolor="#f3efd3" height="45"> 3-я ячейка </td>
<td bgcolor="#d3d7f3" background="backgr.jpg"> 4-я ячейка </td>
</tr>
</table>

Заметьте, что если картинка по каким либо причинам не будет загружена, цвет ячейки будет голубым. Это происходит, потому что мы сохранили атрибут bgcolor (bgcolor="#d3d7f3").

Продолжаем создавать таблицы.

1) Создадим таблицу из 3-х строк и 3-х столбцов.

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

2) Напишем туда что ни будь и зададим ширину и высоту ячеек.

<table>
<tr>
<td height="60" width="100"> 1-я ячейка </td>
<td width="100"> 2-я ячейка </td>
<td width="100"> 3-я ячейка </td>
</tr>
<tr>
<td height="60" >4-я ячейка</td>
<td>5-я ячейка</td>
<td>6-я ячейка</td>
</tr>
<tr>
<td height="60" >7-я ячейка</td>
<td>8-я ячейка</td>
<td>9-я ячейка</td>
</tr>
</table>

3) Раскрасим ячейки разными цветами.

<table>
<tr>
<td height="60" width="100" bgcolor="#d3d7f3"> 1-я ячейка </td>
<td width="100" bgcolor="#f3efd3"> 2-я ячейка </td>
<td width="100" bgcolor="#d3d7f3"> 3-я ячейка </td>
</tr>
<tr>
<td height="60" bgcolor="#f3efd3">4-я ячейка</td>
<td bgcolor="#d3d7f3">5-я ячейка</td>
<td bgcolor="#f3efd3">6-я ячейка</td>
</tr>
<tr>
<td height="60" bgcolor="#d3d7f3" >7-я ячейка</td>
<td bgcolor="#f3efd3">8-я ячейка</td>
<td bgcolor="#d3d7f3">9-я ячейка</td>
</tr>
</table>

Вот что у нас вышло:

1-я ячейка	2-я ячейка	3-я ячейка
4-я ячейка	5-я ячейка	6-я ячейка
7-я ячейка	8-я ячейка	9-я ячейка

4) Растянем первую ячейку на две используя атрибут colspan (colspan="2")
Обращаю ваше внимание что при этом нужно удалить одну ячейку (в нашем примере это 2-я ячейка ) т.к. ее место займет первая.
Так же необходимо изменить ширину этой ячейки. Так как она стала занимать две ячейки ее ширина должна увеличится вдвое. (width="200")

<table>
<tr>
<td height="60" width="200" colspan="2" bgcolor="#d3d7f3" > 1-я ячейка </td>
<td width="100" bgcolor="#d3d7f3"> 3-я ячейка </td>
</tr>
<tr>
<td height="60" bgcolor="#f3efd3">4-я ячейка</td>
<td bgcolor="#d3d7f3">5-я ячейка</td>
<td bgcolor="#f3efd3">6-я ячейка</td>
</tr>
<tr>
<td height="60" bgcolor="#d3d7f3" >7-я ячейка</td>
<td bgcolor="#f3efd3">8-я ячейка</td>
<td bgcolor="#d3d7f3">9-я ячейка</td>
</tr>
</table>

Вот что у нас вышло:

1-я ячейка		3-я ячейка
4-я ячейка	5-я ячейка	6-я ячейка
7-я ячейка	8-я ячейка	9-я ячейка

4.а) Растянем первую ячейку вертикально на две ячейки используя атрибут rowspan (rowspan="2") принцип действия тот же.
Не забудьте убрать ячейку 4 и поменять размеры высоты, так как ее место заняла ячейка 1.

P.S. Если Вы пробуете сделать этот пункт после предыдущего пункта (номер 4), то вам еще надо будет вернуть ту ячейку которую мы удалили из первой строки (ячейка номер 2) и изменить параметр width с 200 на 100.

<table>
<tr>
<td height="120" width="100" rowspan="2" bgcolor="#d3d7f3" > 1-я ячейка </td>
<td width="100" bgcolor="#d3d7f3"> 3-я ячейка </td>
<td width="100" bgcolor="#d3d7f3"> 3-я ячейка </td>
</tr>
<tr>
<td bgcolor="#d3d7f3">5-я ячейка</td>
<td bgcolor="#f3efd3">6-я ячейка</td>
</tr>
<tr>
<td height="60" bgcolor="#d3d7f3" >7-я ячейка</td>
<td bgcolor="#f3efd3">8-я ячейка</td>
<td bgcolor="#d3d7f3">9-я ячейка</td>
</tr>
</table>

Вот что вышло:

1-я ячейка	3-я ячейка	3-я ячейка
	5-я ячейка	6-я ячейка
7-я ячейка	8-я ячейка	9-я ячейка

6) Что бы закрепить пройденное. Попробуйте сделать сами такую таблицу. Внизу написан ее код что бы вы могли сравнить ее со своим. Не торопитесь подглядывать. Ведь Вы делаете это для себя.

1-я ячейка	2-я ячейка	3-я ячейка
4-я ячейка
7-я ячейка	8-я ячейка	9-я ячейка

А вот ее html-код.

<table>
<tr>
<td height="60" width="100" bgcolor="#d3d7f3"> 1-я ячейка </td>
<td width="100" bgcolor="#f3efd3"> 2-я ячейка </td>
<td width="100" bgcolor="#d3d7f3" rowspan="2" > 3-я ячейка </td>
</tr>
<tr>
<td height="60" bgcolor="#f3efd3" colspan="2">4-я ячейка</td>
</tr>
<tr>
<td height="60" bgcolor="#d3d7f3">7-я ячейка</td>
<td bgcolor="#f3efd3">8-я ячейка</td>
<td bgcolor="#d3d7f3">9-я ячейка</td>
</tr>
</table>

7) А сейчас рассмотрим как сделать заголовок таблицы. Для этого используем атрибут caption.
Так как мы будем использовать значение bottom наш заголовок будет располагаться внизу таблицы.

<table>
<caption align="bottom">Заголовок таблицы </caption>
<tr>
<td height="60" width="100" bgcolor="#d3d7f3"> 1-я ячейка </td>
<td width="100" bgcolor="#f3efd3"> 2-я ячейка </td>
<td width="100" bgcolor="#d3d7f3"> 3-я ячейка </td>
</tr>
<tr>
<td height="60" bgcolor="#f3efd3">4-я ячейка</td>
<td bgcolor="#d3d7f3">5-я ячейка</td>
<td bgcolor="#f3efd3">6-я ячейка</td>
</tr>
<tr>
<td height="60" bgcolor="#d3d7f3" >7-я ячейка</td>
<td bgcolor="#f3efd3">8-я ячейка</td>
<td bgcolor="#d3d7f3">9-я ячейка</td>
</tr>
</table>

Вот что у нас вышло:

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

1-я ячейка	2-я ячейка	3-я ячейка
4-я ячейка	5-я ячейка	6-я ячейка
7-я ячейка	8-я ячейка	9-я ячейка

<< назад

дальше >>

главная > документация

Реклама