Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Koding

Cara Membuat Tabel di HTML

Cara membuat tabel di HTML adalah bahasan kita kali ini dalam sesi belajar HTML untuk pemula. Di postingan sebelumnya kita sudah membahas cara memasukkan gambar di HTML. Silakan simak kalau belum.

Membuat Tabel di HTML

Membuat tabel di HTML

Ada 3 tag yang digunakan untuk membuat tabel di HTML. yakni: tag <table>, tag <tr>, dan tag <td>.

<table> : sebagai tag pembuka pembuatan tabel
<tr> : sebagai pembuat baris tabel, singkatan dari table row
<td> : sebagai pembuat kolom tabel, singkatan dari table data

Jadi struktur membuat tabel di HTML (satu baris dan kolom) seperti ini:
<table>
  <tr>
    <td>Kolom 1 Baris 1</td>
  </tr>
</table>

Baris pertama tabel ditandai dengan tag <tr>. Untuk menambahkan baris selanjutnya, tinggal dicopy saja dan paste tepat di bawahanya. Langsung kita coba buat tabel 2 baris dengan masing-masing baris ada 2 kolom data.
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat tabel di HTML</title>
  </head>

  <body>
    <h1>Tabel 2 x 2</h1>

    <table>
      <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>
    </table>
  </body>
</html>

Simpan dengan nama tabel.html.. jadinya seperti ini.

Membuat Tabel di HTML

Loh, kok nggak ada garis tepinya?

Supaya ada garis tepinya, kita tambahkan atribut border pada tag <table>. Nilai dari atribut border ini berukuran dalam satuan pixel.

Coba kita tambahkan border="1".
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat tabel di HTML</title>
  </head>

  <body>
    <h1>Tabel 2 x 2</h1>

    <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>
    </table>
  </body>
</html>

Baru deh ada garis tepinya.

Membuat Tabel di HTML


Kalo mau tambah kolom datanya gimana?

Tinggal tambah ini:
<td>baris 1 kolom 3</td>

dan ini:
<td>baris 2 kolom 3</td>

di masing-masing <tr></tr>.

Jadinya seperti ini:
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat tabel di HTML</title>
  </head>

  <body>
    <h1>Tabel 2 x 2</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>
    </table>
  </body>
</html>

Di browsernya akan tampil:

Membuat Tabel di HTML

Kalo mau tambah barisnya?

Tinggal tambah ini:
<tr>
  <td>baris 3 kolom 1</td>
  <td>baris 3 kolom 2</td>
  <td>baris 3 kolom 3</td>
</tr>

Jadi kode akhirnya:
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat tabel di HTML</title>
  </head>

  <body>
    <h1>Tabel 2 x 2</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>
    </table>
  </body>
</html>

Akan seperti ini jadinya:

Membuat Tabel di HTML

Gimana? nggak susah kan? lebih enak sekalian praktik.

Okay, selesai pembahasan kita tentang membuat tabel di HTML.

Selanjutnya kita akan membahas cara menambahkan komentar di HTML.

2 komentar untuk "Cara Membuat Tabel di HTML"

  1. Unknown18 September 2018 22.52

    Thanks Gan, keren untuk tutorial membuat tabel di html. Cara-caranya sangat jelas. Bermanfaat sekali untuk pemula seperti saya.
    Jangan lupa kunjungi http://www.atmaluhur.ac.id dan https://gianskr.mahasiswa.atmaluhur.ac.id

    BalasHapus
    Balasan
    1. AneIqbal9 Oktober 2018 21.39

      Sama-sama gan. Alhamdulillah.. seneng bisa membantu.
      Makasih kunjungannya gan.

      Hapus

Silakan berkomentar dengan kalimat yang bijak.