Cara Membuat Tabel di HTML cukup mudah di lakukan, akan tetapi saya mau menjelaskan sedikit nih apa itu Tabel di html.

Biasanya dalam sebuah website untuk menampilkan sekumpulan data sejenis, kita akan membuat tabel menggunakan tag table html.

Beberapa Elemen Pada Tabel

Ilustrasi elemen pada tabel

Note: warna-warna di atas hanya untuk mempermudah penjelasan saja.

  • Baris / Row
    Baris pada tabel merupakan 1 baris cell dari kiri sampai kanan yang berwarna hijau.
  • Kolom / Column
    Kolom pada tabel merupakan 1 baris cell dari atas sampai bawah yang berwarna merah.
  • Sel / Cell
    Sel pada tabel merupakan sebuah kotak yang biasanya akan di isi sebuah data / tulisan yang berwarna ungu.
  • Garis / pembatas / border
    Garis pada tabel merupakan sebuah pembatas antar tiap sel agar lebih mudah di baca yang berwarna hitam.

Beberapa Tag HTML Yang Diperlukan Untuk Membuat Tabel

  • tag <table> merukan tag untuk pembungkus keseluruhan tabel
  • tag <tr> merupakan tag untuk membuat baris atau row
  • tag <td> merupakan tag untuk membuat sel atau cell

Sudah cukup penjelasannya, mari kita langsung praktek koding nya aja ya temen-temen.

<!DOCTYPE html>
<html>
  <head>
    <title>Cara Membuat Tabel Di HTML</title>
  </head>
  <body>
    <table>
      <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>
    </table>
  </body>
</html>

Hasil nya akan seperti ini:

Page yang di hasilkan code html untuk membuat tabel di atas

Loh kok ga ada garis nya? tunggu dulu verguso hehe..
kita tambahin dulu border / garis di tag table nya kode nya akan menjadi seperti ini:

<!DOCTYPE html>
<html>
  <head>
    <title>Cara Membuat Tabel Di HTML</title>
  </head>
  <body>
    <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>
    </table>
  </body>
</html>

Hasilnya akan seperti ini:

Page yang di hasilkan code html untuk membuat tabel dengan border di atas

Nah Tag properti border itu kan kita isi dengan value 1, yaitu value terkecil nya. Semakin besar value nya, contoh kita isi 2 atau 3, maka garis atau bordernya pun akan menjadi lebih besar dan tebal juga.

Cara Mengatur Jarak Cell Tabel HTML

Sekarang temen-temen pasti mau nanya kan, itu kok tulisan nya dempet dempet, enggak enak nih di baca nya jadinya.

Jadi temen-temen bisa tambahkan tag properti cellpadding untuk mengatur padding atau jarak dalam sebuah sel. Berikut ini contoh kode nya:

<!DOCTYPE html>
<html>
  <head>
    <title>Cara Membuat Tabel Di HTML</title>
  </head>
  <body>
    <table border="1" cellpadding="20">
      <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>
    </table>
  </body>
</html>

Berikut ini hasil dari kode yang di atas:

Page yang di hasilkan code html untuk membuat tabel dengan border dan cellpadding di atas

Cara Mengatur Warna Cell Tabel HTML

Sekarang pasti temen-temen mau nanya lagi nih, gimana sih cara warnain tabel nya?

Caranya gampang, tinggal tambahin aja bgcolor di tag properti <tr> atau <td>. Berikut ini contoh kode nya:

<!DOCTYPE html>
<html>
  <head>
    <title>Cara Membuat Tabel Di HTML</title>
  </head>
  <body>
    <table border="1" cellpadding="20">
      <tr>
        <td bgcolor="green">Baris 1 Kolom 1</td>
        <td>Baris 1 Kolom 2</td>
        <td>Baris 1 Kolom 3</td>
      </tr>
      <tr bgcolor="red">
        <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>
    </table>
  </body>
</html>

Berikut ini hasilnya:

Gambar tabel html yang sudah di warnai

Cara Menggabungkan Sel Pada HTML

Biasanya pada saat temen-temen menggunakan Excel terkadang kita butuh menggabungkan sel, berikut ini contoh kodenya:

<!DOCTYPE html>
<html>
  <head>
    <title>Cara Membuat Tabel Di HTML</title>
  </head>
  <body>
    <table border="1" cellpadding="20">
      <tr>
        <td bgcolor="green">Baris 1 Kolom 1</td>
        <td colspan="2">Baris 1 Kolom 2</td>
      </tr>
      <tr bgcolor="red">
        <td>Baris 2 Kolom 1</td>
        <td rowspan="2">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>
      </tr>
    </table>
  </body>
</html>

Berikut ini hasil nya:

Gambar tabel html sel yang sudah di gabungkan

Luqmanul.com sekarang sudah punya channel Discord loh! Yuk gabung!
Kamu bisa belajar bareng bersama temen-temen yang lain dan saya bisa bantu jawab jika ada pertanyaan disana. Klik disini => https://discord.gg/ujqZEd

Temen-temen juga bisa Subscribe channel Luqmanul Hakim di YouTube
Klik disini => https://www.youtube.com/channel/UCr_VqbqZBSuBCerjbugdNYA