Belajar Kode CSS & Desain Blog: CSS Border Spacing Property

CSS border-spacing property digunakan pada elemen table dan berfungsi untuk mengatur jarak antara bagian elemen table (cell) dengan border table. Penggunaan spacing property hanya bisa digunakan untuk deklarasi border-collapse:separate; dan tidak untuk nilai yang lain (contoh:collapse).

Declaration

border-spacing: value;

border-spacing: <length>;
border-spacing: LEFT-RIGHT-TOP-BOTTOM;
border-spacing: ...px;
border-spacing: ...em;

border-spacing: <length> | <length>;
border-spacing: LEFT-RIGHT | TOP-BOTTOM;
border-spacing: ..px | ..px;
border-spacing: ..em | ..em;

Contoh border-spacing pada elemen/syntax css

<style type="text/css">
table.contoh{
      border-spacing:10px;
}
</style>

<table class="contoh" border=4>
<tr>
<td>Content here!</td>
<td>Content here!</td>
</tr>
</table>

Di bawah ini telah disertakan demo penggunaan border-spacing property pada elemen table. Edit dan lihat perubahan yang terjadi dengan merubah nilai border-spacing property.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>CSS border-spacing Property</title>
<head>
<style type="text/css">
#konten{margin:15px 5px;padding:20px;background:#eee;box-shadow:0 0 20px #555;border-radius:6px;}
</style>

<style type="text/css">
table.collapse{
      border-collapse: collapse;
}
table.separate{
      border-collapse: separate;
}
table.satu {
      border-spacing:15px;
}
table.dua{
      border-spacing:20px;
}
table.tiga{
      border-spacing:20px 5px;
}
table.empat{
      border-spacing:10px 50px;
}
table{margin:20px 10px;}
table td{padding:0 6px;}
div.test{
      border:2px solid red;
      border-spacing:10px 40px;
}
</style> 

</head>

<body>
<div id="konten">

<h3>Berfungsi pada border-collapse: separate;</h3>

<table class="satu separate" border=20>
<tr>
<td>konten-1</td>
<td>konten-2</td>
</tr>
</table>

<h3>Tak berfungsi pada border-collapse: collapse;</h3>
<table class="satu collapse" border=20>
<tr>
<td>konten-1</td>
<td>konten-2</td>
</tr>
</table>

<table class="dua" border=5>
<tr>
<td>konten-1</td>
<td>konten-2</td>
</tr>
</table>

<table class="tiga" border=4>
<tr>
<td>konten-1</td>
<td>konten-2</td>
</tr>
</table>

<table class="empat" border=4>
<tr>
<td>konten-1</td>
<td>konten-2</td>
</tr>
</table>
</div>
</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

CSS Border Spacing Property

Declaration

Contoh border-spacing pada elemen/syntax css

1 komentar:

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('9.11.2012');

CSS Border Spacing Property

Declaration

Contoh border-spacing pada elemen/syntax css

1 komentar:

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e