Tabel CSS
Tampilan tabel HTML dapat sangat ditingkatkan dengan CSS:
| Perusahaan | Kontak | Negara |
|---|---|---|
| Kotak makan Alfred | Maria Anders | Jerman |
| Supermarket Berglund | Christina Berglund | Swedia |
| Pusat Perbelanjaan Montezuma | Francisco Chang | Meksiko |
| perdagangan serius | Roland Mendele | Austria |
| Perdagangan Pulau | Helen Bennett | Inggris |
| makanan kerajaan | Philip Cramer | Jerman |
| Gudang Anggur Bacchus Tertawa | Yoshi Tannamuri | Kanada |
| Gudang Makanan Berkumpul | Giovanni Rovelli | Italia |
Batas Tabel
Untuk menentukan batas tabel di CSS, gunakan borderproperti.
Contoh di bawah ini menentukan batas hitam untuk elemen <table>, <th>, dan <td>:
Contoh
table, th, td {
border: 1px solid black;
}
Tabel Lebar Penuh
Tabel di atas mungkin tampak kecil dalam beberapa kasus. Jika Anda membutuhkan tabel yang harus menjangkau seluruh layar (lebar penuh), tambahkan width: 100%ke elemen <table>:
Contoh
table {
width: 100%;
}
Perbatasan Ganda
Perhatikan bahwa tabel pada contoh di atas memiliki batas ganda. Ini karena tabel dan elemen <th> dan <td> memiliki batas yang terpisah.
Untuk menghapus batas ganda, lihat contoh di bawah ini.
Ciutkan Batas Tabel
Properti border-collapsemenetapkan apakah batas tabel harus diciutkan menjadi satu batas:
Contoh
table
{
border-collapse: collapse;
}
Jika Anda hanya menginginkan batas di sekeliling tabel, tentukan saja borderproperti untuk <table>:
Contoh
table
{
border: 1px solid black;
}