Belajar HTML Dasar Part 12: Cara Membuat tabel di HTML (tag table)

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.


eBook HTML Uncover Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.

Tutorial Terkait:

45 Comments

  1. afinzdi
    25 Jul 13
    • Andre
      23 Feb 14
  2. Ansory Esce
    14 Aug 13
    • Andre
      28 Jan 14
  3. Anonymous
    29 Apr 14
    • Andre
      29 Apr 14
  4. Haris syahputra
    16 Oct 14
    • Andre
      18 Oct 14
  5. iki
    28 Nov 14
    • Andre
      28 Nov 14
      • david
        09 Nov 15
  6. Thre3Silent
    01 Dec 14
    • Andre
      02 Dec 14
  7. Haditya
    02 Dec 14
  8. Riki Sebastiar
    25 Dec 14
    • Andre
      29 Dec 14
  9. feri
    30 Dec 14
  10. K
    12 Jan 15
    • Andre
      13 Jan 15
  11. Anonymous
    25 Jan 15
    • Andre
      28 Jan 15
  12. rafa
    01 Oct 15
    • Andre
      02 Oct 15
  13. Adam Maulana
    10 Oct 15
    • Andre
      10 Oct 15
  14. boy ricardo
    05 Nov 15
    • Andre
      05 Nov 15
      • fandy
        17 Nov 15
        • Andre
          17 Nov 15
  15. Jeffry Andrian
    22 Jan 16
  16. Taufik suroso
    25 Mar 16
    • Andre
      26 Mar 16
  17. iwan
    26 Mar 16
    • Andre
      26 Mar 16
  18. Anzhar
    02 Apr 16
    • Andre
      03 Apr 16
  19. Iseng nulis
    15 Apr 16
    • Andre
      16 Apr 16
  20. Martino Rizki R
    18 May 16
    • Andre
      19 May 16

Add Comment