Чертёж пятый: Таблицы

Можно смело утверждать, что тег <TABLE>, с которым мы будем работать сегодня, один из самых главных и сложных и, в то же время, самых незаметных тегов. Без использования таблиц нельзя построить грамотную красивую страничку, ну, разве что, самую простенькую. Таблицы — это что-то вроде шкафчиков с полочками, на которых мы расставляем различные вещи. Можно, конечно, всё разложить и на полу…

Но мы желаем стать настоящими мастерами, поэтому принимаемся за изучение таблиц.

  • Для начала создадим что-то вроде фотогалереи на страничке Погромыча, используя таблицу для разметки. Открой файл pogrom.htm и добавь в него выделенные строки:
    • <HTML>
<HEAD>
	<TITLE>Моя домашняя страничка</TITLE>
</HEAD>
<BODY bgcolor="#ffddff" text="#880088">
	<H2 align="center"><FONT color="#ff0088">
	Мой друг Погромыч</FONT></H2>
	<P>В нашей дружной семье Погромыч оказался совершенно
	случайно…
	<TABLE border="1">
		<TR>
			<TD align="right">
				Погромыч знакомится с Дусей
			</TD>
			<TD>
				<IMG src="images/foto1.jpg">
			</TD>
		</TR>
		<TR>
			<TD align="right">
				<IMG src="images/foto2.jpg">
			</TD>
			<TD>
				Уроки музыки
			</TD>
		</TR>
	</TABLE>
	<CENTER>
	<A href="index.html"><img src="images/home.jpg"></A>
	<A href="dusja.htm"><img src="images/dusja.jpg"></A>
	<A href="klava.htm"><img src="images/klava.jpg"></A>
	</CENTER>
</BODY>
</HTML>

Как ты уже понял, теги <TABLE> и </TABLE> задают саму таблицу. Таблица состоит из строк (<TR> и </TR>), которые разбиваются на ячейки тегами <TD> и </TD>.

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

Все табличные теги имеют атрибуты, с большей частью которых ты уже знаком, но всё же перечислим основные из них:

border — толщина границы;

width, height — ширина и высота (таблицы, строки или ячейки — всё зависит от того, в каком теге этот атрибут записан), может задаваться в точках или в процентах;

align, valign — выравнивание по горизонтали (left, right, center) и по вертикали (top — по верхнему краю, bottom — по нижнему краю, center) содержимого ячейки; если этот атрибут находится в теге <TABLE>, то выравнивание относится к самой таблице, а не к её содержимому;

bgcolor — цвет фона (таблицы, строки или ячейки);

background — фоновый рисунок (с помощью этого атрибута ты сможешь на фоне фотографии разместить текст, бегущую строку или картинку — это пока единственный способ сделать страничку многослойной);

cellpadding, cellspacing — поля внутри ячеек и просветы между ячейками;

colspan, rowspan — пропуск колонок (ячеек) или строк.

  • Пожалуй, из всех этих атрибутов стоит подробнее разобраться с двумя последними. Добавляем новые строки:
    • 	<TABLE border="1" cellpadding="5" width="80%" align="center">
		<TR>
			<TD colspan="3" align="center">
				<H2>Жизнь Погромыча в фотографиях</H2>
			</TD>
		</TR>
 		<TR>
			<TD rowspan="2" valign="center" align="center"
 			width="10%">
				<H2>Ф
				<P>О
				<P>Т
				<P>О
				<P>Г
				<P>А
				<P>Л
				<P>Е
				<P>Р
				<P>Е
				<P>Я
				</H2>
			</TD>
 			<TD align="right" width="45%">
 				Погромыч знакомится с Дусей
 			</TD>
 			<TD width="45%">
				<IMG src="images/foto1.jpg">
			</TD>
		</TR>
		<TR>
			<TD align="right">
				<IMG src="images/foto2.jpg">
			</TD>
			<TD>
				Уроки музыки
			</TD>
		</TR>
	</TABLE>

Теперь в таблице появились две больших ячейки: ячейка с заголовком таблицы, объединяющая три ячейки по горизонтали (colspan="3"), и ячейка с текстом Галерея, объединяющая две ячейки по вертикали (rowspan="2"):

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

  • Теперь можно убрать границу таблицы, заменив в теге <TABLE> атрибут border="1" на border="0".
  • Задание простое: продолжи галерею Погромыча, добавив в таблицу ещё 2-3 строки с фотографиями. Не забудь про атрибуты alt, width и height тега <IMG>, которые ради экономии места были опущены.
  • Задание посложнее: проследи, чтобы левая колонка (в которой написано ФОТОГАЛЕРЕЯ) простиралась на все строки таблицы.
  • Задание сложное: создай страничку Карта сайта (karta.htm), на которой в виде таблицы (или таблиц) изобрази содержимое твоего сайта, например, так:
Главная
Погромыч
Погромыч знакомится с Дусей
Уроки музыки
Погромыч учится плавать
Бобик в гостях у Погромыча
Дуся
   
   
   
   
Клава
   
   
   
   
Карта

Сделай содержимое ячеек этой таблицы ссылками на соответствующие странички.

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


  • Если ты наивнимательнейшим и подробнейшим образом будешь выполнять последнее задание, то столкнёшься с такой проблемой — надо, чтобы фотографии на карте (или подписи к ним) ссылались не на всю страничку pogrom.htm, а на какое-то определённое её место. Как этого добиться?
    • в файле pogrom.htm добавь тег <A name="foto1">:
      <TD align="right" width="45%">
	<A name="foto1">
	Погромыч знакомится с Дусей
</TD>
<TD width="45%">
	<IMG src="images/foto1.jpg">
</TD>
      который ставит метку с именем foto1 в точку перед словом Погромыч (совсем необязательно, чтобы это имя совпадало с именем файла с фотографией);
    • в файле karta.htm ссылку на первую фотографию запиши так:
      • <A href="pogrom.htm#foto1">

Заметим, что если мы будем ссылаться на метку, поставленную на той же страничке, то имя странички записывать не надо:

<A href="#foto1">

а вот значок метки (#) ставить необходимо.

И ещё одно замечание: в отличие от тега <A href…>, обязательно имеющего закрывающий тег </A>, его «родственника» <A name…> «закрывать» не обязательно.

    • и так для всех «местных» ссылок (этот вид ссылок не имеет общепринятого названия, поэтому между нами будем их называть «местными», они ведь ссылаются на определённое место на страничке).

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


Следующий урок