Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Batas Spasi HTML Menggunakan borderSpacing Style DOM

Properti Style borderSpacing DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai spasi diantara sel yang terdapat pada suatu tabel HTML.

3 Value Properti borderSpacing Style DOM pada HTML
Ilustrasi borderSpacing HTML

Sebelum memahami lebih dalam materi tentang Mengatur Batas Spasi HTML Menggunakan borderSpacing Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Lebar Border HTML Menggunakan borderRightWidth Style DOM [klik], Mengatur Batas Kanan HTML Menggunakan borderRightStyle DOM [klik], dan Mendefinisikan Judul HTML Menggunakan Tag Legend [klik].

Sintak:
  • untuk mendapatkan nilai properti borderSpacing: object.style.borderSpacing
  • untuk mengatur nilai properti borderSpacing: object.style.borderSpacing = "length | initial | inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string, yang merepresentasikan ruang diantara sel pada tabel HTML.

Baca Juga:

Property Values:
  • length: digunakan untuk menentukan nilai length diantara sel yang saling bersesuaian dengan unit, dimana tidak diperbolehkan ada nilai negatif yang disertakan pada value ini, dimana nilai default-nya adalah 0.
  • initial: digunakan untuk mengatur properti borderSpacing ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan dari elemen parent.

Beberapa contoh demonstrasi program yang menggunakan value dari properti borderSpacing diperlihatkan sebagai berikut.

Contoh: penggunaan satu nilai untuk menentukan nilai spasi horizontal dan vertikal secara bersamaan.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style BorderSpacing 

DOM

</title>

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style BorderSpacing 

DOM

</b>

 

<table 

id="table" 

border="1">

 

<tr>

<th>Author</th>

<th>Articles</th>

</tr>

 

<tr>

<td>Junai</td>

<td>101</td>

</tr>

 

<tr>

<td>Junet</td>

<td>51</td>

</tr>

 

<tr>

<td>Dudun</td>

<td>231</td>

</tr>

 

</table>

 

<br>

 

<button 

type="button" 

onclick="changeSpacing()">

Change border spacing

</button>

 

<script>

function changeSpacing() 

{

elem = document.querySelector("#table");

// Pengaturan spasi border

elem.style.borderSpacing = "10px";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderSpacing DOM
AuthorArticles
Junai101
Junet51
Dudun231



Contoh: penggunaan dua nilai untuk menentukan spasi horizontal dan vertikal secara terpisah.

<!DOCTYPE html>

<html>

 

<head>

<title>

DOM Style BorderSpacing

</title>

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style BorderSpacing 

DOM

</b>

 

<table 

id="table" 

border="1">

 

<tr>

<th>Author</th>

<th>Articles</th>

</tr>

 

<tr>

<td>Jinny</td>

<td>102</td>

</tr>

 

<tr>

<td>Simorangkir</td>

<td>52</td>

</tr>

 

<tr>

<td>Tony</td>

<td>232</td>

</tr>

 

</table>

 

<br>

 

<button 

type="button" 

onclick="changeSpacing()">

Change border spacing

</button>

 

<script>

function changeSpacing() 

{

elem = document.querySelector("#table");

// Pengaturan spasi border

elem.style.borderSpacing = "20px 5px";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderSpacing DOM
AuthorArticles
Jinny102
Simorangkir52
Tony232



Contoh: penggunaan nilai initial.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style BorderSpacing

DOM

</title>

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style BorderSpacing

</b>

 

<table 

id="table" 

border="1">

 

<tr>

<th>Author</th>

<th>Articles</th>

</tr>

 

<tr>

<td>Dian</td>

<td>103</td>

</tr>

 

<tr>

<td>Bebeng</td>

<td>53</td>

</tr>

 

<tr>

<td>Tina</td>

<td>233</td>

</tr>

 

</table>

 

<br>

 

<button 

type="button" 

onclick="changeSpacing()">

Change border spacing

</button>

 

<script>

function changeSpacing() 

{

elem = document.querySelector("#table");

// pengaturan spasi border

elem.style.borderSpacing = "initial";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

DOM Style BorderSpacing
AuthorArticles
Dian103
Bebeng53
Tina233



Contoh: penggunaan nilai inherit.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style BorderSpacing 

DOM

</title>

 

<style>

/* Pengaturan spasi border 

dari nilai parent */

#parent 

{

border-spacing: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style BorderSpacing 

DOM

</b>

 

<div 

id="parent">

 

<table 

id="table" 

border="1">

 

<tr>

<th>Author</th>

<th>Articles</th>

</tr>

 

<tr>

<td>Dudun</td>

<td>104</td>

</tr>

 

<tr>

<td>Sima</td>

<td>54</td>

</tr>

 

<tr>

<td>Cima</td>

<td>234</td>

</tr>

 

</table>

 

</div>

 

<br>

 

<button 

type="button" 

onclick="changeSpacing()">

Change border spacing

</button>

 

<script>

function changeSpacing() 

{

elem = document.querySelector("#table");

// Pengaturan spasi border

elem.style.borderSpacing = "inherit";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderSpacing DOM
AuthorArticles
Dudun104
Sima54
Cima234


Artikel ini didedikasikan kepada: Luthfia Nabila, M. Satria Adi Pradana, Maulana Lazuardi, Melindha Adhyana, dan Michael Kevin Bryan Sahertian.

5 komentar untuk "Mengatur Batas Spasi HTML Menggunakan borderSpacing Style DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderSpacing Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderSpacing Style DOM pada HTML:
      1. Chrome
      2. Internet Explorer 9.0
      3. Firefox
      4. Opera
      5. Safari

      Hapus
  2. Apa yang dimaksud dengan properti borderSpacing Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti borderSpacing merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai antar ruang sel dalam suatu tabel pada dokumen HTML.

      Hapus
    2. Properti borderSpacing merupakan properti yang digunakan untuk menetapkan atau mendapatkan nilai ruang antar sel dalam suatu table, dimana properti ini tidak akan berpengaruh apapun pada suatu elemen jika properti borderCollapse digunakan atau diaktifkan ke tipe collapse atau diciutkan.

      Hapus

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 -
- Big things start from small things -