Sebelumnya kita sudah bahas cara mengatur lebar banyak kolom tabel HTML. Kali ini kita akan bahas cara mengatur garis antara kolom dan barisnya. Bagaimanakah langkah-langkahnya? Silakan simak panduan AneIqbal berikut sampai akhir.
Caranya adalah dengan menggunakan atribut rules. Atribut ini akan mengatur garis pembatas apakah terletak di antar baris, antar kolom, antar kolom dan baris, atau tidak ada garis.
Atribut rules ini memiliki 4 value, yakni: rows, cols, all, dan none. rows untuk antar baris. cols untuk antar kolom. all untuk antar kolom dan baris. none untuk tidak ada garis.
Supaya lebih mudah untuk memahaminya, mari kita praktikkan.
Buat kodingan HTML seperti berikut, lalu simpan dengan nama table-rules.html.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Garis Pembatas antara Kolom dan Tabel</title>
</head>
<body>
<h3>rules="rows"</h3>
<table rules="rows">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Umur</td>
</tr>
<tr>
<td>1.</td>
<td>si apel</td>
<td>20 tahun</td>
</tr>
<tr>
<td>2.</td>
<td>si jeruk</td>
<td>21 tahun</td>
</tr>
<tr>
<td>3.</td>
<td>si naga</td>
<td>22 tahun</td>
</tr>
</table>
<h3>rules="cols"</h3>
<table rules="cols">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Umur</td>
</tr>
<tr>
<td>1.</td>
<td>si apel</td>
<td>20 tahun</td>
</tr>
<tr>
<td>2.</td>
<td>si jeruk</td>
<td>21 tahun</td>
</tr>
<tr>
<td>3.</td>
<td>si naga</td>
<td>22 tahun</td>
</tr>
</table>
<h3>rules="all"</h3>
<table rules="all">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Umur</td>
</tr>
<tr>
<td>1.</td>
<td>si apel</td>
<td>20 tahun</td>
</tr>
<tr>
<td>2.</td>
<td>si jeruk</td>
<td>21 tahun</td>
</tr>
<tr>
<td>3.</td>
<td>si naga</td>
<td>22 tahun</td>
</tr>
</table>
<h3>rules="none"</h3>
<table rules="none">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Umur</td>
</tr>
<tr>
<td>1.</td>
<td>si apel</td>
<td>20 tahun</td>
</tr>
<tr>
<td>2.</td>
<td>si jeruk</td>
<td>21 tahun</td>
</tr>
<tr>
<td>3.</td>
<td>si naga</td>
<td>22 tahun</td>
</tr>
</table>
</body>
</html>
Hasilnya akan terlihat seperti berikut.
Terlihat kan perbedaan dari masing-masing value atribut rules? Seperti itulah cara mengatur garis antara kolom dan baris tabel. Garis pembatas membantu kita melihat data-data tabel menjadi lebih jelas dan tidak membingungkan.
Next >> cara mengatur ukuran tabel di HTML.
