В своей основе таблицы представляют собой ячейки, объединенные в строки и столбцы. Вы имеете возможность управлять характеристиками вывода на уровне всей таблицы, уровне строки и каждой отдельной ячейки. Минимальный набор тегов для описания таблицы включает <tab1e>, <tr>и <td>. Приводимый ниже код HTML демонстрирует базовую структуру таблицы с четырьмя ячейками:
<table> <tr>
<td>cell l</td><td>cell 2</td>
</tr> <tr>
<td>cell 3</td><td>cell 4</td>
</tr> </table>
Teг <table> определяет содержимое таблицы. Каждая строка задается тегом <tr> и состоит из множества ячеек данных (или заголовков). Количество столбцов определяется количеством ячеек в строке. Ячейки с данными обозначаются тегом <td>.Ячейка таблицы может содержать любые данные, пригодные для вывода HTML-документом (форматированный текст, изображения, мультимедийные элементы и даже другие таблицы).
Тег <table>
<table>.. ,</table>
Тег таблицы <table> определяет начало и конец таблицы. Закрывающий тег обязателен. Его отсутствие может привести к неверной обработке таблицы некоторыми браузерами.
Атрибуты:
align = left | right | center
Задает выравнивание таблицы в текстовом потоке (аналогично атрибуту выравнивания в теге изображения <img>). Значение по умолчанию left. Значение center поддерживается не всеми браузерами, поэтому более надежно для выравнивания по центру страницы использовать теги, находящиеся вне тега таблицы (например, <center> или <div>).
background = url
Определяет изображение, которое будет служить фоном для таблицы.
bgcolor = "#rrggbb" или название цвета
Задает цвет фона для всей таблицы.
border = число
Задает ширину (в пикселях) границы вокруг таблицы и ее ячеек. Задание border=0 полностью отменяет появление границы. Значение по умолчанию равно 1. Добавление атрибута border без значения приводит к появлению границы шириной один пиксель.
cellpadding = число
Задает размер интервала (в пикселах) между границей ячейки и ее содержимым. Значение по умолчанию равно 1.
cellspacing = число
Задает (в пикселах) размер интервала между ячейками таблицы. Значение по умолчанию равно 2.
Если значение атрибута границы (border) больше нуля, то по умолчанию frame использует это значение, пока не установлено другое.
height = число, проценты
Задает высоту всей таблицы. Значение может быть в пикселях или в процентах от размера окна браузера.
hspace = число
Содержит размер интервала (в пикселях) слева и справа от выровненной таблицы. (Атрибут аналогичен hspace для тега <img>.)
vspace = число
Задает размер (в пикселях) свободного пространства над и под выровненной таблицей (аналогично vspace для тега <img>).
width = число, проценты
Задает общую ширину таблицы. Может быть задан в пикселях или процентах от размера окна браузера.
bordered or = “#rrggbb” или название цвета
Определяет цвет главной центральной части границы таблицы.
bordercolordark = "#rrggbb" или название цвета
Задает цвет темной тени, используемой для создания эффекта трехмерного изображения.
Тег <caption>название таблицы </caption>.У тега <caption> есть всего один атрибут, определяющий положение названия таблицы – align. Он может принимать два значения: top- над таблицей и bottom- под таблицей.
Тег <tr>
<tr>...</tr>
Тег <tr> задает в таблице строку ячеек. Строка таблицы, ограниченная тегами <tr>, не имеет никакого содержания, кроме совокупности ячеек таблицы (<td>). Завершающий тег не является обязательным.
Атрибуты:
align = left | center | right
Задает способ выравнивания текста (или других элементов) в ячейках текущей строки.
bgcolor = "#rrggbb" или название цвета.
Задает цвет, используемый в строке. Значение цвета, заданного для фона строки, перекрывает значение, заданное для таблицы в целом.
valign = top | middle | bottom | baseline
Задает способ вертикального выравнивания текста (или других элементов) в ячейках текущей строки. Значение по умолчанию middle.
Тег <td>
<td>...</td>
Teг <td> определяет ячейку данных таблицы. Закрывающий тег не обязателен, но его наличие может предотвратить непредсказуемые сбои при выводе таблицы. В частности, они возможны, если содержимым ячейки является изображение. Атрибуты такие же, как у тега <tr> плюс свои.
Атрибуты:
background = ur1
Определяет изображение, которое должно использоваться в качестве фона в ячейке.
colspan = число
Задает количество столбцов, которые будет объединять данная ячейка. Значение по умолчанию 1.
height = число, проценты
Задает высоту ячейки в пикселях или в процентах от высоты таблицы. Высота, заданная в первой ячейке, будет использована для остальных ячеек строки.
nowrap
Отменяет автоматическое обтекание текста для данной ячейки. Окончания строк должны быть дополнены тегами <р> или <br>.
rowspan = число
Задает количество строк, объединяемых данной ячейкой. .Значение по умолчанию равно 1.
width = число
Задает ширину ячейки в пикселях.
Тег <th>
<th>заголовок</th>
Атрибуты:
align = left | center | right
Задает способ выравнивания текста (или других элементов) в ячейках текущей строки.
valign = top | middle | bottom
Задает способ вертикального выравнивания текста (или других элементов) в ячейках текущей строки. Значение по умолчанию middle.
colspan = число
Задает количество столбцов, которые будет объединять данная ячейка. Значение по умолчанию 1.
rowspan = число
Задает количество строк, объединяемых данной ячейкой. Значение по умолчанию равно 1.
width = число
Задает ширину ячейки в пикселах.
bgcolor = "#rrggbb" или название цвета.
Задает цвет, используемый в строке. Значение цвета, заданного для фона строки, перекрывает значение, заданное для таблицы в целом.
Простые таблицы – довольно большая редкость. Гораздо чаще встречаются сложные таблицы, в которых ячейки располагаются одновременно в нескольких соединениях столбцах или строках. Ниже приведём пример (см. пример 9), который демонстрирует таблицу 3х3 с заголовками, различными видами разбиения таблицы на ячейки и заданной рамкой. Для объединения ячеек используются атрибуты colspan и rowspan. Атрибут colspan сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько столбцов. Например, в нашем примере 9 ячейку А нужно растянуть на ячейку одного столбца и на две строки, для этого задаём colspan=1, а rowspan=2, а ячейку F нужно растянуть на ячейки трёх столбцов и на одну строку, следовательно, colspan=3, а rowspan=1. В данном примере используется атрибут border =8. Он устанавливает ширину рамки таблицы и может принимать любое значение от 0 до 10. Если данный атрибут не указать или задать равным нулю, то у таблицы будет отсутствовать рамка, такая таблица приведена ниже на рисунке 6.
Пример 9:
<html> <head>
<title>Таблица</title>
</head> <body>
<h2 align = center> Обычная таблица 3х3 с заголовками
и различными видами разбиения ячеек и рамкой шириной равной 8</h2>
<table border=8>
<tr>
<th>Заголовок 1</th> <th>Заголовок 2</th>
<th>Заголовок 3</th></tr>
<tr>
<td align=center rowspan=2
colspan=1>ячейка таблицы A</td>
<td>ячейка таблицы B</td>
<td>ячейка таблицы C</td>
</tr><tr><td>ячейка таблицы D</td>
<td>ячейка таблицы E</td>
<tr><td align=center rowspan=1
colspan=3>ячейка таблицы F</td>
</tr> </table> </body> </html>
Результат:
Рис.5 Пример таблицы 3х3
Рис.6 Пример таблицы без рамки
Cellpadding и Cellspacing
У тега table есть атрибуты, которые используются в паре: Cellspacing и Cellpadding. Для того чтобы избавиться от пространства между ячейками таблицы используется атрибут cellspacing, в html файле это запишется следующим образом <table cellspacing=0>. Можно увеличить пространство между ячейками, тогда, например cellspacing=10 (см. рисунок 7).
Рис.7 Пример использования Cellspacing
Атрибут cellpadding добавляет свободное пространство между содержимым ячейки и ее границами (см. рисунок 8).
Рис.8 Пример использования Cellpadding
Рис.9 Пример использования Cellpadding и Cellspacing
Многие Web-дизайнеры используют большие таблицы в качестве контейнеров для задания структуры страницы. Одной из известных конфигураций является создание узких столбцов для пунктов навигации.
