Tabel CSS
- Hal Sebelumnya Daftar CSS
- Hal Berikutnya Display 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 |
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 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; }
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%; }
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; }
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; }
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; }
Untuk membuat tabel yang hanya mengambil setengah halaman, gunakan width: 50%:
Elemen wadah
table { width: 50%; } th { height: 70px; }
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; }
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; }
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; }
表格内边距
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; }
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 { }
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;}
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;}
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; }
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>
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. |
- Hal Sebelumnya Daftar CSS
- Hal Berikutnya Display CSS