Tabel CSS

Dengan menggunakan CSS, dapat memperbaiki secara besar kemampuan tampilan tabel 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

Coba sendiri

Garis bingkai tabel

Untuk menetapkan garis bingkai tabel dalam CSS, gunakan border Atribut.

Contoh di bawah ini menentukan garis bingkai hitam untuk elemen <table>, <th>, dan <td>:

Nama Depan Nama Terakhir
Bill Gates
Steve Jobs

Elemen wadah

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

Coba sendiri

Perhatian:Tabel di contoh di atas memiliki garis bingkai ganda. Ini disebabkan karena table dan elemen <th> dan <td> memiliki garis bingkai terpisah.

Tabel penuh lebar

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

Elemen wadah

table {
  width: 100%;
}

Coba sendiri

Garis bingkai ganda

Perhatikan bahwa tabel di atas memiliki garis bingkai ganda. Ini disebabkan karena tabel dan elemen th dan td memiliki garis bingkai terpisah.

Untuk menghapus garis bingkai ganda, lihat contoh di bawah ini.

Gabungkan garis bingkai tabel

border-collapse Atur apakah garis bingkai tabel akan digabungkan menjadi garis bingkai tunggal:

Nama Depan Nama Terakhir
Bill Gates
Steve Jobs

Elemen wadah

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

Coba sendiri

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

Nama Depan Nama Terakhir
Bill Gates
Steve Jobs

Elemen wadah

table {
  border: 1px solid black;
}

Coba sendiri

Lebar dan tinggi tabel

Lebar dan tinggi tabel ditentukan oleh width dan height Definisi atribut.

Contoh di bawah ini mengatur lebar tabel menjadi 100% dan tinggi elemen <th> menjadi 50px:

Nama Depan Nama Terakhir Penghematan
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Elemen wadah

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

Coba sendiri

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

Elemen wadah

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

Coba sendiri

Penarikan horizontal

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

Secara default, konten elemen <th> di tengah, sedangkan konten elemen <td> di sebelah kiri.

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

Nama Depan Nama Terakhir Penghematan
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Elemen wadah

th {
  text-align: center;
}

Coba sendiri

Contoh di bawah ini membuat teks elemen <th> sejajar kiri:

Nama Depan Nama Terakhir Penghematan
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Elemen wadah

th {
  padding: 15px;
}

Coba sendiri

Penarikan vertikal

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

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

Contoh di bawah ini mengatur gaya penarikan teks vertikal elemen <td> ke bawah:

Nama Depan Nama Terakhir Penghematan
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Elemen wadah

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

Coba sendiri

表格内边距

Pem边际tabel dalam Untuk mengendalikan jarak antara garis border dan konten tabel, gunakan padding

Nama Depan Nama Terakhir Penghematan
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Elemen wadah

aturan, untuk mencapai garis pemisah horizontal:
  aturan:
  padding: 15px;
}

Coba sendiri

text-align: kiri;

Nama Depan Nama Terakhir Penghematan
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Garis pemisah horizontal Tambahkan ke <th> dan <td> untuk border-bottom

Elemen wadah

aturan, untuk mencapai garis pemisah horizontal:
  th, td {
}

Coba sendiri

border-bottom: 1px solid #ddd;

Tabel yang dapat dihover Pada elemen <tr> menggunakan :hover

Nama Depan Nama Terakhir Penghematan
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Elemen wadah

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

Coba sendiri

Tabel Baris

Nama Depan Nama Terakhir Penghematan
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Untuk mencapai efek bintik-bintik tabel, gunakan nth-child() pemilih, dan tambahkan warna latar untuk semua baris tabel genap (atau ganjil): background-color:

Elemen wadah

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

Coba sendiri

Warna Tabel

Contoh di bawah ini menentukan warna latar dan warna teks elemen <th>:

Nama Depan Nama Terakhir Penghematan
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Elemen wadah

th {
  background-color: #4CAF50;
  warna: putih;
}

Coba sendiri

Tabel Responsif

Jika layar terlalu kecil untuk menampilkan seluruh konten, tabel responsif akan menampilkan garis gilir horizontal:

Nama Depan Nama Terakhir 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

Tambahkan dengan overflow-x:auto contoh <div>), untuk mencapai efek responsif:

Elemen wadah

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

Coba sendiri

Keterangan:Pada OS X Lion (pada Mac), garis滚条scrollbar secara default tersembunyi dan hanya muncul saat digunakan (meskipun diatur "overflow:scroll").

Beberapa contoh lain

Buat tabel yang indah
Contoh ini menunjukkan bagaimana membuat tabel yang indah.
Atur posisi judul tabel
Contoh ini menunjukkan bagaimana menempatkan judul tabel.

Aturan Tabel CSS

aturan deskripsi
border Properti singkat. Dengan satu deklarasi, atur semua properti garis batas.
border-collapse Tentukan apakah garis batas tabel harus disatukan.
border-spacing Tentukan jarak antara sel berikutnya.
caption-side Tentukan posisi judul tabel.
empty-cells Tentukan apakah garis batas dan latar belakang akan ditampilkan di sel kosong tabel.
table-layout Atur algoritma tata letak untuk tabel.