Таблицы CSS

Использование CSS может значительно улучшить вид HTML-таблицы:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

Попробуйте сами

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

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

В следующем примере для элементов <table>, <th> и <td> установлены черные рамки:

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname
Points Bill
50 Steve

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

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

Попробуйте сами

Примечание:В таблице примера выше есть двойная рамка. Это потому, что у table и элементов <th> и <td> есть отдельные рамки.

Полная ширина таблицы

В некоторых случаях таблица выше может показаться маленькой. Если вам нужна таблица, занимающая весь экран (полная ширина), добавьте для элемента <table> width: 100%:

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

table {
  width: 100%;
color: white;

Попробуйте сами

Двойная рамка

Обратите внимание, что в таблице выше есть двойная рамка. Это потому, что у таблицы и элементов th, td есть отдельные рамки.

Если вам нужно удалить двойную рамку, посмотрите на следующий пример.

Сжатие рамки таблицы

border-collapse Свойство устанавливает, будет ли рамка таблицы сжиматься в одну рамку:

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname
Points Bill
50 Steve

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

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

Попробуйте сами

Если вы хотите, чтобы вокруг таблицы был только рамка, то достаточно указать для <table> граница padding

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname
Points Bill
50 Steve

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

table {
  border: 1px solid black;
color: white;

Попробуйте сами

Ширина и высота таблицы

Ширина и высота таблицы определяются width и height Определение свойств.

В следующем примере ширина таблицы установлена в 100%, а высота элемента <th> установлена в 50px:

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

table {
  width: 100%;
color: white;
$300
  height: 50px;
color: white;

Попробуйте сами

Чтобы создать таблицу, занимающую половину страницы, используйте width: 50%:

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

table {
  width: 50%;
color: white;
$300
  height: 70px;
color: white;

Попробуйте сами

Горизонтальное выравнивание

text-align Свойство устанавливает горизонтальное выравнивание содержимого <th> или <td> (слева, справа или по центру).

По умолчанию, содержимое элемента <th> выравнивается по центру, а содержимое элемента <td> выравнивается слева.

Чтобы сделать содержимое элемента <td> также по центру, используйте text-align: center:

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

$300
  text-align: center;
color: white;

Попробуйте сами

В следующем примере текст элемента <th> выравнивается слева:

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

$300
  padding: 15px;
color: white;

Попробуйте сами

Вертикальное выравнивание

vertical-align Свойство устанавливает вертикальное выравнивание содержимого <th> или <td> (верхнее, нижнее или по центру).

По умолчанию, вертикальное выравнивание содержимого таблицы居中对齐 (элементы <th> и <td> также居中对齐).

В следующем примере текстовый вертикальный выравнивание элемента <td> устанавливается как нижнее выравнивание:

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

td {
  height: 50px;
  vertical-align: bottom;
color: white;

Попробуйте сами

表格内边距

внутренний отступ таблицы Чтобы контролировать расстояние между рамкой и содержимым таблицы, используйте на элементах <td> и <th> padding

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

свойства, чтобы реализовать горизонтальную разделительную линию:
  свойства:
  padding: 15px;
color: white;

Попробуйте сами

text-align: left;

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

горизонтальная разделительная линия добавить к <th> и <td> border-bottom

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

свойства, чтобы реализовать горизонтальную разделительную линию:
  th, td {
color: white;

Попробуйте сами

border-bottom: 1px solid #ddd;

плавающая таблица на элементе <tr> использовать :hover

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

выборщик, чтобы выделить строку таблицы при наведении мыши:

Попробуйте сами

tr:hover {background-color: #f5f5f5;}

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

条纹表格 Чтобы实现 эффект зебры, используйте nth-child() выборщик, чтобы добавить фоновый цвет для всех даже (или нечетных) строк таблицы:background-color

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

:

Попробуйте сами

tr:nth-child(even) {background-color: #f2f2f2;}

Цвет таблицы

В следующем примере указаны фоновый цвет и цвет текста для элемента <th>: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

$300
  th {
  background-color: #4CAF50;
color: white;

Попробуйте сами

}

Адаптивная таблица

Если экран слишком мал, чтобы отображать все содержимое, адаптивная таблица будет показывать горизонтальную полосу прокрутки: First Name Last Name Last Name Last Name Last Name Last Name Last Name Last Name Last Name Last Name Last Name
Points Bill Gates Gates Gates Gates Gates Gates Gates Gates Gates Gates
50 Steve Jobs Jobs Jobs Jobs Jobs Jobs Jobs Jobs Jobs Jobs
94 Elon Musk Musk Musk Musk Musk Musk Musk Musk Musk Musk

67 Добавьте вокруг элемента <table> с overflow-x:auto

Элемент容器 (например, <div>), чтобы实现 адаптивный эффект:

<div style="overflow-x:auto;">
<table>
... содержимое таблицы ...
</table>
</div>

Попробуйте сами

Примечание:В OS X Lion (на Mac) полоса прокрутки по умолчанию скрыта и отображается только при использовании (даже если установлено "overflow:scroll").

Более примеров

Создание стильной таблицы
Этот пример демонстрирует, как создать стильную таблицу.
Установка положения заголовка таблицы
Этот пример показывает, как разместить заголовок таблицы.

свойства таблиц CSS

свойства описание
граница Краткое свойство. В одном заявлении устанавливаются все свойства рамки.
border-collapse Определяет, следует ли складывать рамки таблицы.
border-spacing Определяет расстояние между смежными ячейками таблицы.
caption-side Определяет положение заголовка таблицы.
empty-cells Определяет, показывать ли рамки и фоновые цвета в пустых ячейках таблицы.
table-layout Настройка алгоритма разметки таблиц.