Melanjutkan artikel tentang Belajar HTML, sekarang saya akan informasikan fungsi tag table (tabel). Tabel di sini sama seperti tabel dalam MS Word atau Excel yang terdiri dari kolom dan baris. Dalam blog atau website tabel ini bisa dimanfaatkan dalam banyak hal, selain penampil informasi dalam sebuah tulisan atau artikel (body), tabel juga bisa dimanfaatkan pada bagian header, sidebar, atau footer dalam sebuah website atau blog.

Dalam tulisan saya ini, saya tidak akan membahas tentang penggunaan tabel dalam header, sidebar, atau footer, tapi saya hanya menginformasikan pembuatan tabel itu sendiri dalam bahasa HTML.

Pembuatan tabel dalam bahasa HTML pada dasarnya akan tertulis seperti di bawah ini:

<table> <!-- awal tabel -->
  <tr> <!-- awal baris 1 -->
    <td>Cell 1</td> <!-- kolom 1 baris 1 -->
    <td>Cell 2</td> <!-- kolom 2 baris 1 -->
    <td>Cell 3</td> <!-- kolom 3 baris 1 -->
  </tr> <!-- akhir baris 1 -->
  <tr> <!-- awal baris 2 -->
    <td>Cell 4</td> <!-- kolom 1 baris 2 -->
    <td>Cell 5</td> <!-- kolom 2 baris 2 -->
    <td>Cell 6</td> <!-- kolom 3 baris 2 -->
  </tr> <!-- akhir baris 2 -->
  <tr> <!-- awal baris 3 -->
    <td>Cell 7</td> <!-- kolom 1 baris 3 -->
    <td>Cell 8</td> <!-- kolom 2 baris 3 -->
    <td>Cell 9</td> <!-- kolom 3 baris 3 -->
  </tr> <!-- akhir baris 3 -->
</table> <!-- akhir tabel -->

Perintah pembuatan tabel diawali dengan <table> dan diakhiri dengan </table>, <tr> dan </tr> adalah fungsi perintah pembuatan baris, sedangkan <td> dan </td> itu sendiri perintah pembuatan kolom dalam baris.

Dari  contoh tag html di atas akan menghasilkan tabel yang terdiri dari 3 baris dan 3 kolom dengan seperti ini:

Tag script di atas adalah adalah tag dasar, untuk pengembangannya ada beberapa atribut yang bisa digunakan seperti lebar (width), spasi (spacing), huruf (font), warna dasar (background), dan lain sebagainya. Untuk lebih jelasnya bisa dilihat pada tag HTML berikut:

<table width="500" border="2" cellspacing="2" cellpadding="2" bgcolor="#ffffff" style="font:Times New Roman; font-size:12px; font-style:normal">
  <tr>
    <td width="250" align="left" bgcolor="#80FFFF" style="font:Verdana; font-weight:bold; font-size:12px">Cell 1</td>
    <td width="150" align="center" bgcolor="#FFFF80" style="font:Verdana; font-style:italic; font-size:14px">Cell 2</td>
    <td width="100" align="right" bgcolor="#80FF80" style="font:Verdana; font-style:normal; font-size:16px">Cell 3</td>
  </tr>
  <tr>
    <td valign="top">Cell 4</td>
    <td valign="middle">Cell 5</td>
    <td valign="bottom">Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6</td>
  </tr>
  <tr>
    <td valign="top">Cell 7</td>
    <td valign="middle">Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8</td>
    <td valign="bottom">Cell 9</td>
  </tr>
</table>

Dari tag HTML di atas akan menghasilkan tabel seperti di bawah ini:

Dalam tabel di atas saya gunakan tag berikut:

• width: lebar (lebar tabel 500 pixel)
• border: lebar garis tabel (2 pixel)
• cellspacing: jarak spasi antar cell (2 pixel)
• cellpadding: jarak tulisan/konten dengan garis cell (2 pixel)
• bgcolor: warna dasar (#ffffff = putih)
• style font: jenis huruf (Times New Roman)
• style font-size: ukuran font (12 pixel)
• style font-style: gaya penulisan (normal)

Untuk kolom sendiri saya buat lebar (width) yang berbeda untuk masing-masing kolomnya, yaitu kolom 1: 250 pixel, kolom 2: 150 pixel, dan kolom 3: 100 pixel (jumlah total 500 pixel), untuk tag lebar kolom (width), kita cukup memasang pada kolom yang ada pada baris pertama saja, karena otomatis kolom-kolom dalam baris selanjutnya akan mengikuti lebar dari kolom pada baris pertama.

Atribut lain dalam tabel di atas adalah:

• align: perintah justifikasi tulisan (left: rata kiri, center: rata tengah, dan right: rata kanan).
• valign: perintah justifikasi tulisan (top: rata atas, middle: rata tengah, dan bottom: rata bawah)
• bgcolor: warna dasar cell
• style font: jenis font
• style font-size: ukuran font
• style font-style: gaya penulisan font (italic, normal)
• style font-weight: gaya penulisan font (bold)

Berikutnya adalah cara menggabungan baris atau kolom, sebagai contoh bisa dilihat pada tabel berikut:

Dalam tabel di atas saya melakukan penggabungan Cell 2 dan Cell 3 pada baris pertama, dan penggabungan Cell 4 dan Cell 7 pada kolom pertama. Tag HTML yang digunakan di sini adalah tag collspan (menggabungkan kolom) dan rowspan (menggabungkan baris), untuk lebih jelasnya silakan lihat tag HTML berikut:

<table width="500" border="2" cellspacing="0" cellpadding="2" bgcolor="#ffffff" style="font:Times New Roman; font-size:12px; font-style:normal">
  <tr>
    <td width="250">Cell 1</td>
    <td colspan="2">Cell 2 gabung dengan Cell 3</td>
  </tr>
  <tr>
    <td rowspan="2">Cell 4 gabung dengan Cell 7</td>
    <td width="150">Cell 5</td>
    <td width="100">Cell 6</td>
  </tr>
  <tr>
    <td>Cell 8</td>
    <td>Cell 9</td>
  </tr>
</table>

Demikian sekilas informasi tentang pembuatan tabel dengan tag HTML, semoga bermanfaat.

1. Membuat Daftar Isi atau Table Of Contents (TOC) pada Blogspot
2. Mengenal Save for web dalam Photoshop
3. Mengenal Fungsi Pages dalam Blogspot
4. Mengenal Toonel.net dalam Koneksi Internet
5. Membuat Tab dalam Blogspot