Урок 1 – Таблица

1. Общее

Это очень полезная вещь, т.к. с помощью таблиц можно очень аккуратно сделать вашу страницу!
Таблица, по сути, это набор столбцов (вертикально) и строк (горизонтально).
Ячейки таблицы, могут содержать массу элементов, от текста, до графики.

2. Тэг < Table > и его атрибуты

Вся таблица должна быть заключена в < TABLE >…< /TABLE >
Это основной тэг, без него нельзя. Он имеет ряд атрибутов, которые создают внешний вид таблицы – разделители, обрамление и др. Они бывают следующие:

Align – выравнивание таблицы относительно страницы. Возможные значения: center, left, right.

Background – строка, определяющая рисунок для заднего фона вашей таблицы.

Bgcolor – определяет задний фон таблицы, виден, если у вас нет тега background.

Border – толщина рамки в пикселях. Может принимать значения от 0 (рамки нет) и так далее.

Bordercolor – цвет рамки таблицы.

Сellspacing – задает расстояние между ячейками таблицы.

Cellpadding – задает расстояние между содержимым ячейки и ее рамкой.

Rules – описывает рамки вокруг таблицы. Может принимать следующие значения:
  all – Отображает все части рамки внутри таблицы
  cols – Отображает все вертикальные рамки внутри таблицы
  none – Удаляет все рамки вокруг таблицы
  rows – Отображает все горизонтальные рамки внутри таблицы

Title – всплывающий текст при наведении мышкой.

Width – ширина таблицы в процентах или пикселях.

Пример:

< table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" >

3. Тэг < TR > и его атрибуты

< TR >…< /TR > – Это тэг строки таблицы. Количество трок в таблице зависит от его количества пар этого тэга. Он имеет следующий атрибуты, атрибуты выравнивания:

Align – выравнивание текста в ячейке:
  left – по левому краю
  rigth – по правому краю
  center – по центру

Valign – выравнивает текст в ячейке по вертикали:
  top – по верхнему краю
  middle – по центру
  bottom – по нижнему краю

Пример:

< TR align=right> < /TR >

4. Тэг < TD > и его атрибуты

< TD >…< /TD > – Это тэг ячейки таблицы. Он содержится внутри тэга < TR >. Она имеет следующие атрибуты:

Height - Указывает высоту элемента в процентах или пикселях.

Align – выравнивание текста в ячейке:
  left – по левому краю
  rigth – по правому краю
  center – по центру

Valign – выравнивает текст в ячейке по вертикали:
  top – по верхнему краю
  middle – по центру
  bottom – по нижнему краю

Colspan – указывает кол-во столбцов которое объединено в одной ячейке, по умолчанию =1.

Rowspan – указывает кол-во строк которое объединено в одной ячейке, по умолчанию = 1.

Title – всплывающий текст при наведении мышкой.

Пример:

< TD height=70 title="пример">< /TD >

5. Тэг < TH > и его атрибуты

< TH >…< /TH > – Этот тэг определяет заголовок для столбца в таблице. Находится всегда в тэге < TR >. Имеет следующие атрибуты:

Bgcolor – цвет фона.

Bordercolor – цвет рамки элемента.

Height - Указывает высоту элемента в процентах или пикселях.

Align – выравнивание текста в ячейке:
  left – по левому краю
  rigth – по правому краю
  center – по центру

Valign – выравнивает текст в ячейке по вертикали:
  top – по верхнему краю
  middle – по центру
  bottom – по нижнему краю

Colspan – указывает кол-во столбцов которое объединено в одной ячейке, по умолчанию =1.

Rowspan – указывает кол-во строк которое объединено в одной ячейке, по умолчанию = 1.

Title – всплывающий текст при наведении мышкой.

Пример:

< TR >< TH >Заголовок< /TH >< /TR >

6. Общий пример таблицы

< table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" >
< TR >
< TH >Заголовок столбца 1< /TH >< TH >Заголовок столбца 2< /TH >
< /TR >
< TR align=right >
< TD height=70 title="пример">Ячейка столбца 1, ряд 1< /TD >< TD >Ячейка столбца 2, ряд первый< /TD >
< /TR >
< TR align=center >
< TD >Ячейка столбца первый, ряд 2< /TD >< TD >Ячейка столбца 2, ряд 2< /TD >
< /TR >