HTML menyediakan sebuah atribut yang dapat digunakan untuk mengontrol garis pembatas antara baris dan kolom ini, yakni atribut rules. Penulisan atribut rules di letakkan pada tag table. Atribut rules dapat berisi 1 diantara 4 nilai: rows, cols, all, atau none.
Sesuai dengan arti dari masing-masing nilai tersebut, jika kita menambahkan atribut rules=”cols”pada tabel, maka untuk setiap sel akan ditampilkan garis pembatas hanya diantara kolom. Sedangkan atribut rules=”rows” akan menampilkan garis pembatas hanya diantara baris.
Jika menginginkan garis tampil baik untuk kolom maupun untuk baris tabel, kita dapat menggunakan atribut rules=”all”. Sebaliknya jika tidak ingin menampilkan garis apapun diantara sel, bisa menggunakan atribut rules=”none”.
Berikut adalah contoh dari kode HTML yang menggunakan atribut rules, savelah sebagai tabelrules.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | <!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><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><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><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><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> |
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.
