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: Show Membuat Tabel 2 Baris 3 Kolom dengan CELLSPACING1. 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 http://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 http://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 HTMLAtribut 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 HTMLPeran 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. Apa itu cellspacing HTML?Sedangkan cellspacing adalah jarak antara kolom yang satu dengan kolom yang lainnya. Penulisannya berada pada tag <table> dilanjutkan dengan atribut cellpadding="berapa" dan boleh dilanjutkan lagi dengan atribut cellspacing="berapa".
Apa itu width di HTML?Atribut width dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag td, maupun tag col). Jika diletakkan pada tag table, atribut ini berfungsi untuk mengatur lebar tabel secara keseluruhan. Namun jika diletakkan pada tag th atau td, atribut ini akan berfungsi untuk mengatur lebar kolom.
Bagaimana cara untuk membuat baris pada table?Klik sel di atas atau di bawah tempat yang ingin Anda tambahkan baris. Di bawah Alat Tabel, di tab Tata Letak, lakukan salah satu hal berikut: Untuk menambahkan baris di atas sel, klik Sisipkan di Atas dalam grup Baris dan Kolom. Untuk menambahkan baris di bawah sel, klik Sisipkan di Bawah dalam grup Baris dan Kolom.
Apa yang dimaksud table border?Atribut border dalam tabel HTML
Atribut border digunakan untuk mengatur ketebalan dari garis tepi (border) dari tabel. Jika atribut ini tidak ditulis, maka web browser akan menampilkan tabel tanpa garis tepi.
|
Cara memberi jarak pada tabel HTML
Pos Terkait
Copyright © 2024 apakahyang Inc.
