Membuat Tabel Pada HTML

Perintah Dasar Membuat Tabel di HTML :

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Tanggal Lahir</th>
  </tr>
  <tr>
    <td>Ahmad Ridwan</td>
    <td>21-03-2013</td>
  </tr>
</table>

Apabila melihat contoh susunan tabel diatas, pengertian kode HTML nya adalah sebagai berikut :

<table> diakhiri dengan </table> : digunakan sebagai tanda awal tabel
<tr>..</tr> : digunakan sebagai tanda awal baris, tr kependekan dari table row
<th>..</th> : digunakan untuk membuat tampilan kolom header tabel, th kependekan dari table head
<td>..</td> : digunakan untuk menyusun kolom data, td kependekan dari table data
Setiap elemen dari kode HTML tersebut harus tersusun dan tertata dengan benar.
Perhatikan tanda slash / garis miring di setiap akhir elemen, itu merupakan kode penutup untuk kode pembuka di semua jenis kode HTML.

Atribut pendukung Tabel :

align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertikal
width : untuk mengatur lebar
height : untuk mengatur tinggi
border : untuk mengatur tebal garis
border-color : untuk memberi tebal garis dengan warna
cellpadding : untuk mengatur jarak garis dengan objek didalamnya
cellspacing : untuk mengatur jarak tiap cell
bgcolor : untuk mengatur warna
background : untuk mengatur latar gambar
rowspan : jumlah baris yang memotong beberapa baris
colspan : jumlah kolom yang memotong beberapa kolom

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">
	<tr>
		<td>Cell 1 - Baris 1 Kolom 1</td>
		<td>Cell 2 - Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Cell 3 - Baris 2 Kolom 1</td>
		<td>Cell 4 - Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Cell 5 - Baris 3 Kolom 1</td>
		<td>Cell 6 - Baris 3 Kolom 2</td>
	</tr> 
</table>

Hasil:

Cell 1 – Baris 1 Kolom 1	Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1	Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1	Cell 6 – Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.

Mengatur lebar dan tinggi tabel:
Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.
Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%">
	<tr>
		<td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 1</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 3 Kolom 1</td>
		<td>Baris 3 Kolom 2</td>
	</tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.

Menggabungkan kolom pada tabel:
Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.
Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<table border="1" width="75%">
	<tr>
		<td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
	</tr>
	<tr>
		<td style="width:50%">Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 3 Kolom 1</td>
		<td>Baris 3 Kolom 2</td>
	</tr>
</table>

Hasil:

Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<table border="1" width="75%">
	<tr>
		<td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 3 Kolom 1</td>
		<td>Baris 3 Kolom 2</td>
	</tr>
</table>

Hasil:

Gabungan Baris 1&2 pada Kolom 1	Baris 1 Kolom 2
	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Mengatur jarak kolom pada tabel:
Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

<table border="1" width="75%" cellpadding="8">
	<tr>
		<td style="width:50%;">Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="75%" cellspacing="8">
	<tr>
		<td style="width:50%">Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat titel pada tabel:
Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.
Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
	<tr>
		<th style="width:50%;">Header Kolom 1</th>
		<th>Header Kolom 2</th>
	</tr>
	<tr>
		<td>Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
</table>

Hasil:

Disini adalah titel tabel ini

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2