Pemrograman

Bahasa

Framework

Peralatan

Info

Membuat Tabel di HTML

– 19 October 2014

Terkadang informasi perlu disajikan dalam bentuk tabel. Contohnya saya ingin memberikan informasi tentang jadwal pelajaran melalui web. Sangat tidak elegan jika saya membuat tabel di Libre Office lalu saya foto dan di tempel di web. Oleh karena itu, kita perlu membuat tabel di HTML.

Membuat tabel di HTML dapat menggunakan tag <table>. Tag ini memiliki anak yaitu tag <tr> (table row) untuk membuat baris, tag <td> (table data) Untuk membuat kolom, dan tag <th> (table header) untuk membuat kepala tabel.

Struktur penulisan tag <table>

<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>

Hasil dari kode di atas:

Baris 1 kolom 1baris 1 kolom 2
Baris 2 kolom 1baris 2 kolom 2

Tabel di atas tidak terlihat seperti tabel karena tidak ada garis. Untuk membuat garis kita perlu menambahkan atribut border Sehingga menjadi seperti ini:

<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>

Hasilnya:

Baris 1 kolom 1baris 1 kolom 2
Baris 2 kolom 1baris 2 kolom 2

Membuat tabel jadwal pelajaran

<!DOCTYPE html>
<html>
<head>
  <title>Jadwal Pelajaran</title>
</head>

<body>
  <table border="1">
     <tr><th>No</th><th>Senin</th><th>Selasa</th><th>Rabu</th></tr>
     <tr><td>1</td><td>HTML</td><td>PHP</td><td>Python</td></tr>
     <tr><td>2</td><td>CSS</td><td>AJAX</td><td>C++</td></tr>      <tr><td>3</td><td>JavaScript</td><td>JQuery</td><td>Java</td></tr>
  </table> </body> </html>

Hasil:

NoSeninSelasaRabu
1HTMLPHPPython
2CSSAJAXC++
3JavaScriptJQueryJava

Menggabungkan sel tabel

Untuk menggabungkan sel tabel kita bisa menambahkan atribut rowspan dan colspan di tag <td> atau <th>. rowspan berfungsi menggabungkan sel menjadi satu baris dan colspan untuk menggabungkan beberapa sel menjadi satu kolom.

Untuk lebih jelasnya perhatikan contoh berikut:

<table border="1">
  <tr><th rowspan="2">Bulan</th><th colspan="2">Hasil Panen</th></tr>
  <tr><th>Padi</th><th>Kacang</th></tr>
  <tr><td>Januari</td><td>500 Kg</td><td>231 Kg</td></tr>
  <tr><td>Februari</td><td>342 Kg</td><td>423 Kg</td></tr>
  <tr><td>Maret</td><td>432 Kg</td><td>124 Kg</td></tr>
  <tr><td>April</td><td>453 Kg</td><td>523 Kg</td></tr>
</table>

Hasil:

BulanHasil Panen
PadiKacang
Januari500 Kg231 Kg
Februari342 Kg423 Kg
Maret432 Kg124 Kg
April453 Kg523 Kg

Tabel sebagai layout

Tabel juga digunakan untuk membuat layout (tata letak) web. Jaman dahulu, sebelum diperkenalkannya CSS, banyak website menggunakan tabel sebagai layout. Sekarang pembuatan layout menggunakan tabel sudah banyak ditinggalkan, karena kurang efisien.

Berikut ini adalah contoh penggunaan tabel sebagai layout:

<!DOCTYPE html>
<html>
<head>
  <title>Tabel sebagai layout</title>
</head>

<body>
  <table border="1">
    <tr><td colspan="2"><h1>Judul Website</h1></td> </tr>
    <tr><td width="25%">Menu:
      <ul>
         <li>Login</li>
         <li>Daftar</li>
         <li>Cari</li>
     </ul>
  </td>
  <td width="75%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.</td> </tr>
<tr><td colspan="2">&copy; 2014 Petani Kode, web ini dibuat dengan software open source</td></tr>
  </table>
</body>
</html>

Hasil:

Judul Website

Menu:
  • Login
  • Daftar
  • Cari
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
© 2014 Petani Kode, web ini dibuat dengan software open source

Membuat tabel terkadang hasilnya tidak sesuai seperti yang diinginkan. Cobalah periksa penulisan kode HTML-nya, sudah benar atau tidak.