Tutorial Tabel HTML: Cara Mengatur Garis Antara Kolom dan Baris Tabel

mengatur garis antara kolom dan baris tabel

Di postingan sebelumnya, kita sudah membahas cara mengatur lebar kolom tabel dengan cepat dan mudah yaitu dengan menggunakan tag <col>. Selain mempermudah pengaturan lebar kolom, tag tersebut dapat memudahkan kita untuk styling kolom dengan CSS.

Di postingan ini, kita akan membahas cara mengatur garis antara kolom dan baris tabel. Bagaimana caranya? 

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.
mengatur garis antara kolom dan baris tabel

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.


0 Komentar untuk "Tutorial Tabel HTML: Cara Mengatur Garis Antara Kolom dan Baris Tabel"