Свойства таблицы

Существует несколько свойств CSS, которые относятся исключительно к таблицам HTML.

border-collapse Определяет, расширены границы вокруг ячеек таблицы или сжаты. Когда они расширены, браузеры добавляют пространство размером несколько пикселов между каждой ячейкой. Даже если вы уберете это пространство, установив значение 0 атрибуту cellspacing HTML-тега <table>, браузеры все еще будут отображать двойные границы. Таким образом, нижняя граница одной ячейки появится над верхней границей другой ячейки, расположенной ниже, что вызовет удвоение линий границ. Установка значения collapse свойства border-collapse устраняет и область между ячейками, и это удвоение границ. Свойство работает, только когда относится к тегу <table>.

Значения: collapse, separate. Пример: border-collapse: collapse;.

border-spacing Устанавливает расстояние между ячейками в таблице. Оно заменяет HTML-атри-бут cellspacing тега <table>. Однако InternetExplorer 7 и ниже не понимает свойство border-spacing, так что лучше продолжать использовать атрибут cellspacing в тегах <table> чтобы гарантировать пространство между ячейками во всех браузерах.

ПРИМЕЧАНИЕ. Если вы хотите удалить пространство, которое браузеры обычно вставляют между ячейками, просто установите значение collapse свойства border-collapse.

Значения: два CSS-значения длины. Первое устанавливает горизонтальное разделение (пространство с обеих сторон каждой ячейки), а второе — вертикальное (пространство, отделяющее основание одной ячейки от вершины другой ячейки, находящейся под первой). Пример: border-spacing: 0 10px;.

caption-side Когда свойство относится к заголовку таблицы, оно определяет, появится заголовок вверху или внизу таблицы. Поскольку, согласно правилам HTML, тег <caption> должен идти сразу за открывающим тегом <table> заголовок обычно возникает вверху таблицы. Значения: top, bottom. Пример: caption-side: bottom;.

ПРИМЕЧАНИЕ. К сожалению, это свойство не дает никакого эффекта в браузерах Internet Explorer 6 или 7 (в вер- сии 8 оно работает), так что безопаснее придерживаться эквивалентного HTML-кода: или .

empty-cells Определяет, как браузер должен отобразить ячейку таблицы, которая совершенно пуста. В HTML это выглядело бы следующим образом: <td></td> . Значение hide скрывает любую часть ячейки, вставляя пустое пространство, так что границы, фоновые цвета и изображения не показываются в пустой ячейке. Примените это свойство к стилю, форматирующему тег <table>.

Значения: show, hide. Пример: empty-cells: show;.

ПРИМЕЧАНИЕ. Свойство empty-cells не дает никакого эффекта в Internet Explorer 7 и более ранних версиях.

table-layout Управляет тем, как браузер чертит таблицу, и может немного влиять на скорость отображения страницы браузером. Установка значения fixed заставляет браузер привести все столбцы к той же ширине, что задана для столбцов из первой строки, из-за чего таблица чертится быстрее. Значение auto — стандартное, при котором «браузер делает свое дело», поэтому, если вы довольны тем, как быстро ваши таблицы появляются на странице, не беспокойтесь об этом свойстве. Если же вы используете его, то применяйте к стилю, форматирующему тег <table>. Значения: auto, fixed. Пример: table-layout: fixed;.