Mengenal atribut Border, Cellpadding dan Cellspacing pada tabel HTML
Mengenal atribut Border, Cellpadding dan Cellspacing pada tabel HTML
Untuk menampilkan data yang telah diinputkan pada sebuah form web biasanya kita menampilkannya pada sebuah tabel agar terlihat lebih teratur dan rapi.
Namun sebelum itu kita perlu mengatur tabel tersebut seusai dengan apa yang kita inginkan, karena HTML mempunyai banyak atribut yang dapat kita gunakan untuk mengatur tabel HTML.
Pada situs Zikritekno ini admin sudah menyediakan beberapa tutorial mengatur tabel dengan HTML. Dan artikel kali ini kita masuk pada Tutorial part 1 yakni membahas tentang cara penggunaan atribut border, cellpadding, dan cellspacing.
Atribut Border pada Tabel HTML
Atribut border digunkan untuk mengatur ketebalan garis tepi (border) pada tabel. Jika atribut ini tidak ditulis didalam tag table, maka web browser akan menampilkan tabel tanpa garis tepi.
Cara penggunaan atribut ini nilainya berupa angka dan satuannya adalah pixel. Contoh border=”5”, pada perintah ini web browser akan menampilkan garis tepi pada semua sisi tabel sebesar 5 pixel. Walaupun perintah tersebut tidak menuliskan satuannya (5px), namun secara otomatis web browser akan membaca satuannya adala pixel.
File border.html
Perhatikan syntak diatas pada perintah pertama admin memberikan nilai border pada tabel pertama adalah 0. ini sama artinya membuat garis tepi pada tabel tidak terlihat.
Pada perintah kedua admin memberi nilai border pada tabel adalah 5. artinya membuat ketebalan garis tepi tabel sebesar 5pixel. Seperti gambar berikut :
Contoh penggunaan atribut ini adalah cellpadding=”6”. dari perintah ini web browser akan membuat jarak 6pixel antar isi tulisan tabel dengan garis tabel.
File cellpadding.html
Pada syntak diatas tabel pertama admin tidak memberikan jarak sama sekali antar isi tulisan dan garis tabel. Kemudian tabel kedua admin memberi jarak 8. Maka web browser akan membuat jarak antar isi tulian dengan garis tabel sebesar 8pixel. Seperti gambar berikut :
Perintah pada tabel pertama nilainya adalah 0, dan perintah pada tabel kedua adalah 10pixel. Teman bisa lihat perbedaan dari kedua perintah diatas sebagai berikut :
File border.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut border pada Tabel</title>
</head>
<body>
<h3>Belajar atribut border pada Tabel</h3>
<table border="0">
<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="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>
Perhatikan syntak diatas pada perintah pertama admin memberikan nilai border pada tabel pertama adalah 0. ini sama artinya membuat garis tepi pada tabel tidak terlihat.
Pada perintah kedua admin memberi nilai border pada tabel adalah 5. artinya membuat ketebalan garis tepi tabel sebesar 5pixel. Seperti gambar berikut :
 |
| Atribut border |
Atribut Cellpadding pada tabel HTML
Atribut cellpadding digunakan untuk mengatur jarak isi tulisan dengan garis pada tabel. Nilai dari atribut ini berupa angka dan satuannya adalah pixel.Contoh penggunaan atribut ini adalah cellpadding=”6”. dari perintah ini web browser akan membuat jarak 6pixel antar isi tulisan tabel dengan garis tabel.
File cellpadding.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellpadding pada Tabel</title>
</head>
<body>
<h3>Belajar atribut cellpadding pada Tabel</h3>
<table border="1" cellpadding="0">
<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="1" cellpadding="8">
<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 syntak diatas tabel pertama admin tidak memberikan jarak sama sekali antar isi tulisan dan garis tabel. Kemudian tabel kedua admin memberi jarak 8. Maka web browser akan membuat jarak antar isi tulian dengan garis tabel sebesar 8pixel. Seperti gambar berikut :
 |
| Atribut cellpadding |
Atribut Cellspacing pada tabel HTML
Atribut cellspacing digunakan untuk mengatur jarak antar garis dalam dengan garis luar pada tabel. Nilai dari atribut ini adalah angka dan satuannya pixel. Contoh penggunaanya cellspacing=”10”. maka web browser akan memberi jarak sebesar 10pixel.
File cellspacing.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellspacing pada Tabel</title>
</head>
<body>
<h3>Belajar atribut cellspacing pada Tabel</h3>
<table border="1" cellspacing="0">
<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="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>
</body>
</html>
Perintah pada tabel pertama nilainya adalah 0, dan perintah pada tabel kedua adalah 10pixel. Teman bisa lihat perbedaan dari kedua perintah diatas sebagai berikut :
 |
| Atribut cellspacing |
Dari ketiga atribut diatas kita dapat mengkombinasikannya kedalam tag tabel, Dan kita dapat menyesuaikan tampilan tabel sesuai dengan keinginan kita.
Itulah artikel singkat mengenal atribut border, cellpadding dan cellspacing pada tabel HTML. Selanjutnya admin akan membahas tutorial part 2 Cara membuat judul kolom/ header tabel HTML menggunakan (Tag th).
0 Response to "Mengenal atribut Border, Cellpadding dan Cellspacing pada tabel HTML"
Post a Comment