Mengatur Border HTML Menggunakan borderCollapse Style DOM
 |
| Ilustrasi borderCollapse HTML |
- 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:
<!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 |
- 5 Contoh Properti borderImageSlice Style DOM pada HTML [klik]
- 4 Contoh Properti borderImageSource Style DOM pada HTML [klik]
- 6 Contoh Properti borderImageWidth Style DOM pada HTML [klik]
- 5 Value Properti borderLeft Style DOM pada HTML [klik]
- 4 Value Properti borderLeftColor Style DOM pada HTML [klik]
- 12 Value Properti borderLeftStyle DOM HTML [klik]
- 6 Value Properti borderLeftWidth Style DOM pada HTML [klik]
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