28 April 2013,
 13

Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Dalam tutorial belajar HTML cara membuat tabel HTML ini kita akan membahas cara penggunaannya.


Cara Membuat Tabel HTML dengan tag <table>, <tr> dan <td>

Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <tabel>, tag <tr>, dan tag <td>:

  • Tag <tabel> digunakan untuk memulai tabel
  • Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
  • Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.

Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:

Contoh penggunaan tag <tabel>:

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td> Baris 2, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 3, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 1</td>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Cara Membuat tabel di HTML (tag table)

Perhatikan bahwa pada tag <tabel> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.

Sebelum standar CSS diimplementasikan ke dalam semua browser, pada sekitar tahun 2000-an kebanyakan programmer dan desainer web menggunakan tabel untuk mengatur tampilan web. Membuat menu ada di atas dan sisi kanan web bisa diakali dengan menjadikan halaman web sebagai sebuah tabel yang besar. Hal ini sebenarnya tidak salah, namun akan membuat pengkodean HTML menjadi rumit. Saat ini anda masih bisa menggunakan ide tersebut, namun sangat disarankan menggunakan CSS untuk mengatur tampilan halaman web.
HTML menyediakan banyak tag lain untuk merancang tabel yang lebih rumit. Untuk pembahasan mengenai ini, duniailkom telah membuat beberapa tutorial lanjutan tentang Tabel HTML yang bisa dipelajari pada: Tutorial Belajar Tabel HTML Lanjutan.

Sampai disini kita telah mempelajari beberapa tag HTML yang sering digunakan dalam pembuatan halaman web. Untuk halaman web yang panjang, kadang perlu diberi komentar mengenai fungsi dan tujuan kita membuatnya. Mengenai hal ini akan kita bahas pada tutorial selanjutnya: Cara Menambahkan komentar di HTML.

13 responses on “Belajar HTML Dasar Part 12: Cara Membuat tabel di HTML (tag table)

  1. afinzdi says:

    kenapa ditemplate saya tabelnya ga mau keluar yaa om??
    mohon pencerahannya

    • Andre says:

      Coba diperiksa lagi kode HTMLnya afinzdi, kemungkinan ada penulisan tag yang belum sempurna, atau coba di copy paste aja contoh kode di tutorial tabel HTML ini, lalu langsung jalankan,,,

  2. untuk ngatur ukuran tabelnya gimana

  3. Ansory Esce says:

    Kenapa ya warna background table di blog saya gak bisa keluar :( mohon pencerahannya

  4. cek lagi gan,, saya juga pertama gak munncul ternyata kurang tanda ( ” ) nya

    thanks ini toturialnya ngbantu buat newbie kayak ane :D

  5. Anonymous says:

    saya mau di dalam isi tabel nya itu bisa di klik, itu gimana caranya??

    • Andre says:

      Kalau sel tabelnya bisa di-klik, maka harus menggunakan JavaScript, karena HTML hanya digunakan untuk membuat struktur web, bukan interaksi seperti klik, mouseover, drag, dll.

      Mudah-mudahan saya sempat buatkan tutorial tentang JavaScript….

  6. Cara membuat table didalam tabel itu gmana …?

    • Andre says:

      Untuk membuat tabel di dalam tabel, tinggal menyisipkan tag <table> baru di dalam tag <td>, seperti contoh berikut:

      <table border=”1″>
      <tr>
         <td>
            <table border=”1″>
            <tr>
              <td>Baris 1, Kolom 2</td>
              <td>Baris 1, Kolom 2</td>
            </tr>
            <tr>
              <td>Baris 2, Kolom 1</td>
              <td>Baris 2, Kolom 2</td>
            </tr>
            </table>
         </td>
         <td>Baris 1, Kolom 2</td>
       </tr>
       <tr>
         <td>Baris 2, Kolom 1</td>
         <td>Baris 2, Kolom 2</td>
       </tr>
       </table>
  7. iki says:

    untuk membuat tabel dengan 4 baris caranya gimana gan ?

    • Andre says:

      Untuk membuat tabel dengan 4 baris, kita tinggal mengulang tag <tr><td>..<td><tr> sebanyak 4 kali.

      Contohnya, untuk membuat tabel 4 baris dengan 2 kolom, berikut adalah kode HTML yang diperlukan:

      <table border="1">
       <tr>
          <td>Baris 1, Kolom 1</td>
          <td>Baris 1, Kolom 2</td>
       </tr>
       <tr>
          <td>Baris 2, Kolom 1</td>
          <td>Baris 2, Kolom 2</td>
       </tr>
       <tr>
          <td> Baris 3, Kolom 1</td>
          <td> Baris 3, Kolom 2</td>
       </tr>
       <tr>
          <td> Baris 4, Kolom 1</td>
          <td> Baris 4, Kolom 2</td>
       </tr>
       </table> 

      Mudah2an bisa membantu :)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>