Создание HTML

Здравствуйте мне просто нечего было делать так я решил научить вас как создавать html страницы!!!!!

1. Основы HTML.

Любой HTML-документ состоит из элементов, определяющих структуру документа, его содержание и пр. Каждый элемент может содержать другие элементы. Элементы образуются с помощью тегов. В тексте теги заключаются в угловые скобки. Примеры тегов:
<br> - тег конца строки - текст начинающийся после выводится на экран с новой строки.
<hr> - горизонтальная линия.
<I>Техт напечатанный курсивом.</I> - текст находящийся между этими двумя тегами будет выделен курсивом.

Теги бывают двух видов: начальные (или стартовые) и конечные, определяющие соответственно начало и конец данного элемента. Например, при выделении курсивом <I> - является начальным, а </I> - конечным тегом. Конечные теги по написанию совпадают с начальным, но после первой угловой скобки ставится косая черта. Некоторые элементы (как например переход на новую строку и тег горизонтальной линии) не требуют конечных тегов. Теги могут записываться большими или маленькими буквами. Для наглядности и лучшего поиска ошибок кое-кто пишет начальные теги большими буквами, а конечные маленькими.

Комментарии в HTML-файле можно записать двумя способами.
Первый: с помощью тегов:
<Comment> Комментарий, не обрабатываемый броузером.</Comment>.
Второй, более часто используемый, заключается в использовании восклицательного знака и обрамлении текста комментария двойными тире. Например:

Ниже приведен пример простейшего HTML-документа.

Теги образующие этот документ встречаются практически в каждом HTML-файле. <HTML> </HTML> - сообщает броузеру, что данный файл является HTML-файлом. Этот тег является самым внешним, так как между его начальным и конечным тегами должна находиться вся страница. Большинство броузеров просматривают HTML-документы и без этих тегов. Но рекомендуется их все-же использовать для совместимости с теми броузерами которые без этих тегов не в состоянии воспринять документ.
<HEAD></HEAD> - заголовок документа - служит для формирования общей структуры документа. Необязателен в том случае, если не нужно использовать элементы которые кроме заголовка нигде описать нельзя. Чаще всего используемым элементом является <TITLE>.
<TITLE></TITLE> - Отображает название HTML-документа в заголовке окна броузера (не в документе).
<BODY></BODY> - тело документа, заключает в себе весь текст, таблицы, рисунки, ссылки и т.д. выводимые на экран. В данном случае на экран будет выведена строка:Пример простейшей Web-страницы.
Внутри стартового тега BODY можно установить ряд необязательных атрибутов обеспечивающих установки данной страницы.
background="путь к файлу" - страница заполняется данным графическим файлом. Этот файл должен быть формата gif или jpg. Если файл меньше размеров страницы, то рисунок помещается в левый верхний угол, а дальнейшее заполнение происходит слева напрво и сверху вниз.
bgcolor="#rrggbb"- задание цвета фона.
text="#rrggbb" - задание цвета текста

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

Основные теги HTML.

1. Теги включаемые в <HEAD>.

2. Форматирование текста.

При наборе текста в HTML-документе следует учитывать, что броузер сам форматирует документ вне зависимоти от числа пробелов, нажатий Enter и т.д.Все слова выводятся в одну строку, если не влазят переносятся на новую, переход на новую строку, отступ полученный с помощью пробелов (учитывая, что текст должен сохраняться в файле не содержащем символов форматирования, более сложного вроде и не придумаешь) - игнорируется. Поначалу весь текст кажется набранным в Worde в виде одного абзаца с выравниванием по левому краю. Все форматирование в HTML-документе: шрифты, абзацы, выравнивание придется делать самостоятельно, с помощью тегов.

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:
align="left" - выравнивание по левому краю.
align="center" - выравнивание по центру.
align="right" - выравнивание по правому краю.
Например:
<h3 align="right">Заголовок выравненный вправо</h3>:

Заголовок выравненный вправо

<P></P> - элемент абзаца. Обычно используется только начальный тег, поскольку начало нового абзаца, означает конец старого. Следует учитывать, что начало нового абзаца броузерами понимается несколько иначе, чем текстовыми редакторами. Обычно считается, что что каждый новый абзац начинается с красной строки. В броузере же красную строку приходится организовывать другими средствами. Отличие же одного абзаца от другого абзаца от другого сводится к расстоянию большему между абзацами, чем между строками.
Позволяет использование атрибута выравнивания align:
align="left" - выравнивание по левому краю.
align="center" - выравнивание по центру.
align="right" - выравнивание по правому краю.
align="justify" - выравнивание по ширине.
Например следующий код:

<HR> -горизонтальная линия - наверное самый простой элемент оформления. Конечного тега не имеет, допускает ряд атрибутов:
Задание толщины линии:
size=толщина в пикселах.
Задание длины линии:
width=длина в пикселах.
width=длина в процентах.
Выбор цвета линии:
color="#rrggbb" (подробнее о цвете смотри в пункте "Цвета")
Способ выравнивания:
align="left" - выравнивание по левому краю.
align="center" - выравнивание по центру.
align="right" - выравнивание по правому краю.
align="justify" - выравнивание по ширине.
Примеры:
Просто линия:
<HR>

Линия длиной 60% размера экрана, прижатая к левому краю.
<hr width=60% align="left"> Линия длиной 100 пикселов и высотой 13.
<hr width=100 size=13>

<PRE></PRE> - Лучший способ печати стихов Маяковского, исходников программ и всего что требует многочисленных перевода строки и пробелов. Позволяет выводить на печать отформатированный текст. Текст будет выведен в том виде в каком он был подготовлен пользователем, т.е сохраняет при выводе на экран пробелы и символы конца строки. Например нижеследующий код

ТАМАРА И ДЕМОН

<CENTER></CENTER> - устанавливает выравнивание содержимого по центру.

<DIV> </DIV> - позволяет установить способ выравнивания не начиная нового абзаца. Используются следующие атрибуты:
align="left" - выравнивание по левому краю.
align="center" - выравнивание по центру (эквивалентно тегам <CENTER></CENTER>)
align="right" - выравнивание по правому краю.
align="justify" - выравнивание по ширине.
Пример кода:

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

<BASEFONT></BASEFONT> - Определяет базовый (основной размер шрифта). Для этого используется атрибут size=базовый размер шрифта. Размер шрифта может лежать в пределах от 1 до 7 (по умолчанию 3).

<FONT></FONT> -определение типа, размера и цвета шрифта. Абсолютный размер шрифта задается при помощи size: size=5.
Этот атрибут может принимать значения от 1 до 7.
Размер шрифта может задаваться относительно базового (по умолчанию равного 3): size=+число
size=-число
При назначении относительной величины необходимо учитывать величину базового размера. Обе они в сумме должны лежать в пределах от 1 до 7.Так при базовом размере равном 3, относительный размер может находиться в пределах от -2 до +4. Если величина не укладывается в этот предел то используется ближайший к возможному (1 или 7).
Для элемента фонт можно задать атрибут цвета:
color="цвет" (см. пункт цвет).
Атрибут face позволяет задать тип шрифта:
face="название шрифта"
При использовании этого атрибута следует учитывать следующее: при загрузке страницы загружается название шрифта, а не сам шрифт. Шрифт броузер ищет на машине пользователя, а не найдя выводит содержимое своим стандартным шрифтом. Т.е. если вам удастся раскопать какой-то сверхкрасивый шрифт не спешите включать его на свою страницу
. Пример использования:
<FONT size=5 face="Courier"> Шрифт типа Courier</font>

<B></B> - выделение текста полужирным шрифтом.

<SUB></SUB> - текст записывается как нижний индекс.

<SUP></SUP> - текст записывается как верхний индекс.

Создание списков.©©

Список состоит из пунктов. Каждый пункт начинается с новой строки. В зависимости от типа списка в начале пункта ставится или маркер начала пункта (может быть произвольный рисунок) или номер пункта (для нумерованных списков). В HTML-документах часто в виде списков оформляют наборы ссылок (см. начало раздела).

Маркированные списки

Маркированный список создается с помощью тегов: <UL>, </UL>, <LI> и </LI>. Теги <UL> и </UL> показывают соответственно начало и конец списка. Могут иметь атрибут shape, принимающий параметры "disk", "circle" и "square", определяющие тип маркера списка. По умолчанию используется "disk". Теги <LI> и </LI> являются вложенными в элемент UL, и определяют начало пункта списка. Поскольку обычно начало следующего пункта совпадает с концом предыдущего, то тег </LI> часто опускается.

Маркированный список

и его код

Маркированный список:

Первый пункт.
Второй пункт.

Маркированный список:

<UL type="square">

<LI>Первый пункт.

<LI>Второй пункт.

</UL>

Нумерованные списки

Применение нумерованных списков аналогично применению маркированных списков. Начало конец списка определяются с помощью тегов <OL> и </OL>. Способ нумерации задается с помощью атрибута type. В нижеследующей таблице приведены способы нумерации.

Атрибут	Вид нумерации
type="1"	1, 2, 3, 4, ...
type="i"	i, ii, iii, iv, ...
type="I"	I, II, III, IV, ...
type="a"	a, b, c, d, ...
type="A"	A, B, C, D, ...

Нумерованный список

и его код

Нумерованный cписок:

Первый пункт.
Второй пункт.

Нумерованный список:

<OL type="I">

<LI>Первый пункт.

<LI>Второй пункт.

</OL>

Списки с определениями

Списки с определениями предназначены для создания списков каждый пункт которых, определялся бы в самом списке. Другое название подобного вида списка - словари. Имеется набор слов каждое из которых нуждается в определении. Что-нибудь в следующем роде:

Списки с определениями создаются с помощью тегов трех видов: <DL></DL>, <DT></DT> и <DD><DD>
DL - определяет начало и конец списка
DT - элемент списка
DD - определение списка.

В элементах DT и DD конечные теги можно опускать. Например следующий код

- фрукт разной степени зрелости употребляемый в пищу человеком.

- растение не произрастающее на Северном полюсе.

Вложенные списки

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

Кроме того есть люди исспользующие вложенные списки для создания отступов. Чем больше вложенность, тем больше отступ. Что-нибудь в следующем роде:

Цвета в HTML

RGB-код.

Цвет в HTML определяется так называемым RGB-кодом. Любой цвет представляется в этом случае как комбинация красного (R), зеленого (G) и синего(B) цветов. Доля каждого цвета определяется двухразрядным шестнадцатиричным числом. В Windows это соответствует режиму монитора True Color (24 разряда). Цвет задается для элементов имеющих атрибут color по следующей маске: "#rrggbb", где
rr - интенсивность красного цвета.
gg - интенсивность зеленого цвета.
bb - интенсивность синего цвета.
Например:
<BODY bgcolor="#00ff3a" text="#8d1023"> - установка цвета фона и выводимого текста.
<FONT COLOR="#000080"> - установка цвета шрифта.

RGB-код не единственный способ установки цвета. Для 16 основных цветов возможна запись на английском языке. Одним из удобств этого способа записи является надежность: цвета будут такими же (или почти такими) в любом броузере, при любом количестве цветов.
Например:
<FONT COLOR="green"> - установка зеленого цвета шрифта.

Таблица основных цветов.

Русское название	Английское название	RGB-код
Аквамарин	aqua	#00ffff
Белый	white	#ffffff
Желтый	yellow	#ffff00
Зеленый	green	#008000
Каштановый	maroon	#800000
Красный	red	#ff0000
Оливковый	olive	#808000
Пурпурный	purple	#800080
Светло-зеленый	lime	#00ff00
Серебристый	silver	#c0c0c0
Серый	gray	#808080
Сизый	teal	#008080
Синий	blue	#0000ff
Ультрамарин	navy	#000080
Фуксиновый	fushsia	#ff00ff
Черный	black	#000000

Поскольку в Internet люди лазят с самыми разными разрешениями и цветовыми режимами перед загрузкой своей страницы следует испытать ее во всех доступных режимах: 256 цветов, 24 разряда и т.д., поскольку часто один и тот же цвет в разных режимах выглядит по разному. Хуже того, в разных броузерах одни и теже цвета также выгледят по разному (попробуй загрузить одну страницу в Netscape и Explovere).

Создание ссылок

Внешние ссылки

Внешние ссылки используются для перехода на другие страницы. Для создания ссылки используется тег a. Для создания ссылки используется следующий атрибут:
href="адрес"
Объект по которому нужно щелкнуть для перехода(текст или рисунок) располагается между начальным и конечным тегами.

Например нижеследующий код:
Для перехода в поисковую систему <a href="http://www.yandex.ru">жми здесь.</a>

выдаст следующую строку:
Для перехода в поисковую систему жми здесь.

Ссылка в виде рисунка (при создании баннеров) осуществляется аналогично:
<A HREF="http://www.yandex.ru"><IMG SRC="wpe6.gif" align="middle"></a>

Внутренние ссылки

Внешние ссылки нужны для переходов между страницами. Для перемещений внутри одной и той же страницы используются внутренние ссылки.

Для того, чтобы организовать переход следует сначала создать метку. Метка создается с помощью тега a атрибута name.

Переход к этой метке осуществляется аналогично переходу к внешней ссылке, но перед меткой ставится знак #.

Существуют зараннее определенные ссылки. bottom - переход в конец документа. top - переход в начало документа.

Сочетание внешних и внутренних ссылок.

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

Осуществляется это комбинацией адреса этой страницы и внутренней метки:
<A HREF="http://web.ru#metka">

Ссылка на электронный ящик.

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

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

Например:
Использование следующего кода
Звоните <A HREF="mailto:fiksX&yandex.ru">мне</a>

Рисунки

Для вставки рисунков используется тег <IMG>, использующийся для загрузки готовых графических файлов в формате *.gif и *.jpg. Этот тег имеет следующие атрибуты:
src="имя файла" - указатель на файл графики в формате gif или jpg. Файл может находиться где-угодно: в текущем каталоге, или где-нибудь на другом сервере.
alt="название рисунка" - выводит текст в том месте страницы, где должен находиться рисунок, в том случае если рисунок еще не загружен или не найден.
width = ширина рисунка в пикселах.
height = высота в пикселах.
Можно обойтись и без этих параметров. В этом случае броузер выведет на экран рисунок таких размеров какие указаны в самом файле рисунка. Использование же этих атрибутов позволяет броузеру выводить текст после изображения, еще до загрузки рисунка (как известно рисунки грузятся значительно дольше текста, поэтому возможность читать текст в ожидании картинок является большим удобством ).

Этими же параметрами можно пользоваться и при изменении размеров изображений. Какие бы числа поставлены не были бы на экран (после соответствующих сжатий-растяжений) будет выведено изображение именно таких размеров. Таким HTML-свойством можно пользоваться для увеличения картинок (картинку меньшего размера можно выдать за больший, с соответствующей потерей качества изображения). Уменьшать же смысла не имеет, т.к. лучше сделать уменьшенный вариант рисунка, экономия места все-таки.

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

hspace=число символов - задает пустое пространство справа и слева от рисунка (пустое пространство принимает цвет фона).
vspace=число символов - задает пустое пространство сверху и снизу от рисунка.
border=число пикселов - толщина рамки вокруг рисунка. Обычно используется в том случае если рисунок является одновременно и ссылкой. В этом случае цвет рамки позволяет определить использовалась ссылка или нет. Если этот атрибут равен нулю, то рамки нет.

Создание таблиц

Элементы создающие таблицу

При создании таблиц используется принцип вложения: внутри основного элемента (TABLE) создаются (при помощи элементов TR ) горизонтальные строки, а внутри них - ячейки (TD или TH).

Элемент TABLE

- внешний элемент таблицы. Кроме своей основной функции (определение таблицы, ее начала и конца), позволяет задать основные параметры таблицы.

Для задания заголовка таблицы служит необязательный элемент CAPTION. Заголовок выводится вне рамок таблицы. Заголовок записывается между начальным и конечным тегами этого элемента. Элемент находится между тегами <TABLE> и </TABLE>. Способ выравнивания содержимого ячеек устанавливается с помощью атрибута align:
align="left"- влево,
align="center" - по центру,
align="right" - вправо.

Ширина таблицы задается в пикселах, или в процентах - по отношению к ширине окна.
width=400
width=80%

Для управления видом рамки используются два атрибута: border и cellspacing.
border - ширина внешней рамки.
cellspacing - ширина внутренней рамки.
Откровенно говоря приведенные выше описания этих атрибутов во-первых: слишком просты, во-вторых очень неполностью отражают суть дела. Но мне приходилось видеть такие кошмары объясняющие про имитацию трехмерности и способы освещенности, что уж лучше вообще ничего не описывать. Следуя принципу лучше один раз увидеть, чем сто раз услышать предлагаю посмотреть на три таблички. Кто как увидит, тот пусть так и понимает.

Нулевое значение одного из этих параметров дает соответственно отсутствие внешней или внутренней рамки.

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

Кроме того имеются атрибуты:
bgcolor - цвет фона таблицы,
bordercolor - цвет внешней рамки.

И пооследнее. Выравнять саму таблицу можно с помощью хорошо извесных элементов CENTER и DIV.

Элемент TR

Элемент создающий строку таблицы. Конечный тег не обязателен, т.к. строка кончается там, где начинается следующая. Понятно, что этот элемент содержится внутри элемента TABLE. Каждый новый элемент создает новую строку. После него идет список ячеек данной строки образуемый элементами TD и TH.

Для выравнивания содержимого всех ячеек в строке можно использовать атрибут align и присваивать ему значения left, center и right. Содержимое ячеек можно выравнивать по вертикали:
valign="top" -
valign="middle" -
valign="bottom" -

Элемент TH

Используется внутри элементов-строк TR. Конечный тег можно не записывать, хотя следует проверять правильность создания таблицы. У меня бывали случаи когда без них не рисовались вертикальные линии разделители ячеек. После установки конечных тегов все пришло в норму. Элемент TH предназначен для создания ячеек-заголовков. Популярное объяснение того, что это такое и зачем нужно. Таблица состоит из колонок и строк. Ячейки первой строки обычно содержат названия колонок. Вот для этих-то целей по замыслу создателей и исспользуется теги и . Все содержимое ячейки образуемой ими выводится на экран полужирным шрифтом. Разумеется никто не запретит создать всю таблицу полужирным шрифтом.

Элемент TH по умолчанию обеспечивает выравнивание внутри ячейки по середине. Для каждой отдельной ячейки можно задать можно использовать атрибут выравнивания align с соответствующими параметрами: left, right и center.
Можно задать размеры ячеек:
width=ширина в пикселах.
height=высота в пикселах.

Ячейки таблицы можно объединять. Для этого используются атрибуты rowspan и colspan, которые служат для объединения ячеек соответственно в одном столбце и одной строке.

Например при задании атрибута rowspan=3 соответствующая ячейка займет не одну, а 3 строки. Аналогично используется атрибут colspan. Примеры исспользования этих атрибутов смотри здесь.

Элемент TD

Аналог элемента TH, но шрифт внутри ячеек используется обычный и выравнивание не по центру, а по левой стороне. Использование этого элемента аналогично использованию элемента TH.

Ниже приведен пример таблицы с образующим ее кодом.

Использование таблиц

Использование табиц при построении Web-страниц, гораздо шире, чем просто создание страниц. Это объясняется тем, что HTML-не очень то богат на красивое оформление. Вот и получается, что в попытках хоть как-то нестандартно оформить страницу, или просто удобно рассположить для просмотра материал используются рисунки, таблицы и т.д., хотя тот же Word имеет множество среств которые и не снились в Web: печать текста на фоне рисунка, расположение рядом рисунка и текста, многоколоночный текст и т.д. Если создателя Web-страницы не удовлетворяет стандартная последовательность то он применяет таблицы или же рисует рисунки которые и помещаются на страницу.

Таблица из одной ячейки

Простейшее применение таблицы это оформление заголовковкаких либо фраз для смысл которых не способен передать шрифт (цветной, курсив и т.д.) Создается рамка из одной ячейки в в которую и помещается текст.
Вот примерный вариант кода и сама таблица:

Размещение текста и рисунка рядом.

Еще одна часто возникающая проблема размещение текста и рисунка рядом ( справа рисунок, слева текст или наоборот). Все рисунки считаются такм же равноправным элементом как и техт. Напимер, вполне возможен такой код:

Если вам нужно такое совмещение рисунков с текстом (например, при записи формул с интегралами), можно так и оставить, обычно же исспользуют перевод на новую строку или начало абзаца кому как удобнее. Сложнее дело обстоит когда нужно напротив рисунка напечатать несколько строк текста. Например вот так:

В этом случае просто создают таблицу состоящую из двух колонок. В одну вставляется рисунок, во вторую текст. А чтоб никто не догадался как это было сделано атрибуту border присваивают значение равное нулю. Для вышеприведенного оформления использовался следующий код:

Создание сложных таблиц

При создании сложных таблиц исспользуют два основных приема: объединение ячеек и вставка таблицы в уже готовую таблицу.

Объединение ячеек.

Объединение ячеек происходит с помощью атрибутов rowspan и colspan элемента TD. Эти два атрибута могут совместно использоваться в одном элементе.

Таблица в таблице.

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

Спецсимволы

Использование спецсимволов

Существует ряд символов в использование которых могут возникнуть трудности. В первую очередь это символы используемые броузером для разметки текста, например: угловые скобки - <, >, кавычки - " и т.д. Затем идут разного рода символы которых просто нет на клавиатуре: ®, ¶, °, нерастяжимый пробел и др. Есть два способа вывода подобных символов на экран.
Первый (редко встречающийся): используя коды символов. Например, знак "зарегистрировано" код которого 174 можно вывести на экран с помощью &#174.
Второй заключается в использовании мнемонической кодировки. Сначала идет символ &, затем кодировка символа и завершает точка с запятой. Например, для символа ¶ запись будет следующей: ¶ Таблица символов приведены ниже.

Таблица спецсимволов

Название	Символ	Мнемоническая кодировка
Прямая кавычка	"	"
Амперсанд	&	&
Знак "больше"	>	>
Знак "меньше"	<	<
Знак параграфа	§	§
Знак авторского права	©	©
Знак "зарегестрировано"	®	®
Знак градуса	°	°
Знак "микро"	µ	µ
Знак абзаца	¶	¶
Нерастяжимый пробел
Угловая кавычка, "левая"	«	«
Угловая кавычка, "правая"	»	»
Знак "плюс-минус"	±	±
Знак отрицания	¬	¬

Следует учитывать, что с символами проблема та же, что и со всем остальным в HTML - совместимость. Скажем вот такой красивый знак йены: ¥ смогут рассмотреть пользователи Internet Explover. Если же вы смотрите через Netscape то увидите знак вопроса.
Символы приведенные в таблице работают нормально. По крайней мере в Explovere и Navigatore стоящих на моем компьтере.

Таблица с объединением
Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4
	Ячейка 5		Ячейка 6
			Ячейка 7
Ячейка 8