2. Рамки таблицы

Как уже отмечалось, по умолчанию таблица отображается без рамок (видимых границ). Задание рамок относится к задаче внешнего оформления таблицы. Однако их видимость делает геометрическую структуру таблицы более наглядной. Даже если наличие рамок таблицы не соответствует вашему дизайнерскому плану, их все же полезно отобразить, по крайней мере, на этапе проектирования и отладки кода. Позже их легко можно удалить. Поэтому начнем с определения рамок.

Чтобы отобразить внешнюю рамку таблицы, а также индивидуальные рамки ячеек, в теге <table> можно указать целочисленное значение атрибута border, опре­деляющее ее толщину (в пикселах), например <table border="5">. При этом ука­занную толщину будет иметь только внешняя рамка таблицы, а толщина рамок яче­ек останется равной 1 рх. Каждая ячейка имеет собственную рамку, а между рамками соседних ячеек предусмотрен некоторый зазор, поэтому разделительные линии ка­жутся двойными. Если атрибут border не указывать или задать ему нулевое значение, то таблица отобразится без рамок. На рис.2 показаны примеры таблицы с различ­ными значениями атрибута border. Внешняя рамка отображается в оттенках серого цвета, причем разных для различных частей рамки, что можно заметить при доста­точно большой ее толщине. Однако собственно оттенки могут различаться в разных браузерах.

Отображением рамок можно управлять с помощью атрибутов frame и rules. Хотя это нестандартные атрибуты, их поддерживают ведущие браузеры.

С помощью атрибута frame можно дополнительно указать, какие части внешней рамки следует отображать, а какие нет. Данный атрибут действует только при указанном в <table> атрибуте border с ненулевым значением, например,

<table border="3" frames=''box">

Значения атрибута frame:

bох - отображать все четыре стороны рамки;

above - отображать только верхнюю часть рамки;

below - отображать только нижнюю часть рамки;

hsides - отображать горизонтальные части рамки сверху и снизу;

vsides - отображать только левую и правую вертикальные части рамки;

lhs - отображать только левую часть рамки;

rhs - отображать только правую часть рамки;

void - не отображать внешнюю рамку.

На рис. показано несколько примеров применения атрибута frame.

Отображением внутренних разделительных линий (рамок ячеек) управляет ат­рибут rules, который действует только при указанном в <table> атрибуте border с ненулевым значением, например

<table border="3" rules="cols">

Значения атрибута rules:

all - отображать все вертикальные и горизонтальные линии;

rows - отображать только горизонтальные линии между строками;

cols - отображать только вертикальные линии между столбцами;

n one - не отображать разделительные линии.

На рис. показано несколько при­меров применения атрибута rules.

Обратите внимание, что при исполь­зовании атрибута rules со значением, отличным от none, внешняя рамка имеет несколько иной вид. При этом внутрен­ние разделительные линии одинарные, а не двойные. Однако Internet Explorer 6.0, а также версии 7 и 8 в режиме предос­тавления совместимости отображают двойные разделительные линии.

Д ля обеспечения межбраузерной со­вместимости управлять отображением рамок таблицы рекомендуется с помо­щью параметров CSS. В HTML 5 рас­смотренные атрибуты рамок вообще не предусмотрены. Чтобы отобразить рамку, достаточно применить стилевой параметр border или более конкретные параметры этой же группы (border-top, border-left, border-style и т. п.), которые задают границу любого элемента, в том числе и <table>, <td> и <th>.

Установить двойные или одинарные разделительные линии можно с помощью стилевого параметра border-collapse, принимающего следующие значения:

collapse - установить одинарные раз­делительные линии (т. е. для смежных ячеек отображать одну общую рамку);

separate - установить двойные разделительные линии (т. е. для каждой ячейки отображать отдельную рамку).

Задание параметра border-collapse само по себе еще не приводит к отображе­нию рамок. Чтобы рамки появились, необходимо еще указать их толщину, напри­мер border: solid 1px. На рис. приведено несколько примеров управления отображением рамок посредством CSS.

Если задан параметр border-collapse:separate (установить собственные рам­ки или границы ячеек), то с помощью атрибута cellspacing тега <tabдe> можно указать расстояние между границами ячеек, например

<table cellspacing= "10">

Для этой же цели служит стилевой параметр border-spacing, принимающий одно или два числовых значения с указанием размерности. Если указано единственное значение, то оно определяет расстояние между границами и по горизонтали, и по вертикали. Если указаны два значения (например, border-spacing:10рх 15рх,), то первое из них задает расстояние по горизонтали, а второе - по вертикали. Однако Internet Explorer версий 7, 8 в режиме предоставления совместимости и более ранние версии не воспринимают параметр border-spacing.

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