Cara Membuat Tabel
Tabel pada suatu blog sangat bermanfaat terutama untuk menulis data atau informasi dalam bentuk kategori database seperti tabel untuk data barang, tabel untuk data sisiwa, tabel untuk daftar nilai, table untuk galery foto yang banyak, dan banyak lagi kegunaan table pada blog.
Table juga bisa digunakan sebagai pembatas header, body post, sidebar kiri, sidebar kanan, komentar, dan footer. Tentu saja semua hal di atas bisa dibuat tanpa menggunakan tabel, salah satunya dapat dibuat dengan menggunakan CSS, hanya saja pembuatan data dengan menggunakan tabel akan lebih mudah khususnya bagi pemula.
Berikut ini adalah beberapa kode HTML yang diperlukan untuk pembuatan tabel.
- Pembuatan tabel harus diawali dengan <table> dan diakhiri dengan </table>
- <tr> dan </tr> : untuk membuat baris tabel.
- <td> dan </td> : membuat kolom tabel.
- Border : untuk medefinisikan tebal garis tabel dalam pixel.
- Width : untuk menentukan lebar tabel dalam pixel atau persentase.
- Cellpan : untuk menggabungkan beberapa kolom pada tabel.
- Rowspan : untuk menggabungkan beberapa baris pada tabel.
- Align : untik menentukan posisi tabel (left, center, right).
- Bgcolor : untuk memberi warna backgroud tabel.
- Bordercolor : untuk memberi warna border table (garis tepi tabel)
- Cellspacing : untuk mengatur jarak atar cell.
- Cellpadding : untuk mengatus jarak content ke cell di dalam tabel.
- <div align="..."> dan </div> untuk mengatur posisi content diantara "div" (left, center, right, justify)
Contoh Cara Pembuatan Tabel 1 :
Berikut ini adalah kode HTML untuk membuat tabel dengan lebar 300 pixel, jumlah kolom 5, jumlah baris 2, tanpa tulisan di dalamnya:
<html>
<body>
<table width="300" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Tampilan setelah diposting :
Contoh Cara Pembuatan Tabel 2 :
Berikut ini adalah kode HTML untuk membuat tabel dengan lebar 400 pixel, border 1 pixel warna merah, jumlah kolom 4, jumlah baris 3, cellspacing 5px, posisi text ditengah.
<html>
<body>
<table width="400" border="1" cellspacing="5" bordercolor="#ff0000">
<tr>
<td><div align="center">NO</div></td>
<td><div align="center">NAMA</div></td>
<td><div align="center">GENDER</div></td>
<td><div align="center">KOTA</div></td>
</tr>
<tr>
<td><div align="center">1</div></td>
<td><div align="center">Saya</div></td>
<td><div align="center">Pria</div></td>
<td><div align="center">Bandung</div></td>
</tr>
<tr>
<td><div align="center">2</div></td>
<td><div align="center">Kamu</div></td>
<td><div align="center">Wanita</div></td>
<td><div align="center">Jakarta</div></td>
</tr>
</table>
</body>
</html>
Tampilan setelah diposting :
Contoh Cara Pembuatan Tabel 3 :
Berikut ini adalah kode HTML untuk membuat tabel dengan lebar 350 px, posisi tabel kiri. 3 kolom, 5
baris, border 2px warna biru, background kuning, cellspacing 5 px, cellpadding 3px, posisi text baris pertama ditengah dengan text rwbL, posisi text baris berikutnya di kiri dengan text normal, cell-cell pada baris permana digabung dengan warna background biru, cell-cell pada kolom terakhir digabung dengan posisi text ditengah.:
<html>
<body>
<table width="350" border="1" align="left" cellpadding="3" cellspacing="5" bordercolor="#0000ff" bgcolor="#ffff00">
<tr bgcolor="#0099ff">
<td colspan="5"><div align="center"><strong>DATA-DATA SISWA </strong></div></td>
</tr>
<tr>
<td><div align="left">1</div></td>
<td><div align="left">Data 1</div></td>
<td><div align="left">Data A </div></td>
<td><div align="left">A1</div></td>
<td rowspan="4"><div align="center">INFO</div></td>
</tr>
<tr>
<td>2</td>
<td><div align="left">Data 2</div></td>
<td><div align="left">Data B </div></td>
<td><div align="left">B2</div></td>
</tr>
<tr>
<td><div align="left">3</div></td>
<td><div align="left">Data 3</div></td>
<td><div align="left">Data C </div></td>
<td><div align="left">C3</div></td>
</tr>
<tr>
<td><div align="left">4</div></td>
<td><div align="left">Data 4 </div></td>
<td><div align="left">Data D </div></td>
<td><div align="left">D4</div></td>
</tr>
</table>
</body>
</html>
Tampilan setelah diposting :
7 comments:
Assalamu'alaikum kang Yuda..mohon informasinya tentang cara pembuatan tabel komentar..seperti tabel komentar yang kang Yuda punya, atau yang sederhana juga gak apa2..Sebab dah lama saya bolak-balik cari di google gak ketemu..Saya awam sekali dengan dunia komputer,jadi gak ngerti dengan bahasanya, tapi saya sudah punya situs web sendiri..kalo bikin tabel komentar untuk situs web saya, tinggal copy paste bisa atau tidak?..untuk web creator saya pakai kompozer, web host nya pakai www.freehostia.com..mohon di balas..atas informasinya saya ucapkan hatur nuhuuun pisan..
Anto (Bogor)
@Kang Anto: Kalau boleh tahu nama Domainnya apa, terus bikin websitennya paka CMS apa, Joomla, Wordpress atau apa..?, Kalau tidak mau diekpos, boleh via contact.
Terima kasih.
Assalamu'alaikum..sudah saya balas via contact email ya Kang..hatur nuhun..
Anto
trims tutorialnya lengkap sama penjelasannya jadi bagi kami pemula sangat bermanfaat sekali ilmunya trima kasih banyak
Wah, sayang banget komen diatas privacy. Saya berkunjung ke blog ini dengan tujuan sama : "gimana cara buat form komentar" seperti ini?
Thanks b4
Alamat blog saya :
http://fatimah86.wordpress.com
mas klo bikin table buat link orang lain yang kita mau pasang gimana caranya?
maaf mas,saya masih newbie
hehehe :D
@Andri wijaya: Maksudnya link seperti di bagian bawah Link Sukses kolom "Link Ke Blog ini"? Kalau ya, sebaiknya bukan dengan tabel tetapi dengan textarea.
Poskan Komentar
Mohon maaf jika saya terlambat atau tidak dapat me-reply komentar Anda. Terima kasih.