zhamelank.xtgem.com

Tabel dalam HTML

Dalam HTML, tabel didefinisikan dengan tag table. Sebuah tabel dibagi menjadi baris (dengan tag <tr>), dan setiap baris dibagi menjadi sel-sel data (dengan tag <td>). TD singkatan dari "Data Tabel", dan memegang isi sel data. Sebuah tag <td> dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dan lain-lain.

Sedangkan atribut untuk tabel header didefenisikan dengan <th>

Jika anda tidak menentukan atribut border, tabel akan ditampilkan tanpa batas. Tetapi sebaiknya ditentukan agar perbatasan dapat ditampilkan.

Jenis atribut tabel dalam jenis dokumen yang digunakan pada halaman ini HTML 4.01, yaitu:

• id dan class - mengidentifikasi tampilan tabel
• border - bingkai tabel dalam ukuran pixel (px).
• cellpadding - merupakan jarak antara konten dengan perbatasannya atau spasi dalam sel.
• cellspacing - merupakan jarak antar sel.
• width - lebar dari tabel (px atau %)
• align - keselarasan posisi tabel menggunakan nilai left, center dan right
• bgcolor - warna latar belakang
• style - informasi gaya inline dalam tabel
• frame

Jika terdapat kekeliruan dalam penulisan atribut tabel diatas saya mohon maaf dan harap di koreksi.

Contoh bermacam-macam tabel

Tabel kecil

TEKS

<table width="100%"><tr><td bgcolor="yellow" align="center"><font color="blue"><b>TEKS</b></font></td></tr></table>

---

Tabel Link kanan kiri

KANAN

KIRI

<table width="100%"><tr><td bgcolor="yellow" align="left" width="50%"><a href="/index.html"><font color="blue"><b>KANAN</b></font></a></td><td bgcolor="red" align="right" width="50%"><a href="#"><font color="lime"><b>KIRI</b></font></a></td></tr></table>

---

Tabel blok ganda

Teks

Teks

<table width="100%" border="3"><tr><td width="50%" bgcolor="red" align="center">Teks</td><td width="50%" bgcolor="gray" align="center">Teks</td></tr></table>

---

Tabel block 3

Teks

Teks

Teks

<table width="100%" border="3"><tr><td width="33%" bgcolor="lime" align="center">Teks</td><td width="34%" bgcolor="black" align="center">Teks</td><td width="33%" bgcolor="yellow" align="center">Teks</td></tr></table>

---

Tabel link tengah

Teks

HOME

Teks

<table width="100%" border="0"><tr><td bgcolor="yellow" align="center">Teks</td><td bgcolor="red" align="center"><a href="/index.html"><font color="white">HOME</font></a></td><td bgcolor="lime" align="center">Teks</td></tr></table>

---

Tabel dengan link

LINK 1	LINK 2
LINK 3	LINK 4

<table width="100%" border="0"><tr><td width="50%" bgcolor="aqua" align="center"><a href="http://1"><font color="lime">LINK 1</font></a></td><td width="50%" bgcolor="blue" align="center"><a href="http://2"><font color="lime">LINK 2</font></a></td><tr><td width="50%" bgcolor="red" align="center"><a href="http://3"><font color="lime">LINK 3 </font></a></td><td width="50%" bgcolor="yellow" align="center"><a href="http://4"><font color="lime">LINK 4</font></a></td></tr></table>

---

Tabel dengan border

Teks/Link atau Gambar

LINK 1

LINK 2

<table border="1" width="100%"><tr><td bgcolor="#005"><p align="center"><font color="white" size="5">Teks/Link atau Gambar</font></p></td></tr></table><table width="100%" border="0"><tr><td width="50%" bgcolor="#a00" align="center"><a href="http://"><font color="lime">LINK 1</font></a></td><td width="50%" bgcolor="yellow" align="center"><a href="http://"><font color="lime">LINK 2</font></a></td></tr></table>

---

Tabel dengan border 2

TEKS / LINK

TEKS / LINK

<table width="100%" border="2" align="center" cellpadding="2" cellspacing="2"><tr><td width="50%" bgcolor="red"><font color="white">TEKS / LINK</font></td><td align="center" width="50%" bgcolor="white"><font color="red">TEKS / LINK</font></td></tr></table>

---

Tabel dengan border

TEKS

TEKS

TEKS

<table width="100%" border="3"><tr><td width="33%" bgcolor="lime" align="center">TEKS</td><td width="34%" bgcolor="red" align="center">TEKS</td><td width="33%" bgcolor="yellow" align="center">TEKS</td></tr></table>

---

Tabel transparan lite

table header	TEKS
	TEKS

<table width="100%" border="1" cellpadding="5" cellspacing="5"><tr><th style="color:blue;background-color:orange;" rowspan="2">table header</th><td>TEKS</tr><tr><td>TEKS</td></tr></table>

---

Drop table lite menurun

Teks / Link

Teks / Link

Teks / Link

Teks / Link

<table width="100%" border="1" style="background-color:#808080;" cellpadding="5" cellspacing="5"><tr><td>Teks / Link</td></tr><tr><td>Teks / Link</td></tr><tr><td>Teks / Link</td></tr><tr><td>Teks / Link</td></tr></table>

---

3 tabel lite mendatar

Teks / Link

Teks / Link

Teks / Link

<table width="100%" border="3" style="background-color:#585858;border:1px solid silver;" cellpadding="3" cellspacing="3"><tr><td>Teks / Link</td><td>Teks / Link</td><td>Teks / Link</td></tr></table>

---

Tabel dengan gambar

<table width="99%" border="1"><tr><td width="99%" bgcolor="#FF9000" align="center"><img src="url_gambar" alt="Alternatif_judul"></td></tr></table>