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 <table>, tag <tr>, dan tag <td>:

  • Tag <table> 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 <table>:

<!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 <table> 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.

110 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
      • Bean
        26 Apr 18
        • Andre
          28 Apr 18
  4. Haris syahputra
    16 Oct 14
    • Andre
      18 Oct 14
    • Anonymous
      04 Nov 16
      • Andre
        05 Nov 16
  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
      • Anonymous
        31 Aug 16
        • jaka permana
          06 Nov 17
  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
  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
  21. sonya firra
    20 Aug 16
  22. ligar
    04 Sep 16
  23. anugerah cinta
    07 Sep 16
  24. Juno
    01 Oct 16
    • Andre
      02 Oct 16
  25. ANTON GIATMAKA
    16 Oct 16
  26. Nay
    17 Oct 16
    • Andre
      05 Nov 16
  27. suyono
    27 Nov 16
    • Andre
      28 Nov 16
  28. qinZ Rama
    06 Dec 16
    • Andre
      07 Dec 16
  29. Rudy
    07 Jan 17
  30. Dinda
    06 Feb 17
    • Andre
      06 Feb 17
  31. Agung design
    03 Mar 17
    • Andre
      04 Mar 17
  32. ricky
    18 Mar 17
    • Andre
      20 Mar 17
  33. afutakun
    22 Mar 17
  34. Adam
    04 May 17
  35. Komukote
    12 Jun 17
  36. spacexzone
    01 Aug 17
  37. Javanese Trans
    02 Oct 17
  38. didil
    28 Oct 17
    • Andre
      29 Oct 17
  39. Komukote
    30 Oct 17
  40. jaka permana
    06 Nov 17
    • Andre
      07 Nov 17
  41. Harry
    07 Nov 17
    • Andre
      07 Nov 17
  42. About Amartha
    12 Nov 17
  43. rizal
    03 Dec 17
  44. Jim
    26 Dec 17
    • Jim
      26 Dec 17
      • Andre
        28 Dec 17
  45. resindra
    28 Dec 17
    • Andre
      29 Dec 17
  46. IsengNulis
    28 Jan 18
  47. Arrafi M.A
    29 Apr 18
  48. udiiin
    10 Jul 18
  49. SGO48
    30 Jul 18
    • Andre
      01 Aug 18
  50. surya mahesa
    18 Feb 19
    • Andre
      18 Feb 19
  51. Anonymous
    07 Apr 19
    • Andre
      08 Apr 19
  52. dxyr
    27 Jul 19
  53. Dunia Android
    10 Dec 19
  54. Bram sadalu
    17 Mar 20
    • Andre
      18 Mar 20
  55. Faiq
    23 Mar 20
  56. topix
    27 Mar 20
  57. aprilia
    18 Oct 20

Add Comment

Leave a Reply to IsengNulis Cancel reply