Penerapan Padding dan Spacing untuk Tabel pada HTML

Dengan Menambahkan Atribut Padding dan Spacing pada Dokumen HTML memungkinkan Anda untuk mengatur jarak (white space) pada Tabel. Spacing Membantu anda untuk mengatur jarak Lebar dari border , Sedangkan untuk mengatur jarak antara Border sel dengan isi dalam tabel Anda dapat menggunakan Atribut Padding.
Supaya Anda dapat membedakannya, Saya akan menambahkan Atribut bgcolor untuk memperjelas Antara Padding dan Spacing.


<html>
<head><title>Penerapan Padding dan Spacing</title>
</head>
<body>
<table border="1" cellspacing="10"  bgcolor="red">
<th>kolom1</th>
<th>kolom2</th>
<th>kolom3</th>
<tr><td>baris1 kolom1</td><td>baris1 kolom2</td><td>baris1 kolom3</td></tr>
<tr><td>baris2 kolom1</td><td>baris2 kolom2</td><td>baris2 kolom3</td></tr>
</table>
</body>
</html>

Efek dari Web Browser adalah sebagai berikut :

Tampilan Browser

Gambar diatas adalah efek dari penerapan Atrbut Cellspacing, Sedangkan untuk mengetahui efek dari cellspadding, kita modifikasi script diatas, Cukup anda ganti Cellspacing dengan Cellpadding.
Contoh:


<html>
<head><title>Penerapan Padding dan Spacing</title>
</head>
<body>
<table border="1" cellpadding="10"  bgcolor="red">
<th>kolom1</th>
<th>kolom2</th>
<th>kolom3</th>
<tr><td>baris1 kolom1</td><td>baris1 kolom2</td><td>baris1 kolom3</td></tr>
<tr><td>baris2 kolom1</td><td>baris2 kolom2</td><td>baris2 kolom3</td></tr>
</table>
</body>
</html>

Maka Respon dari Web Browser adalah sebagai berikut :

Tampilan Browser

Nilai Default yang ditentukan oleh Web Browser untuk Padding dan Spacing adalah Nilai Pixel.

Meletek (Melek Teknologi)

Penerapan Padding dan Spacing untuk Tabel pada HTML

No comments: