Стилевое оформление таблиц

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

Границу таблице можно задавать аналогично любому другому элементу, это мы рассматривали на прошлом занятии. Единственное, если задать свойство border только тегу <table>, то граница будет задана только внешним границам таблицы. Это происходит потому, что свойство border не наследуется. Чтобы задать границы для ячеек, нужно задать их тегу <td>. Здесь уже можно задавать границы ячейкам любого стиля.

/*Внешняя граница таблицы*/ table { border​:​ ​1px​ solid ​#000; } /*Границы для ячеек таблицы*/ td { border​:​ ​1px​ solid ​#000;

}

 

Ширину и высоту таблицы задаем при помощи свойств CSS width и height.

table { width​:​ 400​ px; height:​ ​200​ px;

}

 

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

Ширину таблицы и её столбцов можно задать с помощью свойства width. Если для таблицы задана ширина table {width: 100%;}, то она будет равна ширине блока­контейнера, а ширина столбцов установится в соответствии с шириной содержимого ячеек. Чаще всего ширину таблицы и столбцов задают в px или %

Высота таблицы обычно не задается. Высотой строк таблицы можно управлять, добавив верхний и нижний padding, или же задав высоту с помощью свойства height

Для задания отступов элементу, в CSS существуют свойства padding и border­spacing.

 

● border­spacing – внешние отступы

● padding – внутренние отступы

 

        

Внешние отступы (border­spacing) можно задать либо всем 4 сторонам, либо отдельно. В этом случае первое значение будет действовать для левой и правой сторон, а второе ­ для верхней и нижней. Внутренние отступы (padding) можно задавать и для каждой границы отдельно.

(1px 2px) ­ 1px: верхняя и нижняя, 2px: левая и правая 

(1px 2px 3px) ­ 1px: верхняя, 2px: левая и правая, 3 нижняя 

(1px 2px 3px 4px) ­ 1px: верхняя, 2px: правая, 3px: нижняя, 4px: левая

Для выравнивания по горизонтали внутри ячейки существует устаревший атрибут align, который заменяется на свойство CSS text­align.

td { text​­​align​:​ center​;​ ​(​right ​| justify ​ ​|​ left) }

 

Для вертикального выравнивания внутри ячейки у тега <td> существует устаревший атрибут valign. Для его замены в CSS существует свойство vertical­align.

td { vertical​­​align​:​ top​;​ ​(​bottom ​|​ baseline ​|​ middle) }

 

Это свойство в отношении ячеек таблицы может принимать четыре значения:

● top ­ выравнивание по верхнему краю;

● bottom ­ выравнивание по нижнему краю;

● baseline ­ базовая линия ячейки выравнивается по базовой линии первой текстовой строки;

● middle – выравнивание по середине (по умолчанию).

Есть ещё одно полезное свойство для оформления таблиц. Если для всех ячеек задать атрибут cellspacing=”0”, или CSS свойство border­spacing=”0”, то границы соседних ячеек будут двойными. Для того, чтобы убрать двойные границы, в CSS существует свойство border­collapse.

table {

border​­​collapse​:​ collapse;

}

 

Свойство border­collapse может принимать два значения. По умолчанию установлено separate, при котором рамка двойная, а при значении collapse рамка становится одинарной.