Lebih lanjut dalam membuat tabel pada halaman HTML akan ada pengaturan yang melibatkan atribut border, cellpadding dan cellspacing. Atribut tersebut digunakan untuk membuat tampilan tabel agar lebih tertatur dan lebih rapi. Berikut masing masing penjelasannya.
Cara Mengatur Border pada tabel HTML
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.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment