На прошлом уроке мы с Вами создали файл главной страницы сайта index.html, открыли его блокнотом и добавили в него HTML код, содержащий обязательные html теги.

Кроме того, мы с Вами научились изменять цвет фона страницы с помощью изменения значения параметра bgcolor тега BODY.

Теперь давайте вспомним, какой мы выбрали макет или каркас для сайта, об этом мы говорили в восьмом уроке нашего курса.

Обратите внимание, что макет сайта, на самом деле, является таблицей.

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

На самом деле, существует два основных типа верстки страниц html сайтов – с помощью таблиц и с помощью CSS стилей.

В настоящее время, верстка с помощью CSS стилей является более предпочтительной, но при создании сайта в блокноте, проще использовать табличную верстку, поэтому мы на таблице и остановимся.

В начальный период развития Интернет, в основном использовался табличный способ верстки страниц. Широкое использование таблиц при верстке html страниц было связано с тем, что таблицу можно создать с любым количеством столбцов и строк. Размеры таблицы очень просто меняются с помощью параметров.

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

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

Итак, таблица в коде веб страницы задается тегом <table>, мы знаем, что таблица состоит из вертикальных столбцов и горизонтальных строк, которые образуют ячейки таблицы. Строки в html таблице задаются тегом <tr>, а ячейка тегом <td>.

Откроем файл нашей веб страницы index.html для редактирования блокнотом Notepad++. И откроем ее с помощью браузера, для того, чтобы просматривать на странице изменения.

В самом начале этой статьи, мы с вами говорили о том, что макет сайта, который мы с Вами задумали, является таблицей.

Причем, таблица макета сайта у нас будет состоять из трех строк (Heder, Контент и Footer) и двух столбцов (Меню и Контент).

Для добавления таблицы с тремя строками и двумя столбцами, изменим наш код, добавив следующее:

<table>
<tr>
 <td>1строка 1 столбец</td>
 <td>1строка 2 столбец</td>
</tr>
<tr>
 <td>2строка 1 столбец</td>
 <td>2строка 2 столбец</td>
</tr>
<tr>
 <td>3строка 1 столбец</td>
 <td>3строка 2 столбец</td>
</tr>
</table>

Чтобы в таблице задать рамку, используем параметр border. Толщина рамки таблицы задается в пикселах (px).

Добавим в наш html код параметр border, со значением аргумента, равным 1px. То есть, толщина рамки таблицы у нас будет равна одному пикселу:

<table border="1">
<tr>
 <td>1строка 1 столбец</td>
 <td>1строка 2 столбец</td>
</tr>
<tr>
 <td>2строка 1 столбец</td>
 <td>2строка 2 столбец</td>
</tr>
<tr>
 <td>3строка 1 столбец</td>
 <td>3строка 2 столбец</td>
</tr>
</table>

Нажмем в блокноте кнопку «Сохранить» и для проверки изменений, откроем наш файл index.html браузером. Мы увидим, что в левой части окна браузера, у нас появилась таблица.

Чтобы выровнять таблицу по центру окна браузера, используем параметр align, который может принимать три значения: left, center, right, понятно, что для выравнивания таблицы по центру окна браузера, значение аргумента параметра выравнивания, у нас должно быть равно: center.

И давайте, здесь же, зададим ширину таблицы. Ширина таблицы задается параметром width. Значения, которые может принимать данный параметр, могут быть выражены целым числом в пикселах или в процентах от текущей ширины окна браузера.

Добавим в наш код выравнивание и ширину таблицы, в результате, получим следующий код:

<table align="center" width="65%" border="1">
<tr>
 <td>1строка 1 столбец</td>
 <td>1строка 2 столбец</td>
</tr>
<tr>
 <td>2строка 1 столбец</td>
 <td>2строка 2 столбец</td>
</tr>
<tr>
 <td>3строка 1 столбец</td>
 <td>3строка 2 столбец</td>
</tr>
</table>

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

Теперь давайте вернемся к рамке таблицы, мы в html коде мы задали ее равной 1 пикселу с помощью значения аргумента параметра border: border=”1”.

Вновь обратиться к параметрам тега TABLE в html справочнике, здесь есть два параметра, которые влияют на внешний вид рамки.

Первый параметр: cellspacing – задает расстояние между ячейками таблицы.

Второй параметр: cellpadding – от значения аргумента данного параметра, зависит расстояние от рамки до содержимого ячейки.

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

В результате html код таблицы, примет следующий вид:

<table align="center" width="65%" cellspacing="0" cellpadding="0" border="1">
<tr>
 <td>1строка 1 столбец</td>
 <td>1строка 2 столбец</td>
</tr>
<tr>
 <td>2строка 1 столбец</td>
 <td>2строка 2 столбец</td>
</tr>
<tr>
 <td>3строка 1 столбец</td>
 <td>3строка 2 столбец</td>
</tr>
</table>

Как Вы помните, наша таблица должна иметь три строки, причем в первой строке должна быть одна ячейка, во второй строке две ячейки и в третьей строке, должна быть тоже одна ячейка.

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

Для того, чтобы это сделать, воспользуемся параметром colspan. Данный параметр используется в теге TD. Значение аргумента параметра colspan, указывает на количество объединяемых горизонтальных ячеек, в нашем случае это значение равно 2.

Кроме добавления параметра colspan, давайте изменим надписи в ячейках таблицы, в соответствии с нашим макетом.

После всех изменений, полный html код нашей страницы будет следующим:

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.1Final//EN">
<html>
<head>
<title> Как создать сайт в блокноте</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<table align="center" width="65%" cellspacing="0" cellpadding="0" border="1">
<tr>
 <td align="center" colspan="2">Header</td>
</tr>
 <tr>
 <td>Меню сайта</td>
 <td>Контент</td>
 </tr>
 <tr>
 <td align="center" colspan="2">Footer</td>
 </tr>
</table>
</body>
</html>

Сохраним наш код в блокноте и обновим файл index.html в браузере, чтобы посмотреть на изменения.

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

Перейти к Уроку 11: Фон и высота ячейки html таблицы

Перейти к Уроку 9: Фон html страницы