Penakode kali ini akan membahas tentang tutorial membuat tabel di HTML. Tabel biasanya digunakan untuk menyajikan data dalam bentuk baris dan kolom.

Tutorial seputar pembuatan tabel pada HTML ini berupa cara membuat tabel dan elemen yang akan digunakan dalam pembuatan tabel pada HTML.

Contoh Tabel HTML

NoNamaKota
1penaJakarta
2KodeBandung
3penkoYogya

Tampilan diatas merupakan contoh tabel yang terdiri dari 3 kolom dan 4 baris. Kolom berisi data No, Nama, dan Kota.

Dalam tabel HTML terbagi menjadi tabel heading dan tabel data.

Apa Itu Tabel Heading?

Tabel Heading merupakan deskripsi dari kolom sebuah tabel. Sedangkan tabel data berisi data-data yang ada pada sebuah tabel.

Berikut ini adalah contoh tabel heading:

NoNamaKota

Sedangkan untuk tabel data seperti berikut ini:

1penaJakarta
2KodeBandung
3penkoYogya

Tag HTML untuk membuat Tabel

Untuk mendefinisikan tabel pada sebuah halaman HTML, maka harus menggunakan tag <table>.

Tabel terbagi menjadi beberapa baris tabel atau tabel row yang dapat ditampilkan dengan menggunakan tag <tr>.

Pada tabel row dapat berisi tabel data yang menggunakan tag <td> dan juga tabel heading yang menggunakan tag <th>.

Tabel data atau <td> berisi data dari sebuah tabel yang dapat berupa teks, gambar, list atau bisa juga berupa tabel lain.

Kode HTML Untuk Membuat Tabel

<table>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>1</td>
    <td>pena</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Kode</td>
    <td>Bandung</td>
  </tr>
  <tr>
    <td>3</td>
    <td>penko</td>
    <td>Yogya</td>
  </tr>
</table>

Kode HTML diatas akan menampilkan tabel tanpa border seperti dibawah ini:

NoNamaKota
1penaJakarta
2KodeBandung
3penkoYogya

Jika ingin menambahkan data lagi dapat menambahkan baris data dengan menggunakan kode berikut:

  <tr>
    <td>4</td>
    <td>Bima</td>
    <td>Yogya</td>
  </tr>

Membuat Tabel Dengan Border

Untuk membuat tabel dengan border, dapat menambahkan atribut border sehingga penulisannya menjadi seperti <tabel border="1px">.

Sekarang tambahkan border pada tabel diatas dengan menggunakan kode berikut ini:

<table border="1px">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>1</td>
    <td>pena</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Kode</td>
    <td>Bandung</td>
  </tr>
  <tr>
    <td>3</td>
    <td>penko</td>
    <td>Yogya</td>
  </tr>
</table>

Dengan menggunakan atribut border maka tampilan tabel akan menjadi seperti dibawah ini:

NoNamaKota
1penaJakarta
2KodeBandung
3penkoYogya

Mengatur lebar tabel

Untuk mengatur lebar tabel dapat menggunakan atribut width pada tag <table>. Pengaturan lebar tabel dapat menggunakan ukuran persentase seperti:

<table border="1px" width="75%">

Hasil:

NoNamaKota
1penaJakarta
2KodeBandung
3penkoYogya

Selain menggunakan persentase, ukuran lebar tabel dapat juga menggunakan ukuran pixel atau px.

<table border="1px" width="300px">

Hasil:

NoNamaKota
1penaJakarta
2KodeBandung
3penkoYogya

Alignment Tabel

Untuk mengatur posisi tabel dapat juga menggunakan align. Apabila tidak menambahkan align pada tabel maka tabel akan berada di posisi sebelah kiri (default).

Contoh posisi tabel di sebelah kiri:

<table border="1px" width="50%" align="left">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>1</td>
    <td>pena</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Kode</td>
    <td>Bandung</td>
  </tr>
  <tr>
    <td>3</td>
    <td>penko</td>
    <td>Yogya</td>
  </tr>
</table>

Hasil:

NoNamaKota
1penaJakarta
2KodeBandung
3penkoYogya





Contoh posisi tabel di tengah:

<table border="1px" width="50%" align="center">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>1</td>
    <td>pena</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Kode</td>
    <td>Bandung</td>
  </tr>
  <tr>
    <td>3</td>
    <td>penko</td>
    <td>Yogya</td>
  </tr>
</table>

Hasil:

NoNamaKota
1penaJakarta
2KodeBandung
3penkoYogya

Contoh posisi tabel di kanan:

<table border="1px" width="50%" align="right">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>1</td>
    <td>pena</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Kode</td>
    <td>Bandung</td>
  </tr>
  <tr>
    <td>3</td>
    <td>penko</td>
    <td>Yogya</td>
  </tr>
</table>

Hasil:

NoNamaKota
1penaJakarta
2KodeBandung
3penkoYogya





Menambahkan Judul pada Tabel HTML

Untuk menambahkan judul pada tabel HTML dapat menambahkan tag <caption>.

Contoh penambahan judul tabel:

<table border="1px" width="50%">
<caption>Contoh Judul Tabel</caption>
<tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>1</td>
    <td>pena</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Kode</td>
    <td>Bandung</td>
  </tr>
  <tr>
    <td>3</td>
    <td>penko</td>
    <td>Yogya</td>
  </tr>
</table>

Hasil:

Contoh Judul Tabel
NoNamaKota
1penaJakarta
2KodeBandung
3penkoYogya

Penggunaan rowspan dan colspan

Rowspan

Rowspan digunakan untuk membuat cell lebih dari satu baris.

<table width="100%" border="1px">
  <tr>
    <th>Nama</th>
    <td>Penakode</td>
  </tr>
  <tr>
    <th rowspan="2">Alamat</th>
    <td>Jl. Rajawali</td>
  </tr>
  <tr>
    <td>Jakarta</td>
  </tr>
</table>

Hasil:

NamaPenakode
AlamatJl. Rajawali
Jakarta

Colspan

Colspan digunakan untuk membuat cell lebih dari satu kolom.

<table width="100%" border="1px">
  <tr>
    <th>Nama</th>
    <th colspan="2"  style="text-align:center;">Alamat</th>
  </tr>
  <tr>
    <td>Penakode</td>
    <td>Jl. Rajawali</td>
    <td>Jakarta</td>
  </tr>
</table>

Hasil:

NamaAlamat
PenakodeJl. RajawaliJakarta

Bagaimana?

Mudah dimengerti kan cara membuat tabel pada HTML dengan cara diatas. Demikian tutorial membuat tabel pada halaman HTML ini semoga mudah dimengerti dan bisa dipraktekan dengan mudah dari penjelasan diatas.