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 :
