Kode HTML table (tabel)

Table atau tabel kadang diperlukan untuk menampilkan daftar. Seperti misalnya menampilkan daftar nama, daftar website, dan sebagainya. Untuk membuatnya, Anda harus menuliskannya dalam kode HTML. Bagaimana membuat table (tabel) dengan HTML? Mari pelejari di sini!

Pada contoh ini, saya akan membuat tabel (table) 3 kolom dan 4 baris untuk membuat daftar alamat situs. Berikut ini contoh hasil table-nya:

Nama Website	Alamat URL	Keterangan
Google	http://www.google.com	Search Engine
Yahoo!	http://www.yahoo.com	Search Engine, Email Service, News Portal
facebook	http://www.facebook.com	Social Network

Untuk menampilkan tabel seperti di atas, berikut kode HTML table -nya:


<table width="80%" border="1" cellspacing="0" cellpadding="0">
<!-- Mulai Baris Pertama -->
<tr>
<td width="33%" valign="top"><b>Nama Website</b></td>

<td width="33%" valign="top"><b>Alamat Website</b></td>

<td width="33%" valign="top"><b>Keterangan</b></td>
</tr>
<!-- Selesai Baris Pertama -->

Keterangan: kode <!-- Mulai Baris Pertama --> tidak akan ditampilkan.

Mulai dari <!-- Mulai Baris Pertama --> hingga <!-- Selesai Baris Pertama --> akan memberikan 1 baris dan 3 kolom.

Anda tinggal melanjutkannya dengan menyalin kode di atas untuk baris-baris berikutnya, dan mengisi setiap kolom dengan input data yang Anda inginkan. Dengan menyalin 3 kali berarti akan menghasilkan 4 baris. Kemudian Anda harus menutup tag tersebut dengan </table>.

width= : menyatakan lebar table. Anda boleh mengisinya dengan 100%, 400px atau sesuai dengan keinginan (menyesuaikan template website).

border= : menyatakan tebal garis. Jika diberi nilai 0 maka garis tidak akan ditampilkan.

cellspacing= : Spasi (jarak) di antara cell (1 kolom dan 1 baris = 1 cell)

cellpadding= : Jarak antara text dengan border pada setiap cell.

Menggabungkan Cell, Baris dan Kolom pada Table

Cell dapat digabung (merge) dengan cell yang lain dalam baris atau kolom. Untuk menggabungkan dua atau lebih digunakan perintah colspan atau rowspan. Sebagai contoh, lihat di bawah ini:

Menggabungkan 2 kolom cell dalam 1 baris:


<table width="400" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">Cell 1</td>
<td width="50%">Cell 2</td>
</tr>
<tr>
<td colspan="2" width="100%">2 Cell Digabung</td>
</tr>
</table>

Kode HTML Table di atas menghasilkan tabel seperti di bawah ini:

Cell 1	Cell 2
2 Cell Digabung

Menggabungkan 2 baris cell dalam 1 kolom:


<table width="400" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" width="50%">
Dua baris cell digabung
</td>
<td width="50%">
Cell 3
</td>
</tr>
<tr>
<td width="50%">
Cell 4
</td>
</tr>
</table>

Kode HTML table di atas akan menghasilkan tabel:

Dua baris cell digabung	Cell 3
	Cell 4