Таблицы в HTML.Табличная разметка веб-страницы



Календарь



free counters

Урок1. Таблицы в HTML.Табличная разметка веб-страницы

lesson 1 Для построения таблиц в НТМЛ используется комбинация из нескольких тегов.
Тег <TABLE> - для обозначения начала таблицы;
</TABLE> - конец таблицы;
<tr> - начало строки;
</tr> - конец строки;
<td>обозначает ячейку столбца</td>;

Заметим, что HTML позволяет написание тегов как в верхнем, так и в нижнем регистре. Написание <table>, <TABLE> и <Table> будет интерпретировано одинаково, т.е. это одно и тоже. Это касается и атрибутов НТМЛ тегов.

атрибуты таблицы:
border="n" - ширина границы (в пикселах), принимает целочисленные значения, при n=0 граница визуально не отображается;
width="k" - ширина таблицы или ячейки столбца. Применяется для тегов:
<TABLE> - в % от ширины экрана или в пикселах;
<tr> и <td> - в % от ширины таблицы или в пикселах.
1 пиксел (1рх) равен одной минимальной точке экрана монитора.

bgcolor="цвет" - цвет фона;
background="url" - адрес фонофового графического изображения;
bordercolor="цвет" - цвет рамки.

cellpadding="m" - определяет расстояние между границей ячейки и ее содержанием в пикселах;
cellspacing="m" - определяет расстояние между ячейками таблицы в пикселах.

rowspan="2" - объединяет соседние ячейки строки в одну.
colspan="2" - объединяет соседние ячейки колонки в одну ячейку.

Эти атрибуты нам нужны будут для разметки нашей веб-страницы. А пока мы с вами (чтобы облегчить нам работу с таблицами) договоримся об одной простой вещи - мы будем вставлять комментарии. Зачем это нужно? Дело в том, что таблицы позволяют вложенность. И чтоб не запутаться мы сразу будем приучать себя комментировать таблицы.

В НТМЛ комментарии обозначаются следующим тегом <!-- --> и внутри может стоять что угодно и не будет отображаться на мониторе.

Для нашего первого сайта применим табличную структуру веб-страницы. Кстати, табличная разметка веб-страниц очень широко применяется в интернете. Большинство сайтов имеют именно такую структуру, почему так? - об этом вы узнаете попозже.

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

Предварительная структура:

  1. Шапка страницы или заголовок - Header.
  2. Наша информация (собственно то, что мы хотим донести пользователю+меню сайта+навигация и т.д.).
  3. Низ страницы или подвал - Footer.
Строим таблицу:
<table><!-- таблица разметки страницы Начало -->
	<tr><!-- Открываем 1-ю строку таблицы -->
		<td><!-- Открываем ячейку Шапка таблицы -->
			Раздел Шапка страницы			
		</td><!-- Закрываем ячейку Шапка таблицы -->
	</tr><!-- Закрываем 1-ю строку таблицы -->
	<tr><!-- Открываем 2-ю строку таблицы -->
		<td><!--  Открываем ячейку Раздела Наша информация -->
			Раздел Наша информация
		</td><!-- Закрываем ячейку Раздела Наша информация -->
	</tr><!-- Закрываем 2-ю строку таблицы -->
	<tr><!-- Открываем 3-ю строку таблицы -->
		<td><!-- Открываем ячейку Раздела Подвал -->
			Раздел подвал
		</td><!-- Закрываем ячейку Раздела Подвал -->
	</tr><!-- Закрываем 3-ю строку таблицы -->
</table><!-- таблица разметки страницы Конец таблицы -->

Определяемся с шириной таблицы. Если использовать атрибут width=100%, получаем ширину страницы на всю ширину окна броузера, независимо от разделительной способности монитора (полное заполнение экрана по ширине). Это так называемая "резиновая страница". Недостаток "резиновой страницы" - невозможно контролировать равномерное заполнение колонок в разделе 2 таблицы (если имеются колонки) на мониторах разного разрешения.

При выборе фиксированного размера страницы ширину выбираем немного меньше значения разрешения монитора по горизонтали. Например при разрешении монитора по горизонтали 800рх - можно выбрать ширину страницы 780рх, при разрешении 1024рх - 980рх, или 1000рх. Тут стандарта нет, экспериментируйте. Но есть маленький нюанс - отцентрируйте свою страничку (на случай просмотра ее на мониторах размером 21 и 24 дюйма). Для этого применим парный тег <center>, вот так:

  <center>
 <table width="980" border="1"><!-- таблица разметки страницы Начало -->
 
	......
  
  </table><!-- таблица разметки страницы Конец таблицы --> 
  </center>
 

Страница будет размещена на мониторах 21 и 24 в центре экрана.

В разделе 1 Шапка страницы рекомендую вставить название сайта в теге <H1> - заголовок, например так:
<h1>Пошаговая инструкция создания вашего сайта</h1> Конкретнее об этом поговорим в другом уроке (о внутренней оптимизации страницы), а пока просто запомните.

И добавляем фоновый рисунок с помощью атрибута background="pic.jpg" или можно задать цвет фона с помощью атрибута bgcolor="#00BFFF".

Раздел Шапка страницы у нас теперь запишется так:

 <table width="980" border="1"><!-- таблица разметки страницы Начало -->
<tr border="1" background="pic.jpg"><!-- Открываем 1-ю строку таблицы -->
	<td><!-- Открываем ячейку Шапка таблицы -->
		 <h1>Пошаговая инструкция создания вашего сайта</h1>			
	</td><!-- Закрываем ячейку Шапка таблицы -->
</tr><!-- Закрываем 1-ю строку таблицы -->

С разделом 1 закончили, переходим к Разделу 2.
В этом разделе размещаем меню сайта и собственно Нашу информацию. Получается две колонки. Соответственно в этом разделе в Таблицу разметки странички вставляем Таблицу Меню+Наша информация.

Ширину колонок можно указать в %, здесь это будет относительно ширины внешней таблицы, так как вторая таблица вложенная.

<table width="100%" border="0"><!-- Начало Табл. Меню+Наша инф-я -->
<tr>
<td width="20%">
Здесь у нас будет собственно Меню сайта
</td>
<td width="80%">
Здесь у нас будет наша информация
</td>
</tr>
</table><!-- Конец Таблицы Меню+Наша информация -->

Раздел 3 Подвал. Мы позже туда вставим счетчики посетителей, а пока запишем так: счетчики посетителей, и выровняем текст по центру с помощью атрибута align="center".

На этом разработка структуры веб-страницы закончена. Посмотрите что у нас получилось в целом:

<html>
<head>
<title>Имя (название) странички</title>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="keywords" content="теги, тег, веб-страничка, веб-страница, 
создать сайт, создать веб-страничку">
<meta name="description" content="Как создать веб-страничку. Теги. 
Структура веб-страницы">
</head>
<body>
<center>
 <table width="980" border="1"><!-- таблица разметки страницы Начало -->
	<tr border=1 background="pic.jpg"><!--Открываем 1-ю строку таблицы-->
	<td><!-- Открываем ячейку Шапка таблицы -->
		 <h1>Пошаговая инструкция создания вашего сайта</h1>			
	</td><!-- Закрываем ячейку Шапка таблицы -->
	</tr><!-- Закрываем 1-ю строку таблицы -->
	
	<tr><!-- Открываем 2-ю строку таблицы -->
	<td><!--  Открываем ячейку Раздела Наша информация -->
		
		
<table width="980" border="1" cellspacing="0">
<!-- Начало Таблицы Меню+Наша информация -->
<tr>
<td width="200">
Здесь у нас будет собственно Меню сайта
</td>
<td width="780">
Здесь у нас будет наша информация
</td>
</tr>
</table><!-- Конец Таблицы Меню+Наша информация -->

	</td><!-- Закрываем ячейку Раздела Наша информация -->
	</tr><!-- Закрываем 2-ю строку таблицы -->
	
	
	<tr><!-- Открываем 3-ю строку таблицы -->
	<td align="center"><!-- Открываем ячейку Раздела Подвал -->
		Раздел подвал<br>счетчики посетителей
	</td><!-- Закрываем ячейку Раздела Подвал -->
	</tr><!-- Закрываем 3-ю строку таблицы -->
</table><!-- таблица разметки страницы Конец таблицы --> 
</center>
</body>
</html>

Скопируйте НТМЛ код в блокнот и сохраните в файл shablon.html в отдельную папку, назовите ее - делаем сайт. Здесь будут ваши заготовки, пока вы не выберете название сайта. Об этом будет отдельный урок, а пока я вам советую не спешить с названием сайта. И скоро вы узнаете почему.

А пока можете просмотреть ваш файл в броузере (двойной клик на файле shablon.html) и поэкспериментировать с таблицами и атрибутами таблиц. Откройте в блокноте файл shablon.html, выберите "сохранить как" и сохраните его под другим именем, например shablon1.html и экспериментируйте с ним. А файл shablon.html пусть у вас лежит как шаблон вашей страницы. Для наглядности экспериментов впишите любой текст в каждую ячейку таблицы.

Вот вам задание для закрепления материала - создайте страницу с 3-мя колонками во втором разделе.

Справились? Тогда еще одно задание - посложнее. Как построить структуру веб-страницы с помощью только одной таблицы, используя следующие атрибуты таблиц:
rowspan - объединяет соседние ячейки строки в одну.
colspan - объединяет соседние ячейки колонки в одну ячейку.

Дальше мы узнаем как сделать меню сайта. Но это уже в следующем уроке.


Автор: Косов Сергей
03.01.2011


Все права защищены © 2010-2011   Сергей Косов     kosowlv@gmail.com    www.buckses.info