Saat menggunakan tabel TABLE, pemula dalam produksi HTML akan menemukan cara mengubah ketebalan tepi, karena pengaturan tepi TABLE default sangat tebal meskipun 1px. Oleh karena itu, ada metode lain yang digunakan untuk membuat batas garis tipis, dan berikut adalah metode menggunakan CSS untuk mengimplementasikan garis tipis, yang sangat efektif dan kompatibel dengan semua browser.
Jika Anda hanya mengatur batas untuk tabel garis tipis, sulit untuk memastikan bahwa browser kompatibel. Praktik umum adalah memanfaatkan "border-collapse:collapse" CSS2; menggabungkan batas tabel atribut; Dan atur batas kiri dan atas untuk elemen tabel, dan batas kanan dan bawah untuk elemen th dan td.
HTML:
<table> <tr> <th>Kepala tabel (baris1, kol1)</th> <th>kepala tabel (baris1, kol2)</th> <th>kepala tabel (baris1, kol3)</th> </tr> <tr> <td>data tabel (baris1, kol1)</td> <td>data tabel (baris1, col2)</td> <td>data tabel (baris1, col3)</td> </tr> <tr> <td>data tabel (baris2, col1)</td> <td>data tabel (baris2, col2)</td> <td>Data tabel (baris2, col3)</td> </tr> CSS</table>:
table{border-collapse:collapse; jarak batas:0; border-left:1px solid #888; border-top:1px solid #888; latar belakang:#efefef; } th,td{border-right:1px solid #888; border-bottom:1px solid #888; bantalan: 5px 15px; } th{font-weight:tebal; latar belakang:#ccc; } |