HTML Table

by

Tutorial selanjutnya adalah membuat tabel di HTML.

Tabel adalah element penting yang harus kamu ketahui di HTML. Ada banyak fungsi tabel, yaitu:

  • Menampilkan data informasi
  • Membuat layout sederhana
  • Membuat tabel harga (pricing) yang keren

Sebelum ada tag <div>...</div> dulu orang membuat layout website dengan menggunakan tabel html.

Bagaimana caranya?

Sabar, nanti akan kita bahas step by stepnya. Sekarang, pahami dulu konsep cara membuat tabelnya.

Daftar Isi
  1. Syntax Elemen Tabel
  2. Study Kasus Membuat HTML Table Sederhana
  3. Menggabungkan Baris dan Kolom
  4. Mengatur Ukuran Tabel
  5. Thead dan Tbody
  6. Memberi border dan background warna tabel
  7. Implementasi Table Style

Syntax Elemen Tabel

Untuk membuat tabel dibutuhkan sebuah tag, ada 3 elemen tag yang harus benar-benar kamu pahami. Yaitu:

  • Tag elemen tabel <table>...</table>
  • Tag elemen baris <tr>...</tr>
  • Tag elemen kolom <td>...</td>

Selain itu, saat ini juga ada tag <thead>..</thead> dan <tbody>...</tbody>. Fungsi keduanya sama seperti <head>..</head> dan <body>...</body>, bedanya khusus untuk data tabel.

<thead>...</thead> untuk mendefinisikan kepala / jenis kolomnya, misalkan kolom nomor, usia, nama, dll. Sedangkan <tbody>..</tbody> berisi row yang menampilkan datanya.

Study Kasus Membuat HTML Table Sederhana

Biar tidak bingung, kita akan mencoba membuat tabel dengan ukuran 3×2. Artinya 3 kolom dan 2 baris seperti berikut:

kolom 1 baris 1kolom 2 baris 1kolom 3 baris 1
kolom 1 baris 2kolom 2 baris 2kolom 3 baris 2

Tabel diatas bisa dibuat dengan menulis kode berikut:

<table>
	<tr>
		<td>kolom 1 baris 1</td>
		<td>kolom 2 baris 1</td>
		<td>kolom 3 baris 1</td>
	</tr>
	<tr>
		<td>kolom 1 baris 2</td>
		<td>kolom 2 baris 2</td>
		<td>kolom 3 baris 2</td>
	</tr>
</table>

Urutan penulisannya kode kolom ada di dalam baris

Jadi, kita buat baris dulu baru membuat kolomnya. Bukan membuat kolomnya dulu baru barisnya.

Misal membuat 1 baris 1 kolom, kodenya: <tr><td>baris 1 kolom 1</td></tr>

Menggabungkan Baris dan Kolom

Ada kalanya kita harus menggabungkan banyak baris atau kolom menjadi satu, bahasa umumnya adalah merge.

Contohnya kita akan buat tabel seperti dibawah:

kolom 1+2 baris 1 kolom 3 baris 1 kolom 4 baris 1+2+3
kolom 1 baris 2 kolom 2+3 baris 2
kolom 1 baris 3 kolom 2 baris 3 kolom 3 baris 3

Tampilan tabel diatas, didapat dari kode:

<table>
	<tr>
		<td colspan="2">kolom 1+2 baris 1</td>
		<td>kolom 3 baris 1</td>
		<td rowspan="3">kolom 4 baris 1+2+3</td>
	</tr>
	<tr>
		<td>kolom 1 baris 2</td>
		<td colspan="2">kolom 2+3 baris 2</td>
	</tr>
	<tr>
		<td>kolom 1 baris 3</td>
		<td>kolom 2 baris 3</td>
		<td>kolom 3 baris 3</td>
	</tr>
</table>

Ada 2 jenis merge, yaitu:

  • Merge baris dengan atribut rowspan="angka"
  • Merge kolom dengan atribut colspan="angka"

Perhatikan pada kode diatas, pada baris pertama saya menambahakan kode colspan="2" untuk kolom 1 dan 2 sehingga menjadi 1.

Kemudian di kolom 4, saya merge semua baris menjadi satu dengan kode rowspan="3", yang berarti menggabungkan 3 baris menjadi satu.

Masih bingung? Coba diotak-atik dan praktik sendiri ya!

Mengatur Ukuran Tabel

Ukuran tabel dapat diatur sesuai dengan kebutuhan. Satuan yang umum digunakan adalah px (piksel) dan % (persen).

Ukuran persen % menggunakan acuan dari block yang ada diluarnya.

Misalkan, tabel ada didalam halaman yang lebarnya 500px. Maka jika tabel diset width="50%" maka panjang tabel 50% dari 500px yaitu 250px.

Jika tidak ada block terluarnya, maka akan mengikuti 100% resolusi layar monitor.

Selain width, ada beberapa ukuran yang perlu kamu ketahui.

  • Height=" " untuk mengatur tinggi tabel
  • Padding=" " untuk mengatur padding / jarak dalam dengan obyek lain
  • Margin=" " untuk mengatur margin / jarak luar dengan obyek lain

Untuk kamu yang masih newbie, tentu bingung membedakan padding dan margin. Perhatikan illustrasi berikut:

Kalau kamu masih bingung, praktik saja dengan mencoba angka-angka yang besar.

Saya dulu pas awal belajar juga bingung, hehe

Thead dan Tbody

Sudah disinggung diatas, saat ini ada 2 elemen baru yang ada di table yaitu <thead> dan <tbody>.

Apakah ini wajib dipakai?

Jawabanya tidak! Tag ini digunakan supaya kode lebih rapi saja, dan memudahkan browser / search engine membaca struktur kode.

Ada satu tag khusus untuk menuliskan kolom di <thead> ingat ya hanya di <thead>!

Kalau sebelumnya untuk membuat kolom kita menggunakan <td> maka khusus kolom di <thead> menggunakan <th>.

Ngingetnya gampang, pokoknya kalau di thead pake th (h=head).

Jadi, nulis kodenya menjadi berikut ini:

<thead>
	<tr>
	<th>No</th>
	<th>Nama</th>
	<th>Kelamin</th>
	</tr>
</thead>

Lalu dimana letak kode <tbody>? Kode tersebut diletakkan setelah </thead> sebelum </table>.

Sehingga struktur tabelnya (tanpa kolom dan baris) menjadi berikut ini:

<table>
	<thead>
		
	</thead>
	<tbody>
		
	</tbody>
</table>

Memberi border dan background warna tabel

Tahap ini untuk mempercantik tampilan dari tabel secara sederhana tanpa ngoding css yang ribet.

Sangat nggak banget kan kalau tabel yang ditampilkan gitu-gitu aja? Dan tidak menarik.

Ada 2 hal yang perlu diperhatikan biar tabel makin keren, yaitu: border dan background.

Border adalah garis tepi dari tabel tersebut, sedangkan background adalah warna belakang dari tabel. Misalkan tabel berikut:

Ada bordernya tapi tidak ada backgroundnya. Kalau ini tabel warna merah baris warna hitam tanpa border:

  
  

Warna merah diatas adalah warna merah background tabel, kenapa merah? Karena antar kolom itu ada margin 1px.

Untuk menambahkan border, kita perlu menambah atribut border="". Misal untuk menambah garis tepi tabel, <table border="20px">, jadi tabel akan punya border setebal 20px.

Atribut border juga bisa dipakai di <tr>, <td>, <thead>, <tbody>, dan <th>.

Untuk mengganti background table ditambahkan atribu style, yaitu: style="background:#kodewarna".

Kode warna bisa kamu dapatkan disini.

Implementasinya misal ingin mengganti warna baris: <tr style=:"background:red"></tr> maka baris kolom otomatis berwarna merah.

Implementasi Table Style

Terakhir adalah mengimplementasi teori diatas menjadi sebuah tabel yang menarik.

<table width="100%">
	<thead>
		<tr style="background: #fffd38">
			<td width="20px">No</td>
			<td>Nama</td>
			<td>Kelamin</td>
		</tr>
	</thead>
	<tbody>
		<tr style="background: #808080">
			<td>1</td>
			<td>Puntadewa</td>
			<td>Laki-laki</td>
		</tr>
		<tr style="background: #acb9c9; border: 5px; #4eff00">
			<td>2</td>
			<td>Werkudara</td>
			<td>Laki-laki</td>
		</tr>
		<tr style="background: #fb0d1c">
			<td>3</td>
			<td>Janaka</td>
			<td>Laki-laki</td>
		</tr>
		<tr style="background: #73ac4d">
			<td>4</td>
			<td>Nakula</td>
			<td>Laki-laki</td>
		</tr>
		<tr style="background: #a5a5a5">
			<td>5</td>
			<td>Sadewa</td>
			<td>Laki-laki</td>
		</tr>
	</tbody>
</table>

Tampilan dari kode diatas akan menjadi tabel seperti berikut:

No Nama Kelamin
1 Puntadewa Laki-laki
2 Werkudara Laki-laki
3 Janaka Laki-laki
4 Nakula Laki-laki
5 Sadewa Laki-laki

Silahkan berkreasi sendiri ya!

Leave a Comment