Таблицы CSS (Таблицы)

Таблицы обычно используются для отображения табличных данных.

Использование таблицы CSS

Когда вы строите таблицы без стилей или свойствКогда вы строите таблицы без стилей или свойствHTML таблицы

Следующие разделы покажут, как использовать CSS для управления макетом и представлением элементов таблицы, чтобы создать элегантные и единообразные таблицы. Стилизация таблиц с помощью CSS может значительно улучшить их вид.

Добавление рамки к таблице

CSS borderСвойство является лучшим способом определить границу таблицы.

Следующий пример установит черную рамку для<table>и<th>и<td>элемент.

table, th, td {
　　　　border: 1px solid black;
}

Складывать границы таблицы

Если вы видели результат предыдущего примера, вы заметите, что у каждой ячейки таблицы есть отдельная граница, и между границами相邻 ячеек есть определенный интервал. Это происходит потому, что по умолчанию границы ячеек таблицы разделены. Однако, вы можете использовать элементborder-collapseСвойство будет складывать отдельные границы таблицы в одну границу <table>：</table>

В следующем примере правила стиля будут складывать границы ячеек таблицы иapply один像素 черной рамки к элементам таблицы и ячеек.

table　{
　　　　border-collapse: collapse;
}
table, th, td {
　　　　border: 1px solid black;
}

Вы также можете удалить пространство между границами ячеек таблицы с помощью значения CSSborder-spacingСвойство установлено в 0. Однако, это только удаляет пространство, но не сжимает, как при установленном значении border-collapse collapse.

Настройка внутреннего пространства таблицы

По умолчанию, таблицы, созданные браузером, имеют ячейки, которые точно хватает для容纳 данных в ячейке. Чтобы добавить больше места вокруг содержимого ячеек таблицы, можно использовать свойство CSS padding, как показано ниже:

th, td {
　　　　padding: 15px;
}

border-spacingЕсли границы таблицы разделены (по умолчанию), то также можно использовать CSS-пroperty для настройки интервала между границами ячеек.

Следующие правила стиля применяются ко всем границам таблицы с интервалом в 10 пикселей:

table　{
　　　　border-spacing: 10px;
}

Управление макетом таблицы

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

Вы можете выполнить это с помощью свойства table-layout CSS. Это свойство определяет алгоритм, используемый для布置 ячеек, строк и столбцов таблицы. Это свойство принимает одно из двух значений:}}

• auto — Использование автоматического алгоритма таблицы. При использовании этого алгоритма можно изменять ширину таблицы и ячеек, чтобы они подходили под содержимое. Это значение по умолчанию.

• fixed - Использование фиксированного алгоритма таблицы. При использовании этого алгоритма горизонтальное расположение таблицы не зависит от содержимого ячеек; оно зависит только от ширины таблицы, ширины столбцов и отступов или промежутков между ячейками.

В следующем примере правила стиля указывают, что таблица использует фиксированный алгоритм布局 и имеет фиксированную ширину 300 пикселей.

table　{
　　　　width:　300px;
　　　　table-layout:　fixed;
}

Если у вас нет фиксированного значения атрибута table-layout, на больших таблицах пользователи не видят никакой части таблицы, пока браузер не отобразит всю таблицу.

Обработка пустых ячеек

Свойство empty-cells CSS контролирует границы и определяет, что в таблице нет видимого содержимого, и ячейки с использованием модели фона с отдельными рамками.

Этот атрибут может принимать одно из трех значений: show, hide или inherit.

Следующие правила стиля скрывают пустые ячейки в элементе table.

table　{
　　　　border-collapse:　separate;
　　　　empty-cells:　hide;
}

Контроль положения заголовка таблицы

Свойство caption-side CSS устанавливает вертикальное положение рамки заголовка таблицы.

Следующие правила стиля помещают заголовок таблицы под родительскую таблицу. Однако, чтобы изменить горизонтальное выравнивание текста заголовка, можно использоватьtext-alignСвойства.

caption　{
　　　　caption-side:　bottom;
}