Untuk kali ini saya akan lanjutkan lagi untuk memposting sebuah tutorial yang berkaitan dengan HTML. Tutorial ketiga ini akan bercerita tentang HTML. Untuk yang pertama sudah saya jelaskan tentang penformatan text menggunakan HTML, lalu tutorial kedua tentang List dalam penggunaannya di HTML. Sedangkan untuk tutorial yang ketiga akan mengupas tentang cara pembuatan tabel menggunakan HTML.

Pada awalnya tabel digunakan untuk membuat layout sebuah website, tetapi karena kehadiaran CSS (Cascading Style Sheet), tabel beralih fungsi sebagai penempatan obyek secara tabular, misalnya digunakan untuk penempatan form HTML. Sebelum kita mempelajari tag HTML yang digunakan untuk membuat sebuah tabel, ada baiknya kita harus tahu apa yang dimaksud dari tabel. Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Sebuah tabel biasanya memiliki atribut judul, kolom, baris, border, cellpadding, cellspacing, colspan, dan rowspan. Ditabel ada yang dikenal dengan  nama cell, pertemuan antara baris dan kolom akan membentuk sebuah cell. Tabel yang terstruktur akan di bagi menjadi 3 bagian, yaitu tabel head  (kepala) biasa di sebut <thead>, tabel body (tubuh) biasa disebut dengan <tbody>, dan tabel footer (penutup/kaki-kaki) biasa di kenal dengan nama <tfoot>. Sedangkan jika tabel yang tidak terstruktur bagian-bagian tersebut boleh tidak di berikan.

Untuk mempelajari Tabel kita harus tahu dan hafal dengan tag-tag bagian untuk membangun sebuah tabel, adapun tag-tag HTML tersebut sebagai berikut:

<table>…</table>
Tag yang menyatakan bahwa objek yang akan kita buat berbentuk tabel

<caption>…</caption>
Tag yang digunakan untuk memberikan judul/pengenal dari sebuah tabel

<table cellpadding=”">…</table>
Tag yang digunakan untuk memberikan jarak antara garis tepi cell dengan isi yang ada didalamnya. Untuk atribut cellpadding akan diletakkan dalam satu tag dengan tag tabel.

<table cellspacing=”">…</table>
Tag yang digunakan untuk memberikan jarak antara satu cell dengan cell yang lainnya. untuk penulisan tag cellspacing akan diletakkan dalam satu tag dengan tag table.

<table border=”">…</table>
Tag yang digunakan untuk memberikan garis tepi(border) dari sebuah tabel. Tag border dapat digunakan untuk mengatur ketebalan garis tepi tergantung dari ukuran/bilangan yang diberikan. Untuk tag border diletakkan dalam satu tag dengan tag tabel.

<tr>…</tr>
Tag tr (table row) digunakan untuk membuat sebuah baris dari sebuah tabel. Tag row (baris) diletakkan di bagian dalam dari tag tabel.

<th>…</th>
Tag th (table header) digunakan untuk memberikan judul dari sebuah kolom dari suatu tabel. Tulisan header akan secara otomatis di cetak tebal. Tag th diletakkan di bagian dalam dari tag tr.

<td>…</td>
Tag yang digunakan untuk membuat sebuah kolom dari sebuah tabel. Untuk tag td (kolom) akan diletakkan di bagian dalam tag tr (baris). Kolom dapat dibentuk apabila sudah ada sebuah baris.

<td colspan=”">…</td>
Tag yang digunakan untuk menggabungkan/menghapus (merge cell) beberapa cell menjadi satu di dalam kolom.

<td rowspan=”">…</td>
Tag yang digunakan untuk menggabungkan/menghapus (merge cell) beberapa cell menjadi satu di dalam baris.

Setelah kita mengetahui tag-tag HTML yang diperlukan untuk membangun sebuah tabel, maka kita akan coba membuat sebuah tabel yang terstruktur.

<table cellpadding="5" cellspacing="2" border="1">
<caption>JUDUL TABEL</caption>
<thead>
	<tr>
		<th>Nama</th>
		<th>Alamat</th>
		<th>E-mail</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Subling</td>
		<td>Jalan Delod Peken</td>
		<td>Subling@yahoo.com</td>
	</tr>
	<tr>
		<td>Dogler</td>
		<td>Jalan Dangin Peken</td>
		<td>dogler@gmail.com</td>
	</tr>
	<tr>
		<td>Tomblos</td>
		<td>Alun-alun Kaje</td>
		<td>tomblos@emailme.com</td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<td>Kosong</td>
		<td>Kosong</td>
		<td>Kosong</td>
	</tr>
</tfoot>
</table>

Untuk hasilnya dapat dilihat disini

Contoh Tabel menggunakan atribut Colspan dan Rowspan

<table cellpadding="5" cellspacing="3" border="1">
<caption>COLSPAN dan ROWSPAN</caption>
<thead>
	<tr>
		<th>Nama</th>
		<th colspan="2">No. Telp </th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Men Cubling</td>
		<td>0361485624</td>
		<td>08164745214</td>
	</tr>
	<tr>
		<td>Pan Renteg</td>
		<td>0361584596</td>
		<td>08826354785</td>
	</tr>
	<tr>
		<td rowspan="2">Dadong DauhSukerti</td>
		<td>0361584562</td>
		<td>08123654785</td>
	</tr>
	<tr>
		<td>0361458712</td>
		<td>02145836255</td>
	</tr>
</tbody>
</table>

Untuk hasilnya dapat dilihat disini

Sekian dulu untuk tutorial cara pembuatan sebuah tabel menggunakan HTML. Apabila ada kesulitan silahkan japri via email atau langsung bisa berkomen ria. Selamat mencoba, semoga berhasil…