Dalam perancangan tabel di HTML, dikenal atribut CELLSPACING dan CELLPADDING. CELLSPACING digunakan untuk melebarkan jarak antara sel di tabel, sedangkan CELLPADDING digunakan untuk melebarkan ukuran sel di tabel. Untuk memahami bagaimana penggunaan CELLSPACING dan CELLPADDING di HTML, berikut langkah-langkahnya:
Membuat Tabel 2 Baris 3 Kolom dengan CELLSPACING
1. Buka XAMPP Control Panel dan aktifkan Apache dan MySql.
2. Buka text editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut.
Penting : semakin besar nilai CELLSPACING yang kamu masukkan, semakin jauh jarak antara sel. Disini saya membandingkan antara “CELLSPACING = ‘10’” dan “CELLSPACING =’20’”.
<html> <head> <title>Membuat Tabel</title> </head> <body> <font FONT FACE="Comic Sans MS" size="6" color='blue'><b>Contoh Membuat Tabel dengan CELLSPACING.</b></font> <br/> <font FONT FACE="Verdana" size="4" color='brown'><b>Nilai CELLSPACING = '10'</b></font> <br/> <TABLE BORDER="1" CELLSPACING="10"> <TR> <TD>Baris 1 Kolom 1</TD> <TD>Baris 1 Kolom 2</TD> <TD>Baris 1 Kolom 3</TD> </TR> <TR> <TD>Baris 2 Kolom 1</TD> <TD>Baris 2 Kolom 2</TD> <TD>Baris 2 Kolom 3</TD> </TR> </TABLE> <font FONT FACE="Verdana" size="4" color='brown'><b>Nilai CELLSPACING = '20'</b></font> <br/> <TABLE BORDER="1" CELLSPACING="20"> <TR> <TD>Baris 1 Kolom 1</TD> <TD>Baris 1 Kolom 2</TD> <TD>Baris 1 Kolom 3</TD> </TR> <TR> <TD>Baris 2 Kolom 1</TD> <TD>Baris 2 Kolom 2</TD> <TD>Baris 2 Kolom 3</TD> </TR> </TABLE> </body> </html>3. Simpan script code di atas, simpan di folder xampplite – htdocs – buat folder baru (disini saya buat folder baru dengan nama “inwepo”) – saya simpan dengan nama file “tabel1.php”.
4. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah //localhost/inwepo/tabel1.php
Membuat Tabel 2 Baris 3 Kolom dengan CELLPADDING
1. Buka XAMPP Control Panel dan aktifkan Apache dan MySql.
2. Buka text editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut.
Penting : semakin besar nilai CELLPADDING yang kamu masukkan, semakin luas isi sel. Disini saya membandingkan antara “CELLPADDING = ‘10’” dan “CELLPADDING =’20’”.
<html> <head> <title>Membuat Tabel</title> </head> <body> <font FONT FACE="Comic Sans MS" size="6" color='blue'><b>Contoh Membuat Tabel dengan CELLPADDING</b></font> <br/> <font FONT FACE="Verdana" size="4" color='brown'><b>Nilai CELLPADDING = '10'</b></font> <br/> <TABLE BORDER="1" CELLPADDING="10"> <TR> <TD>Baris 1 Kolom 1</TD> <TD>Baris 1 Kolom 2</TD> <TD>Baris 1 Kolom 3</TD> </TR> <TR> <TD>Baris 2 Kolom 1</TD> <TD>Baris 2 Kolom 2</TD> <TD>Baris 2 Kolom 3</TD> </TR> </TABLE> <font FONT FACE="Verdana" size="4" color='brown'><b>Nilai CELLPADDING = '20'</b></font> <br/> <TABLE BORDER="1" CELLPADDING="20"> <TR> <TD>Baris 1 Kolom 1</TD> <TD>Baris 1 Kolom 2</TD> <TD>Baris 1 Kolom 3</TD> </TR> <TR> <TD>Baris 2 Kolom 1</TD> <TD>Baris 2 Kolom 2</TD> <TD>Baris 2 Kolom 3</TD> </TR> </TABLE> </body> </html>3. Simpan script code di atas, simpan di folder xampplite – htdocs – buat folder baru (disini saya buat folder baru dengan nama “inwepo”) – saya simpan dengan nama file “tabel1.php”.
4.Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah //localhost/inwepo/tabel1.php
Demikian penjelasan dari tutorial tentang ‘Cara Membuat Tabel dengan CELLSPACING dan CELLPADDING di HTML’. Selamat mencoba.
Atribut border dalam pembuatan tabel HTML digunakan untuk menandai besar bingkai dari tabel. Atau garis pada bagian pinggir tabel. Jika ini tidak ditulis maka tabel akan ditampilkan tanpa bingkai.
Atribut ini diikuti dengan angka dengan penulisan contoh border='3'. Browser akan mengeksekusi tampilan tabel dengan garis pinggir aatu bingkai sebesar 3 pixel. Untuk lebih jelasnya bisa dijalankan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>nandaja</title>
</head>
<body>
<h3>Membuat Border Tabel pada HTML</h3>
<table > <!--Tanpa Border-->
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="6"> <!-- Border 6 pixel-->
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Untuk tabel pertama dibentuk tanpa adanya perintah border. Anda bisa lihat apa yang diperoleh pada kotak berwarna merah. Pada tabel ke-dua digunakan border 6 pixel. Anda bisa melihat tampilan pada bagian kotak biru.
Cara Mengatur Cellpadding pada tabel HTML
Atribut cellpadding berguna untuk mengatur jarak antara border dari semua sisi tabel dengan konten di dalam tabel. Penulisannya hampir sama dengan atribut border. Dimana angka dinilai dalam satu pixel. Sebagai contoh bisa dilihat pada kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>nandaja</title>
</head>
<body>
<h3>Membuat Cellpadding Tabel pada HTML</h3>
<table>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="6" cellpadding = "5">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Pada gambar di atas terlihat jarak pinggir tabel denagnmasing masing isi dalah 5 px. Karena saya telah memasukkan pengaturan 5 px untuk cellpadding. Tabel akan tambah lebih tapi dan bersih dengan menggunakan ini.
Cara Menggunakan Cellspacing dalam HTML
Peran cellspacing ini adalah memberi jarak antara bagian tepi luar tabel. Sebagai contoh bisa liaht pada kode di bawah ini yang bisa anda jalankan.
<!DOCTYPE html>
<html>
<head>
<title>nandaja</title>
</head>
<body>
<h3>Membuat Cellpadding Tabel pada HTML</h3>
<table>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="6" cellpadding = "5" cellspacing="4">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Tabel akan tampak lebih rapi lagi. Karena tulisan teks tidak terlalu dekat dengan pinggiran tabel.Ruang pada isi tabel akan diberikan sedikit jarak untuk teks dan bagian border tabel (untuk tabel ini 4 px sebagaimana tertulis pada kode yang beri warna biru.