Таблица html Печать
(6 голоса, среднее 5.00 из 5)
Создание статического сайта - Основы HTML.
06.01.2011 00:00

Шаблон статической страницы.

Сейчас мы ближе подойдём к вопросу о том, как создать свой сайт, а точнее создать шаблон статической страницы на основе таблицы html. Существуют и другие, более продвинутые способы построения статических страниц, например, вёрстка div блоками, но сегодня, здесь и сейчас говорим о таблицах HTML.

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

Итак, наша задача разбить страницу на зоны с помощью html таблицы. Я выбрал такой классический вариант.Таблица html

В идеале html таблица границ не имеет, т.е. они не видимы, но мы для простоты и наглядности их оставим.

Код таблицы html.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ru">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>html-Таблица</title>
</head>
<body>
<table align="left;" border="1" cellpadding="2"
cellspacing="2" height="100%" width="100%">
<tr align="center">
<td colspan="3" height="100"
width="100%">ШАПКА</td>
</tr>
<tr>
<td colspan="3" height="14"
width="100%">Область главного меню</td>
</tr>
<tr>
<td height="167" width="140">Левое меню</td>
<td height="167" width="691">Область контента</td>
<td height="167" width="140">Правое меню</td>
</tr>
<tr>
<td colspan="3" height="14"
width="100%">Область пользователя</td>
</tr>
<tr align="center">
<td colspan="3" height="100"
width="100%">ПОДВАЛ</td>
</tr>
</table>
</body>
</html>

Предлагаю набрать этот код в блокноте или просто скопировать его туда, после чего сохраните, например, под именем primer2.html в уже существующую папку practicalwork. Запустите в браузере и убедитесь, что всё отображается корректно, как на рисунке выше. Шаблон должен получиться «резиновым», т.е. html таблица должна ловить ширину окна браузера. Надеюсь на этом этапе всё гладко.

Описание кода html таблицы.

Тег DOCTYPE и meta теги, а также теги верхнего уровня мы рассмотрели. Теперь непосредственно к html таблице.

Тег <table>.

Таблица заключена в контейнер «Тела» <body> </body> и представляется тегами <table> </table>.

В нашем случае открывающий тег html таблицы выглядит:

<table align="left;" border="1" cellpadding="2" cellspacing="2" height="100%" width="100%">.

Как видите, наш тег <table> имеет атрибуты. Так что же они обозначают?

Атрибут align задаёт выравнивание таблицы. В нашем случае – по левому краю, т.к. align="left;".

Border – указывает на толщину рамки html таблицы в пикселях. Если указать border="0", то рамки у нашей таблицы, конечно же, не будет.

Cellpadding – этот параметр указывает на отступ от содержимого в ячейке до рамки таблицы html. У нас 2 пикселя.

Cellspacing – измеряемое в пикселях расстояние между соседними ячейками. В нашем случае также 2 пикселя.

Height – высота html таблицы. Измеряется либо в пикселях, либо в процентах. Этот параметр часто опускают, а в html 4 его вообще нет. По умолчанию высота подстраивается под содержимое таблицы html.

Width – задаёт ширину таблицы. Аналогичен атрибуту height, но имеет более весомое значение. Относительное задание ширины html таблицы (в процентах) позволяет ей подстраиваться под рабочую область в зависимости от разрешения экрана. Такая таблица называется – резиновая. Абсолютную ширину можно указать в пикселях. Такой способ используют, если есть необходимость удерживать фиксированный размер html таблицы, чтобы она не поплыла. И ещё маленькое замечание. Если содержимое в таблице будет превышать истинные её размеры, то они будут пересчитаны и подогнаны под размеры содержимого.

Кроме используемых параметров в нашем шаблоне тег <table> может содержать и атрибуты перечисленные ниже.

Background - фоновый рисунок для html таблицы.

Bgcolor – задаётся в виде прямого имени или 16-ричного значения. Определяет цвет фона таблицы html.

Bordercolor – задаёт цвет рамки.

Cols – задаёт число столбцов в таблице html.

Frame – указывает в каком стиле оформить границы вокруг html таблицы.

Rules - указывает в каком стиле оформить границы между ячейками таблицы.

Summary – сюда заносится описание таблицы (может использоваться поисковыми роботами).

И ещё не всё. Существуют так называемые универсальные атрибуты, которые применяются почти ко всем тегам, в том числе и к <table>, но о них пока помолчим.

Тег <tr>.

Тег <tr> создаёт строку html таблицы и является контейнером для тегов <td> - ячейка и <TH> - ячейка заголовка.

<tr align="center">

В нашем шаблоне тег <tr> использует один аргумент align, который отвечает за выравнивание по горизонтали. В нашем случае – по центру. Содержимое – «ШАПКА». Помимо того, тег <tr> может иметь и следующие атрибуты.

Valign – отвечает за выравнивание по вертикали, Bordercolor и Bgcolor – аналогичны атрибутам тега <table>.

Тег <td>.

Тег <td> формирует ячейку в строке, заданной тегом <tr>

<tr>
<td>...</td>
</tr>

<td colspan="3" height="100"  width="100%">ШАПКА</td>

В нашем примере, атрибут colspan="3" указывает на то, что 3 ячейки должны быть объединены по горизонтали. Это и верно – наша html таблица имеет 3 столбца. Аналогичный атрибут rowspan – указывает на объединение вертикальных ячеек.

Тег <td> имеет ряд уже известных Вам атрибутов: align, valign, background, bgcolor, bordercolor, height, width. Кстати, а какой размер этой верхней ячейки? Высота – 100 пикселей (задана абсолютно), ширина – во всю рабочую область (задана относительно).

У тега <td> присутствуют и следующие атрибуты.

Abbr – сюда заносится описание самой html ячейки, а точнее её содержимого для поисковиков и скриптов озвучивания ячеек.

Nowrap – пользуйтесь этим параметром аккуратно. Он запрещает переносить строки, что может привести к горизонтальным линейкам прокрутки.

Далее всё аналогично. Мы, конечно, рассмотрели не все возможные атрибуты тегов html таблицы и их значения, но ведь и не задавались такой целью. Для любознательных посоветую обратиться к справочникам по html, коих в Интернете море. Много хороших, не очень хороших ещё больше. Надеюсь Вы попробуете построить свой шаблон странички, используя html таблицу.

Удачи!

Обновлено 08.02.2011 04:39