HTML таблицы

Для чего нужны таблицы?

На этот вопрос можно ответить однозначно это средство как для размещения текстовых и числовых данных,так и мощное средство дизайна.С помощью таблиц, Web-страницу можно разбивать на множество частей (ячеек) в которые потом помещать различную информацию в том числе и графические изображения.
Для указания начала и конца HTML-таблицы используются управляющие теги <TABLE> и </TABLE>. Они должны располагаться внутри раздела <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложение таблиц друг в друга (однако при таком заполнении следует соблюдать особую внимательность).
Внутри пары кодов <TABLE> каждая строка таблицы обрамляется парой кодов <TR> и </TR>, а каждая отдельная ячейка в строке - парой <TD> и </TD>. Заголовки в таблице помечаются парой <TH> и </TH>; они по существу аналогичны кодам <TD> и </TD>, за единственным исключением: текст заголовков выделяется полужирным шрифтом и размещается по центру.

Для того чтобы начать создавать таблицы надо сначало ознакомиться с основными элементами(Теги) с помощью которых они создаются.
С этого и начнём.

Основные теги для создания таблицы

<TABLE>...</TABLE>	Основной тег для таблицы
<TR>...</TR>	Создаёт строку таблицы
<TD>	Создаёт ячейку в строке
<TH>	Создаёт ячейку-заголовок
<CAPTION>...</CAPTION>	Создаёт заголовок таблицы

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

Для описания таблиц используется тег <ТАВLЕ> который может иметь слеующие атрибуты:

Элемент	Атрибуты	Назначение
<ТАВLЕ ...	HEIGHT="значение"	Задаёт высоту таблицы в % или в пикселях (px) от высоты всего окна.
	WIDTH="значение"	Задаёт ширину таблицы в % или в пикселях (px) от ширины всего окна.
	ALIGN="значение"	Задаёт режим горизонтального выравнивания на страницы Может принимать значение: left-(слева) center-(по центру) right-(справа)
	BGCOLOR="#"	Атрибут задаёт фоновый цвет ячейкам.
	BACKGROUND="URL"	Атрибут задаёт фоновый рисунок ячейкам которые не обладают собственным атрибутом.
	BORDER="число"	Задаёт ширину внешнего обрамления таблицы в пиксeлях.
	CELLPADDING="число"	Задаёт отступ между обрамлением таблицы и её содержимым в пикселях.
	CELLSPACING="число"	Задаёт ширину внутреннего обрамления в пикселях.
	BORDERCOLORLIGHT="цвет"	Задаёт цвет рамки слева используется только с атрибутом <BORDER>
	BORDERCOLORDARK="цвет"	Задаёт цвет рамки справа используется только с атрибутом <BORDER>
	rules="значение">	Атрибут задаёт линии между ячейками.Может принимать следующии значения:
		none-линий нет,используется по умолчанию.
		rows-линии отображаются только между строками.
		cols-линии отображаются только между столбцами.
		groups-линии отображаются только между группами строк THEAD ;TFOOT TBODY или группами столбцов COLGROUP и COL.
		all -линии отображаются между строками и столбцами.
	frame="значение"	Атрибут указывает какие стороны кадра окружающие таблицу,будут видимы.Возможные значения:
		above-только верхняя часть
		hsides-только верхняя и нижняя часть.
		lhs-только левая часть
		box-все четыре части.
		void-сторон нет.Это значенме используется по умолчанию.
		below-только нижняя часть.
		vsides-только левая и правая части.
		rhs-только правая часть.
		id-имя для ссылки.

Создание строки таблицы — тег <ТR> Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR></ТR>. Тег <TR> может иметь следующии атрибуты:
<TR....	align	Задаёт режим горизонтального выравнивания внутри строки,он может иметь значения: left -слева center -по середине right -справа.
	valign	Задаёт режим вертикального выравнивания внутри строки,он может иметь значения: bottom -внизу middle -по середине top -вверху.
	bgcolor	Задаёт цвет фона для строк.
	id	Задаёт имя для ссылки.

Определение ячеек таблицы - тег <ТD> Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Число тегов <ТD> в строке определяет число ячеек. Тег <TD> Mожет иметь следующии атрибуты:
<ТD....	align	Задаёт режим горизонтального выравнивания внутри ячейки,он может иметь значения: left - влево center - по середине right - вправо.
	valign	Задаёт режим вертикального выравнивания внутри ячейки,он может иметь значения: bottom - внизу middle - по середине top - вверху.

	bgcolor	Задаёт цвет фона ячеек.

	id	Задаёт имя для ссылки.

	width	Задаёт ширину ячейки в пикселях или %.

	height	задаёт высоту ячейки в пикселях.

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

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

	nowrap	блокирует перенос по словам в пределах ячейки в зависимости от других параметров таблицы.

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

Подробнее на примерах, можно посмотреть Здесь

А далее рассмотрим тему о том, как создаются гиперссылки.

<<< Далее >>>