- Tips dan trik mempercepat koneksi internet - Tips dan trik memonitor bandwidth koneksi internet - Software lain seputar koneksi internet -

Mengenal Tag Table dalam HTML

Oleh | Jul. 25, 2009 | Belajar HTML, Blogging

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:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

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:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6
Cell 7 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 9

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:

Cell 1 Cell 2 gabung dengan Cell 3
Cell 4 gabung dengan Cell 7 Cell 5 Cell 6
Cell 8 Cell 9

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.

Bookmark and Share

:, , ,

7 komentar:

7 Responses to “Mengenal Tag Table dalam HTML”

  1. 1
    digital megapixel Says:

    tukeran link ya bro..

  2. 2
    dwi Says:

    di baca dulu yaa..trus pelan2 mau di coba di blog daku..
    happy blogging…trims mas.

  3. 3
    bambang Says:

    keuren bozz

  4. 4
    naga raya anak medan Says:

    bagaimana cara mengkoneksikan file yg telah kita buat ke dalam internet.tolong kasih tau!!

  5. 5
    AlamArsen Says:

    klu backgroundnya gambar bgimana mas….
    Thanks b4

  6. 6
    SAins DOc Says:

    kakak makasih ya atas ilmu pengetahuannya dan info2nya kerenn,,
    makasih bnyk saya boleh mampirr..
    thx.
    :)

  7. 7
    masmud Says:

    mantap infonya…salam kenal

Leave a Reply

http://belowthebeltway.com/2008/04/29/fargo.php?epl=viagra-online-without-prescription-usa