Belajar HTML: Mengatur Sel dalam Tabel Menggunakan Padding dan Spacing

By Adhi P. - Last updated: Sunday, April 8, 2012 - Save & Share - Comments

banner438kursus Belajar HTML: Mengatur Sel dalam Tabel Menggunakan Padding dan Spacing

Tutorial belajar HTML tabel kemarin akan kita lanjutkan dengan mempelajari cell padding dan spanning yang gunanya untuk mengatur border dan jarak konten dengan border.

Beberapa waktu yang lalu ada yang nanya di Facebook belajar cara membuat website prothelon.com seperti ini:

“klo script utk misahin / buat jarak gmn yah ? misal.y sy buat kolom2,dan baris 2 …

jadi out.y bisa kita buat jarak hingga sprti ada rongga bgituu..

out.y itu tampilan Layout . hasil eksekusi dari script”

Sebenarnya saya belum terlalu jelas maksud pertanyaannya. Namun mudah-mudahan tutorial belajar HTML tabel kali ini bisa jadi solusi. Kita bisa menggunakan parameter cellpadding dan cellspacing untuk memecahkan masalah tersebut. Kita bisa mengatur banyak nya white space dalam tabel yang kita buat (maksud white space di sini mudah-mudahan sama dengan “rongga” dalam pertanyaan tersebut.

Spacing kita gunakan untuk menentukan lebar batas antar sel, seddangkan padding kita gunakan untuk menentukan jarak antara pembatas sel dengan content atau isinya.

Mari kita lihat contoh kodenya.

Kita akan menggunakan contoh terakhir dari tutorial belajar HTML tabel sebelumnya dengan sedikit modifikasi.

Kita akan membuat 2 contoh kode yang persis sama dengan sedikit perbedaan yaitu pada baris pertama saat definisi tabel HTML.

Di sana kita akan menggunakan cellspacing dan cellpadding.


<table border="1" cellspacing="10"

bgcolor="rgb(0,255,0)">

<tr>

<th>Judul Kolom 1</th>

<th>Judul Kolom 2</th>

</tr>

<tr><td>Baris 1 Kolom 1</td><td>Baris 1 Kolom 2</td></tr>

<tr><td>Baris 2 Kolom 1</td><td>Baris 2 Kolom 2</td></tr>

</table>

Silakan dicoba untuk melihat hasilnya. Seharusnya kamu akan melihat bahwa balebar border atau pembatas antara sel akan lebar.

 

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

Kode berikut ini akan membuat sebuah tabel HTML dengan lebar border standar yaitu 1 namun tulisan isinya berada di tengah sel dengan jarak yang cukup jauh dari border tabel HTML kita tersebut. Jaraknya adalah 10 pixel.


<table border="1" cellpadding="10"

bgcolor="rgb(0,255,0)">

<tr>

<th>Judul Kolom 1</th>

<th>Judul Kolom 2</th>

</tr>

<tr><td>Baris 1 Kolom 1</td><td>Baris 1 Kolom 2</td></tr>

<tr><td>Baris 2 Kolom 1</td><td>Baris 2 Kolom 2</td></tr>

</table>

Selamat mencoba.

Posted in Tutorial Belajar HTML • Tags: , , Top Of Page