Assalamu'alaikum..
Kali ini ane mau ngepost tentang membuat tabel di HTML. langsung saja kita simak gaan !!
Tag yang digunakan untuk membuat tabel di HTML sebenarnya hanya 3 saja, yaitu :
<table> </table>, <tr> <tr/>, dan <td> </td>.
Penjelasan:
Tag <table> menunjukkan bagian awal dari tabel dan tag </table> menunjukkan akhir dari tabel.
Tag <tr> menunjukkan awal baris dan tag <tr/> menjukkan akhir baris.
Tag <td> menunjukkan awal kolom dan tag </td> menunjukkan akhir kolom.
CATATAN :
Sebuah tabel HTML minimal memiliki sepasang tag <table>, sepasang tag <tr> dan atu pasang tag <td>. Sementara setiap tag <td> selalu diapit oleh tag <tr>.
Bentuk Minimal Tabel HTML :
<table>
<tr>
<td> . . . </td>
</tr>
</table>
Contoh Tabel Sederhana :
Tuliskan kode html dibawah ini di text editor Anda(saya menggunakan gedit). Simpan dengan nama
tabel.html
<table border="1">
<tr>
<td> isi kolom 1 baris 1</td>
<td> isi kolom 2 baris 1</td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
<td> isi kolom 2 baris 2</td>
</tr>
</table>
Buka file tabel.html dengan browser(Saya menggunakan Mozilla Firefox). Maka hasilnya menjadi seperti ini :

Jika Anda ingin menghilangkan garis di tabel cukup dengan mengganti nilai border menjadi 0. Jika atribut border tidak disertakan maka tabel dianggap memiliki border dengan nilai 0.
<table border="0">
<tr>
<td> isi kolom 1 baris 1</td>
<td> isi kolom 2 baris 1</td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
<td> isi kolom 2 baris 2</td>
</tr>
</table>
Maka saat di buka di browser hasilnya akan menjadi :

Cara Menggabungkan Kolom di Tabel HTML
TIPS :
Saat Anda ingin menggabungkan kolom atau baris, sebaiknya sertakan border=”0” di bagian tabel. Ini berfungsi untuk mengetahui apakah tabel yang kita inginkan sudah sesuai atau belum. Jika sudah sesuai border bisa di hapus dengan cara mengubar nilai border menjadi 0 atau menghapus tag border=”0” dari tag <table>. Jika ingin tetap menggunakan border maka tidak perlu merubah apapun.
     - - - - - - -
Contoh Kasus Menggabungkan Kolom :
Misalnya kita ingin menggabungkan 3 kolom menjadi satu. Namun kolom yang lain tetap.
Formatnya adalah :
<td colspan=”jumlah kolom yang ingin disatukan”> ... </td>
Contoh tabel yang belum disatukan(belum di colspan) kolomnya berdasarkan kasus diatas :
<table border="1">
<tr>
<td> 3 kolom jadi satu </td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
<td> isi kolom 2 baris 2</td>
<td> isi kolom 3 baris 2</td>
</tr>
</table>
Berikut ini hasil tabel yang belum di colspan kolomnya :

Untuk menggabungkan 3 kolom di baris pertama pada tabel maka kita harus mengubah kode HTML tabel diatas menjadi seperti ini :
<table border="1">
<tr>
<td colspan="3"> 3 kolom jadi satu </td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
<td> isi kolom 2 baris 2</td>
<td> isi kolom 3 baris 2</td>
</tr>
</table>
Maka hasilnya akan menjadi seperti ini :

Cara Menggabungkan Baris di Tabel HTML
Misalnya kita ingin menggabungkan 2 baris terakhir menjadi satu. Namun baris yang lain tetap.
Formatnya adalah :
<td rowspan=”jumlah baris yang ingin disatukan”> ... </td>
Contoh tabel yang belum disatukan barisnya(belum di rowspan) berdasarkan kasus diatas :
<table border="1">
<tr>
<td> isi kolom 1 baris 1 </td>
<td> 2 baris jadi satu</td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
</tr>
</table>
Berikut ini hasil tabel yang barisnya belum disatukan(belum di rowspan barisnya) :

Untuk menggabungkan 2 baris di kolom ke-2 pada tabel maka kita harus mengubah kode HTML tabel
diatas menjadi seperti ini :
<table border="1">
<tr>
<td> isi kolom 1 baris 1 </td>
<td rowspan=”2”> 2 baris jadi satu</td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
</tr>
</table>
Maka hasilnya akan menjadi seperti ini :

Perataan Tabel di HTML
Untuk melakukan pengaturan perataan tabel, kita harus menambahkan atribut align pada tag <table>. Nilai atribut align adalah left, center, dan right. Tuiskan kode HTML dibawah ini dan simpan dengan nama perataantabel.html
<table border="1" align="center">
<tr>
<td> align center </td>
<td> align center </td>
</tr>
<tr>
<td> align center </td>
<td> align center </td>
</tr>
</table>
<br/> <br/>
<table border="1" align="right">
<tr>
<td> align right </td>
<td> align right </td>
</tr>
<tr>
<td> align right </td>
<td> align right </td>
</tr>
</table>
<br/> <br/>
<table border="1" align="left">
<tr>
<td> align left </td>
<td> align left </td>
</tr>
<tr>
<td> align left </td>
<td> align left </td>
</tr>
</table>
Maka hasilnya jika dilihat menggunakan browser akan seperti berikut ini :

Pengaturan Tinggi dan Lebar Tabel di HTML
Agar lebar atau tinggi tabel tidak berubah-ubah, kita dapat menentukan ukuran Tinggi dan Lebar tabel. Caranya dengan menambahkan atribut height untuk nilai tinggi tabel sedangkan width untuk menyimpan nilai lebar tabel. Nilai tinggi dan lebar dalam satuan pixels.
Simpan kode HTML berikut ini dengan nama tinggidanlebartabel.html
<table height="150" width="400" border="1">
<tr>
<td> isi tabel </td>
<td> isi tabel </td>
</tr>
<tr>
<td> isi tabel </td>
<td> isi tabel </td>
</tr>
</table>
Maka akan menghasilkan tabel dengan tinggi 150px dan lebar 400px seperti dibawah ini :

Mengatur Tinggi dan Lebar Kolom Tabel HTML
Untuk mengatur tinggi dan lebar kolom kita tinggal menyisipkan atribut height untuk tinggi kolom dan atribut width untuk lebar kolom di tag <td>. Nilai tinggi dan lebar dalam satuan pixels.
Simpan kode dibawah ini dengan nama tinggidanlebarkolom.html
<table width="400" border="1">
<tr>
<td align="left" width="200" height="100"> align left </td>
<td align="center"> align center </td>
<td align="right"> align right </td>
</tr>
</table>
Hasilnya jika dibuka dibrowser akan seperti berikut ini :

CATATAN : Jika Kolom A tingginya 70px maka kolom B dan C akan ikut menjadi 70 tingginya meskipun tidak diatur tingginya. Tinggi kolom akan mengkikuti tinggi salah satu kolom yang tertinggi. Hal ini tidak berlaku untuk lebar kolom.
Mengatur Perataan Kiri Kanan Kolom Tabel HTML
Untuk meratakan kolom secara kiri kanan kita tinggal menyisipkan atribut align di tag <td>.
Formatnya sebagai berikut :
<td align=”jenis perataan”> . . .</td>
silahkan simpan kode di berikut dengan nama perataankikakolom.html
<table width="500" height="50" border="1">
<tr>
<td align="left"> align left </td>
<td align="center"> align center </td>
<td align="right"> align right </td>
</tr>
</table>
Hasil perataan saat dibuka melalui browser akan seperti berikut ini :

Mengatur Perataan Atas Bawah Kolom Tabel HTML
Untuk meratakan kolom kita tinggal menyisipkan atribut valign di tag <td>. Formatnya sebagai
berikut :
<td valign=”jenis perataan”> . . .</td>
silahkan simpan kode di berikut dengan nama perataanabkolom.html
<table width="500" height="150" border="1">
<tr>
<td valign="top"> vertical align top </td>
<td valign="center"> vertical align center </td>
<td valign="bottom"> vertical align bottom </td>
</tr>
</table>
Hasil perataan saat dibuka lewat browser seperti berikut ini :


Contoh tabel di HTML yang saya buat seperti ini :
<html>
<head>
<title> Perkenalken </title>
</head>
<body>
<table width="600" height="300" border="1" width="75%">
<tr>
<td colspan="2" align="center"> <marquee><b>Bakal Calon Sarjana Komputer</marquee></b></td>
<td rowspan="5"> <img src="27811_1201679341861_4614819_n.jpg” width="300" height="200"></td>
</tr>
<tr>
<td bgcolor="FF9F55"> Nama</td>
<td> Muhammad Hissamudin</td>
</tr>
<tr>
<td bgcolor="FF9F55"> Tempat Tanggal Lahir</td>
<td> Tasikmalaya, 06 Mei 1994</td>
</tr>
<tr>
<td bgcolor="FF9F55"> Alamat</td>
<td> Jl. Sukamulya Bungursaru-Tasikmalaya</td>
</tr>

</table>
</body>
</html>
dan hasilnya :

Masih banyak lagi tentang HTML yang belum kita kupas secara tajam .. Semoga bermanfaat dan terimakasih sudah mengunjungi blog ane ! sering sering aja yah !! hehe
Wassalamu'alaikum..