Tutorial Tabel HTML Part 5: Cara Membuat Garis Antara Baris dan Kolom Tabel (atribut rules)
Halo Kawan-kawan,
Dalam HTML talah disediakan atribut rules yang berguna untuk membuat dan mengubah garis pembatas antar sel (baris dan kolom) di dalam tabel HTML.
Karena atribut ini sangat berkaitan dengan tampilan untuk memperindah tabel, disarankan menggunakan CSS sebagai ganti atribut rules ini jika anda telah memahami CSS.
Atribut rules dapat berisi 1 diantara 4 nilai: rows, cols, all, atau none. Arti dari masing-masing nilai tersebut dapat dilihat pada kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh pemakaian attribut rules dalam Tabel HTML</title>
</head>
<body>
<h2>Belajar atribut rules dalam Tabel HTML</h2>
<h4>rules = "rows"</h4>
<caption><i>rows akan menampilkan garis pembatas hanya diantara baris</i></caption>
<table rules="rows">
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<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>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
<h4>rules = "cols"</h4>
<caption><i>cols akan menampilkan garis pembatas hanya diantara colom</i></caption>
<table rules="cols">
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<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>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
<h4>rules = "all"</h4>
<caption><i>all akan menampilkan garis pembatas untuk colom dan baris, namun tidak untuk garis pinggir</i></caption>
<table rules="all">
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<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>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
<h4>rules="none", border="1"</h4>
<caption><i>none digunakan jika tidak ingin menampilkan garis apapun pada tabel</i></caption>
<table rules="none" border="1" >
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<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>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
</body>
</html>
Hasil Code:
Dari hasil kode HTML diatas, terlihat perbedaan untuk masing-masing nilai rules. Anda bisa menggabungkan berbagai atribut lainnya seperti border, cellspacing, dan lain-lain untuk menghasilkan tabel sesuai dengan keinginan.
Didalam tutorial belajar HTML berikutnya, kita akan membahas tentang cara mengatur dan mengubah lebar tabel HTML dengan menggunakan atribut width.