Tabel 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

亲自试一试

garis tepi tabel

untuk menetapkan garis tepi tabel dalam CSS, gunakan border atribut.

contoh berikut menentukan garis tepi hitam untuk elemen <table>, <th> dan <td>:

Firstname Lastname
Bill Gates
Steve Jobs

实例

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

亲自试一试

catatan:tabel di contoh di atas memiliki garis tepi ganda. Ini disebabkan karena table dan elemen <th> dan <td> memiliki garis tepi yang terpisah.

tabel lebar penuh

dalam beberapa kasus, tabel di atas terlihat kecil. Jika Anda memerlukan tabel yang dapat menutupi seluruh layar (lebar penuh), tambahkan width: 100% untuk elemen <table>:

实例

table {
  width: 100%;
}

亲自试一试

garis tepi ganda

perhatian: tabel di atas memiliki garis tepi ganda. Ini disebabkan karena tabel dan elemen th dan td memiliki garis tepi yang terpisah.

jika ingin menghapus garis tepi ganda, lihat contoh di bawah ini.

gabungkan garis tepi tabel

border-collapse atur apakah garis tepi tabel akan digabungkan menjadi satu garis tepi:

Firstname Lastname
Bill Gates
Steve Jobs

实例

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

亲自试一试

jika hanya ingin ada garis tepi di sekeliling tabel, cukup tentukan <table> dengan border padding

Firstname Lastname
Bill Gates
Steve Jobs

实例

table {
  border: 1px solid black;
}

亲自试一试

lebar dan tinggi tabel

lebar dan tinggi tabel ditentukan oleh width dan height definisi atribut.

contoh berikut akan menetapkan lebar tabel menjadi 100%, dan tinggi elemen <th> menjadi 50px:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

table {
  width: 100%;
}
th {
  height: 50px;
}

亲自试一试

untuk membuat tabel hanya mengambil setengah halaman, gunakan width: 50%:

实例

table {
  width: 50%;
}
th {
  height: 70px;
}

亲自试一试

penarikan teks horizontal

text-align atur penarikan teks horizontal konten dalam <th> atau <td> (kiri, kanan atau di tengah).

secara baku, konten elemen <th> di tengah, sementara konten elemen <td> berada di sebelah kiri.

untuk membuat konten elemen <td> di tengah, gunakan text-align: center:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

th {
  text-align: center;
}

亲自试一试

contoh berikut akan membuat teks di dalam elemen <th> berada di sebelah kiri:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

th {
  padding: 15px;
}

亲自试一试

penarikan teks vertikal

vertical-align atur penarikan teks vertikal konten dalam <th> atau <td> (atas, bawah atau di tengah).

secara baku, penarikan teks vertikal konten dalam tabel adalah di tengah (elemen <th> dan <td> sama ada).

contoh berikut akan menetapkan penarikan teks vertikal elemen <td> ke bawah:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

td {
  height: 50px;
  vertical-align: bottom;
}

亲自试一试

表格内边距

表格内边距 如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

属性，以实现水平分隔线：
  属性：
  padding: 15px;
}

亲自试一试

text-align: left;

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

水平分隔线 向 <th> 和 <td> 添加 border-bottom

实例

属性，以实现水平分隔线：
  th, td {
}

亲自试一试

border-bottom: 1px solid #ddd;

可悬停表格 在 <tr> 元素上使用 :hover

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

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

亲自试一试

条状表格

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

实例

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

亲自试一试

表格颜色

下例指定了 <th> 元素的背景颜色和文本颜色：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

th {
  background-color: #4CAF50;
  color: white;
}

亲自试一试

响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：

实例

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

亲自试一试

注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。

更多实例

做一张花式表格
本例演示如何创建花式表格。
设置表格标题的位置
本例演示了如何放置表格标题。

CSS 表格属性

属性 �述
border Properti singkat. Dalam satu pernyataan, set semua properti garisan pinggir diatur.
border-collapse Tentukan sama ada nampak atau tidak sebelah dalam garisan pinggir tabel.
border-spacing Tentukan jarak sebelah kiri dan kanan antara sel berdekatan.
caption-side Tentukan lokasi tajuk tabel.
empty-cells Tentukan sama ada nampak atau tidak sebelah dalam sel kosong tabel di dalam tabel.
table-layout Set untuk algoritma susun jadual untuk tabel.