Dalam sebuah tabel HTML, cellpadding
dan cellspacing
dapat diatur seperti ini:
<table cellspacing="1" cellpadding="1">
Bagaimana hal yang sama dapat dicapai dengan menggunakan CSS?
Dalam sebuah tabel HTML, cellpadding
dan cellspacing
dapat diatur seperti ini:
<table cellspacing="1" cellpadding="1">
Bagaimana hal yang sama dapat dicapai dengan menggunakan CSS?
Dasar-dasar
Untuk mengontrol "cellpadding" dalam CSS, Anda cukup menggunakan padding
pada sel tabel. Misalnya. untuk 10px "cellpadding":
td {
padding: 10px;
}
Untuk "cellspacing", Anda dapat menerapkan border-spacing
Properti CSS ke tabel Anda. Misalnya. untuk 10px "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
Properti ini bahkan akan memungkinkan jarak horizontal dan vertikal terpisah, sesuatu yang tidak bisa Anda lakukan dengan "cellspacing" sekolah lama.
Masalah di IE <= 7
Ini akan bekerja di hampir semua browser populer kecuali untuk Internet Explorer melalui Internet Explorer 7, di mana Anda hampir kurang beruntung. Saya mengatakan "hampir" karena browser ini masih mendukung border-collapse
properti, yang menggabungkan batas sel tabel yang bersebelahan. Jika Anda mencoba menghilangkan cellspacing (yaitu, cellspacing="0"
) kemudian border-collapse:collapse
harus memiliki efek yang sama: tidak ada ruang di antara sel-sel tabel. Dukungan ini buggy, meskipun, karena tidak menimpa yang sudah ada cellspacing
Atribut HTML pada elemen tabel.
Singkatnya: untuk browser non-Internet Explorer 5-7, border-spacing
menangani Anda. Untuk Internet Explorer, jika situasi Anda tepat (Anda ingin 0 selspacing dan meja Anda tidak sudah didefinisikan), Anda dapat menggunakan border-collapse:collapse
.
table {
border-spacing: 0;
border-collapse: collapse;
}
Catatan: Untuk ikhtisar besar properti CSS yang dapat diterapkan ke tabel dan untuk browser mana, lihat ini halaman Quirksmode yang fantastis.
Perilaku default peramban setara dengan:
table {border-collapse: collapse;}
td {padding: 0px;}
Menetapkan jumlah ruang antara isi sel dan dinding sel
table {border-collapse: collapse;}
td {padding: 6px;}
Mengontrol ruang di antara sel tabel
table {border-spacing: 2px;}
td {padding: 0px;}
table {border-spacing: 2px;}
td {padding: 6px;}
table {border-spacing: 8px 2px;}
td {padding: 6px;}
catatan: Jika ada
border-spacing
mengatur, itu menunjukkanborder-collapse
milik meja adalahseparate
.
Sini Anda dapat menemukan cara html lama untuk mencapai ini.
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
Pengaturan margin pada sel tabel tidak benar-benar memiliki efek sejauh yang saya tahu. Persamaan CSS yang benar untuk cellspacing
aku s border-spacing
- tetapi tidak berfungsi di Internet Explorer.
Kamu dapat memakai border-collapse: collapse
untuk menetapkan jarak sel ke 0 sebagaimana disebutkan, tetapi untuk nilai lainnya, saya pikir satu-satunya cara lintas-browser adalah tetap menggunakan cellspacing
atribut.
Peretasan ini berfungsi untuk Internet Explorer 6 dan yang lebih baru, Google Chrome, Firefox, dan Opera:
table {
border-collapse: separate;
border-spacing: 10px; /* cellspacing */
*border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
padding: 10px; /* cellpadding */
}
Itu *
deklarasi untuk Internet Explorer 6 dan 7, dan peramban lain akan mengabaikannya dengan tepat.
expression('separate', cellSpacing = '10px')
kembali 'separate'
, tetapi kedua pernyataan dijalankan, seperti dalam JavaScript Anda dapat menyampaikan argumen lebih dari yang diharapkan dan semua dari mereka akan dievaluasi.
Bagi mereka yang menginginkan nilai non-zero cellspacing, CSS berikut bekerja untuk saya, tetapi saya hanya bisa mengujinya di Firefox. Lihat Quirksmode link diposting di tempat lain untuk detail kompatibilitas. Sepertinya ini mungkin tidak berfungsi dengan versi Internet Explorer yang lebih lama.
table {
border-collapse: separate;
border-spacing: 2px;
}
Solusi sederhana untuk masalah ini adalah:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
Juga, jika Anda mau cellspacing="0"
, jangan lupa tambahkan border-collapse: collapse
di dalam kamu table
stylesheet.