Сайтостроение

Создание сайта

Раскрутка сайта

Заработок на сайте

...еще о сайтостроении

HTML. Tаблицы. Обрамление, заголовок, группирование строк и столбцов

В последнее время таблицы играют громадную роль при разработке html-страниц сайта. При помощи таблиц можно придать любой html-странице очень сложную компоновку. Поэтому рекомендую досконально изучить этот важнейший инструмент, который позволяет создавать полноценные сайты. При создании таблицы документа html используется тэг <TABLE>. Всем известно, что таблица состоит из набора строк, а строки, своим чередом делятся на ячейки. Для создания строк служит тэг <TR>, а для компоновки ячеек - <TH>, <TD>.
Если вам требуется создать ячейки с заголовками, то применяется Тэг <TH>, а вот
тэг <TD> - служит для создания обыкновенных ячеек с находящимися в них данными.
Полное содержание ячеек таких заголовков отображается на странице полужирным шрифтом и по умолчанию выравнивается по центру.
Так в чем же состоит главная «фишка» таблиц и почему они находят такое широкое использование у веб-дизайнеров при построении сайтов? Дело в том, что, задействуя таблицы, можно сделать безукоризненную компоновку информации в границах Вэб-страницы, добиться органичного размещения того или иного элемента страницы, будь то текст, графическое изображение или гиперссылка. К примеру, используя таблицу, появляется возможность легко и просто добиться отображения текстового фрагмента в нескольких колонках, также как и в журнальной публикации или газете.

Например:

Результат:

4	5
6	7
8	9

Если вы хотите сделать видимой контуры таблицы, то используют атрибут BORDER вместе с тэгом <TABLE>.
Задавая рамку, следует указать толщину таблицы внешних линий таблицы в пикселях. Для того, чтобы задать толщину разграничительных линий внутри таблицы, нужно применить атрибут CELLSPACING.
Браузер по умолчанию рисует контуры таблицы темно-серым цветом. Для того, чтобы поменять цвет рамки требуется воспользоваться таким атрибутом как: BORDERCOLOR.

К примеру:

Результат:

4	5
6	7
8	9

Для того, чтобы создать заголовок таблицы требуется использовать тэг <CAPTION>.
Браузер по умолчанию размещает заголовок по центру сразу над таблицей. Используя атрибут ALIGN, и выставляя значение bottom можно расположить заголовок снизу под таблицей.
Нелишне будет отметить, что стандарт HTML не дает возможности ставить для одной таблицы более одного заголовка.

Например:

<table border="2">
<caption>Это заголовок таблицы</caption>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>

Результат:

Это заголовок таблицы
3	4	5	6	7	8

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

Например:

<table border="2">
<colgroup span="2" style="color:blue"></colgroup>
<colgroup span="3">
<tr>
<th>Команда</th>
<th>Игр</th>
<th>Очков</th>
</tr>
<tr>
<th>Спартак</th>
<td>30</td>
<td>75</td>
</tr>
<tr>
<th>Динамо</th>
<td>29</td>
<td>71</td>
</tr>
</table>
<br>
<table border="2">
<col span="2" style="color:black">
<col span="3" style="color:yellow">
<tr>
<th>Команда</th>
<th>Игр</th>
<th>Очков</th>
</tr>
<tr>
<th>Спартак</th>
<td>30</td>
<td>75</td>
</tr>
<tr>
<th>Динамо</th>
<td>29</td>
<td>71</td>
</tr>
</table>

Результат:

Команда	Игр	Очков
Спартак	30	75
Динамо	29	71

Команда	Игр	Очков
Спартак	30	75
Динамо	29	71

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

Например:

<table border="2">
<thead style="color:red">
<tr>
<th>Команда</th>
<th>Игр</th>
<th>Очков</th>
</tr>
</thead>
<tr>
<th>Спартак</th>
<td>30</td>
<td>75</td>
</tr>
<tr>
<th>Динамо</th>
<td>29</td>
<td>71</td>
</tr>
<tfoot>
<tr>
<td colspan="4" align="center">Итоги футбольного чемпионата </td>
</tr>
</tfoot>
</table>

Результат:

Команда	Игр	Очков
Спартак	30	75
Динамо	29	71
Итоги футбольного чемпионата