Mengatur Border HTML Menggunakan borderCollapse Style DOM
Properti Style borderCollapse DOM pada HTML digunakan untuk mengatur atau mengembalikan border dari table collapsed ke sebuah border tunggal atau sebaliknya.
Sintak:
Property Value:
Return Value: Berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan sebuah border dari tabel.
Sebelum memahami lebih dalam materi tentang Mengatur Border HTML Menggunakan borderCollapse Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Lebar Batas Bawah HTML Menggunakan borderBottomWidth Style DOM, Mengatur Batas Bawah HTML Menggunakan borderBottomStyle DOM, dan Mengatur Radius Border HTML Menggunakan borderBottomRightRadius Style DOM.
- Digunakan untuk mengembalikan nilai properti borderCollapse: object.style.borderCollapse
- Digunakan untuk mengatur nilai properti borderCollapse: object.style.borderCollapse = " separate | collapse | initial | inherit "
Property Value:
- separate: Digunakan untuk mengatur border terpisah dari semua cell.
- collapse: Digunakan untuk melakukan collapse adjacent cell dan membuat border yang bersifat umum.
- initial: Digunakan untuk mengatur properti border-collapse ke nilai default-nya.
- inherit: Digunakan ketika properti border-collapse menerima nilai turunan dari elemen parent.
Return Value: Berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan sebuah border dari tabel.
Contoh:
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style borderCollapse
DOM
</title>
</head>
<body>
<center>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style borderCollapse
DOM
</h2>
<table
id="mkn"
border="1">
<tr>
<th>Nama Siswa</th>
<th>Usia</th>
</tr>
<tr>
<td>Cimama Cima</td>
<td>1</td>
</tr>
<tr>
<td>Cowa Cocowa</td>
<td>5</td>
</tr>
</table>
<br>
<button
type="button"
onclick="Dons()">
Submit
</button>
<!-- script untuk collapse
border -->
<script>
function Dons()
{
document.getElementById("mkn").style.borderCollapse =
"collapse";
}
</script>
</center>
</body>
</html>
Output:Blog Elfan
Properti Style borderCollapse DOM
| Nama Siswa | Usia |
|---|---|
| Cimama Cima | 1 |
| Cowa Cocowa | 5 |
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style borderCollapse
DOM
</title>
</head>
<body>
<center>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style borderCollapse
DOM
</h2>
<table
id="mkn2"
border="1"
style="border-collapse:collapse;">
<tr>
<th>Nama Siswa</th>
<th>Usia</th>
</tr>
<tr>
<td>Alex S</td>
<td>17</td>
</tr>
<tr>
<td>Joshua K</td>
<td>11</td>
</tr>
</table>
<br>
<button
type="button"
onclick="Binss()">
Submit
</button>
<!-- script untuk
mengembalikan nilai
borderCollapse -->
<script>
function Binss()
{
alert(document.getElementById("mkn2").style.borderCollapse);
}
</script>
</center>
</body>
</html>
Output:Blog Elfan
Properti Style borderCollapse DOM
| Nama Siswa | Usia |
|---|---|
| Alex S | 17 |
| Joshua K | 11 |
Mengatur border pada elemen-elemen dalam dokumen HTML adalah salah satu cara untuk menata tampilan dan memberikan batas visual pada elemen-elemen tersebut. Salah satu properti penting dalam pengaturan border adalah menggunakan properti borderCollapse. Properti ini berfungsi untuk mengatur bagaimana batas antar sel dalam elemen tabel (table) akan ditampilkan. Dalam artikel ini, pembahasan akan difokuskan pada penggunaan properti borderCollapse pada dokumen HTML dengan penjelasan mendalam tentang fungsinya serta cara penerapannya dalam pengelolaan desain web.
Secara umum, dalam pembuatan tabel pada halaman HTML, batas antar sel akan ditampilkan secara terpisah, kecuali jika properti borderCollapse digunakan. Properti ini mengontrol bagaimana dua atau lebih batas pada sel yang berdekatan akan ditampilkan. Ada dua nilai utama untuk properti ini, yaitu collapse dan separate. Nilai collapse akan menggabungkan batas-batas sel yang berdekatan menjadi satu garis batas tunggal, sedangkan nilai separate akan menjaga batas antara setiap sel tetap terpisah, menghasilkan dua garis batas yang jelas di sekitar setiap sel tabel.
Penggunaan properti borderCollapse dengan nilai collapse memberikan efek yang lebih bersih dan sederhana pada tampilan tabel, karena mengurangi kerumitan dari garis-garis batas yang terpisah. Ini sangat berguna untuk desain yang lebih minimalis atau untuk situasi dimana tata letak yang rapi dan kompak diperlukan. Sebaliknya, penggunaan nilai separate akan lebih sesuai pada desain tabel yang membutuhkan kejelasan batas antara setiap sel, terutama pada tabel dengan banyak data atau kolom, karena setiap sel akan memiliki garis batas yang lebih terlihat.
Baca Juga:
Pemahaman yang mendalam tentang bagaimana properti ini bekerja sangat penting bagi pengembang halaman web yang ingin memberikan pengalaman visual yang optimal bagi pengguna. Properti borderCollapse dapat diaplikasikan pada elemen tabel secara keseluruhan, mempengaruhi cara tampilan dari setiap sel dan garis batasnya. Ketika nilai collapse digunakan, batas antar sel akan menyatu, menciptakan tampilan yang lebih bersih tanpa garis yang saling tumpang tindih. Ini sangat berguna saat membuat tabel yang lebih padat, dimana ruang antar sel perlu diminimalkan untuk memberikan lebih banyak ruang bagi data atau konten.
Namun, meskipun nilai collapse memberikan tampilan yang lebih sederhana, penggunaan nilai separate lebih cocok untuk desain yang menginginkan pemisahan yang jelas antara setiap bagian dalam tabel. Ini memberikan efek visual yang lebih jelas pada setiap sel, yang mungkin berguna pada tabel yang lebih besar dengan banyak kolom dan baris. Nilai separate memungkinkan adanya ruang di antara garis batas, menjadikannya lebih mudah untuk membaca dan membedakan antara setiap sel dalam tabel.
Selain itu, penerapan properti borderCollapse juga dapat berpengaruh pada cara pengaturan lebar dan tinggi sel. Dalam tabel dengan nilai collapse, lebar dan tinggi sel cenderung lebih konsisten, karena batas antar sel dihilangkan. Ini membuat tabel terlihat lebih rapi dan mudah dibaca. Sebaliknya, pada penggunaan nilai separate, lebar dan tinggi sel bisa berbeda-beda karena adanya garis batas yang terpisah antara setiap sel, yang memberikan kesan lebih terpisah.
Tentu saja, dalam memilih apakah akan menggunakan nilai collapse atau separate, banyak hal yang harus dipertimbangkan, termasuk jenis dan tujuan tampilan tabel itu sendiri. Untuk tabel yang menyajikan data numerik atau informasi yang padat, penggunaan nilai collapse sering kali menjadi pilihan terbaik karena menghasilkan tampilan yang lebih padat dan teratur. Di sisi lain, untuk tabel yang menyajikan data lebih sedikit atau membutuhkan perhatian lebih pada pemisahan antar sel, nilai separate bisa lebih sesuai.
Penting juga untuk memahami bahwa pengaturan borderCollapse tidak memengaruhi tipe garis batas itu sendiri. Garis batas tetap dapat diatur dengan menggunakan properti lain seperti borderWidth, borderStyle, dan borderColor. Dengan demikian, meskipun properti borderCollapse mengatur cara penyajian batas antar sel, elemen-elemen dalam tabel tetap dapat diberi gaya tambahan untuk meningkatkan tampilan keseluruhan.
Bergantung pada kebutuhan desain dan fungsionalitas halaman web, pengaturan borderCollapse dapat menjadi alat yang sangat berguna untuk menciptakan tabel yang lebih rapi dan terstruktur. Tabel dengan borderCollapse yang disesuaikan dengan baik dapat membuat tampilan halaman web menjadi lebih profesional, memudahkan pembaca dalam mengakses informasi dengan cara yang lebih terorganisir. Namun, penggunaan yang tidak tepat dari properti ini dapat menyebabkan tampilan tabel menjadi kurang jelas, terutama ketika terlalu banyak informasi yang ditampilkan dalam satu tabel.
Pada dasarnya, penggunaan properti borderCollapse menjadi keputusan desain yang harus diambil dengan mempertimbangkan berbagai faktor. Pemilihan antara nilai collapse atau separate harus disesuaikan dengan jenis tabel yang akan dibuat, apakah itu untuk data numerik yang kompleks atau data yang lebih sederhana. Tabel yang dirancang dengan baik menggunakan properti ini dapat memperbaiki tampilan keseluruhan halaman web, memudahkan pembaca untuk mencerna informasi, dan menciptakan pengalaman pengguna yang lebih baik.
Dalam pengaturan layout halaman web, penggunaan borderCollapse harus dilakukan dengan hati-hati agar hasil akhir dari desain yang diinginkan tercapai. Properti ini, meskipun tampaknya sederhana, memiliki dampak besar pada cara elemen-elemen dalam tabel ditampilkan. Pengaturan yang tepat dapat membuat halaman web lebih bersih dan mudah dibaca, sementara pengaturan yang salah dapat membuat informasi sulit dipahami. Oleh karena itu, sangat penting untuk memahami peran dari borderCollapse dalam desain dan bagaimana cara penggunaannya dapat meningkatkan pengalaman visual pengguna secara keseluruhan.
Secara keseluruhan, properti borderCollapse menawarkan kontrol yang lebih besar bagi pengembang dalam menciptakan tampilan tabel yang sesuai dengan kebutuhan desain. Dengan pemahaman yang lebih dalam tentang cara kerjanya, penerapan properti ini dapat membuat elemen-elemen dalam tabel lebih teratur dan memberikan hasil yang lebih sesuai dengan keinginan tampilan halaman web. Properti ini tidak hanya berfungsi sebagai pengaturan batas antar sel, tetapi juga sebagai elemen penting dalam memperbaiki keseluruhan tampilan desain halaman web yang lebih profesional dan mudah dipahami.
Referensi Tambahan:
- 5 Contoh Properti borderImageSlice Style DOM pada HTML
- 4 Contoh Properti borderImageSource Style DOM pada HTML
- 6 Contoh Properti borderImageWidth Style DOM pada HTML
- 5 Value Properti borderLeft Style DOM pada HTML
- 4 Value Properti borderLeftColor Style DOM pada HTML
- 12 Value Properti borderLeftStyle DOM HTML
- 6 Value Properti borderLeftWidth Style DOM pada HTML
Artikel ini akan dibaca oleh: Fitria Eka Puspitasari, Geiska Agli Natasha Putri, Ghazi Dzulfikar Putra Bagus, Gilar Dwiki Yoga, dan Gladiza Cahyandaru Hakiki.
5 komentar untuk "Mengatur Border HTML Menggunakan borderCollapse Style DOM"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Jenis browser apa yang dapat digunakan untuk mengaktifkan properti borderCollapse Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderCollapse Style DOM pada HTML:
Hapus1. Google Chrome 1.2
2. Internet Explorer 4.0
3. Firefox 1.0
4. Opera 4.0
5. Safari 1.0
Apa yang dimaksud dengan properti borderCollapse style DOM pada HTML?
BalasHapusProperti borderCollapse Style DOM pada HTMl merupakan properti sytle yang dapat digunakan untuk mengatur atau mengembalikan nilai apakah batas tabel harus diciutkan atau tidak menjadi satu batas tertentu atau tidak.
HapusProperti borderBottomStyle DOM pada HTMl merupakan properti sytle yang dapat digunakan untuk mengatur atau mengembalikan nilai elemen TABLE apakah harus memiliki nilai batas bersama atau terpisah.
Hapus