Cyber Blog: Cara Membuat Tabel dengan HTML

Kawan semua tahukan apa itu tabel ? Jika tidak, sungguh terlalu ^_^
Namun yang dimaksud disini adalah tabel yang dibuat dengan HTML (hyper text markup language).
Langsung saja kita lihat contoh penulisan data diri dengan menggunakan tabel di bawah :

Nama	: Rii Ramadhan
Hobi	: Blogging

Itu hanyalah contoh kecil penulisan yang menggunakan tabel, sebenarnya jika anda paham pembuatannya maka tabel tersebut akan jauh lebih menarik.
Harus anda pahami tag inti penyusun sebuah tabel itu ialah :

<table> berfungsi sebagai tag pembuka tabel
<tr> berfungsi sebagai tag untuk membuat baris dalam tabel karena tr sendiri merupakan singkatan dari (Table rows)
<td> berfungsi untuk membuat kolom, dan tag ini berada dalam tag tr

Agar anda lebih memahami tentang pembuatan tabel dalam html, silahkan perhatikan contoh tabel di bawah berikut kode HTML nya :

Ini tabel dengan atribut colspan=2
Ini baris 2 kolom 1	Ini baris 2 kolom 2

Ini kodenya :

<table align="center" border="1">
<tr>
<td align="center" colspan="2">Ini tabel dengan atribut colspan=2</td>
</tr>
<tr>
<td>Ini baris 2 kolom 1</td>
<td>Ini baris 2 kolom 2</td>
</tr>
</table>

atribut colspan=2 itu artinya untuk menyatukan 2 buah kolom menjadi 1, atau yang kita kenal dengan istilah Merge jika dalam Ms.Excel.

Loh ko lebar ya ?
bagaimana agar lebar nya sesuai yang kita kehendaki ?
Tinggal tambahkan saja atribut "width" di dalam tag table dan berikan nilainya bisa dalam satuan % atau pixel.

Contohnya saya akan buat tabel tersebut memiliki lebar 300px maka hasilnya seperti ini :

Ini tabel dengan atribut colspan=2
Ini baris 2 kolom 1	Ini baris 2 kolom 2

Ini kodenya :

<table align="center" border="1" width="300px">
<tr>
<td align="center" colspan="2">Ini tabel dengan atribut colspan=2</td>
</tr>
<tr>
<td>Ini baris 2 kolom 1</td>
<td>Ini baris 2 kolom 2</td>
</tr>
</table>

Lalu anda bisa mengkreasikannya dengan memberikan warna ataupun mengganti jenis huruf seperti tabel yang saya buat di bawah ini :

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

Ini kodenya :

<table align="center" border="2px" cellspacing="0">
<tr align="center" bgcolor="blue" style="font-family: virtual dj; font-weight: normal; text-transform: uppercase;">
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr align="center">
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
<tr align="center">
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
<td>baris 3 kolom 3</td>
</tr>
</table>