Pengertian dan Cara Membuat Tabel Sederhana dengan Html

Tabel adalah daftar yang berisi susunan informasi atau data yang ditampilkan dalam bentuk baris dan kolom, Secara umum suatu tabel terdiri atas beberapa elemen antara lain : baris, kolom, sel, dan garis.

Terdapat 3 tag utama sebagai syarat untuk membuat tabel html, 3 tag tersebut antara lain: <table>, <tr>, <td>. Selain 3 tag tersebut terdapat juga tag lain yang bersifat (optional) antara lain: <thead>, <tbody>, <th>, <tfoot>, dsb.

Pada Html, Tabel sering digunakan untuk menampilkan data yang berasal dari Database. Untuk itulah, sangatlah penting untuk mempelajari bagaimana cara membuat Tabel dalam Web Programming khususnya pada HTML.

Daftar isi

1. Tujuan dan Pengertian Tabel dalam Pemrograman Html

Tabel adalah hal yang umum dan sering digunakan dalam website. Dengan Tabel, data/informasi yang ditampilkan akan terlihat rapi, atau bahkan dalam bentuk struktur yang lebih kompleks.

Tujuan pembuatan Tabel adalah untuk menyajikan informasi data secara ringkas dalam bentuk daftar, sehingga akan lebih mudah untuk dbaca. Misalnya menampilkan rincian data siswa atau data keuangan.

Pada HTML, Tabel biasa digunakan untuk menampilkan data dari Database, bisa juga digunakan untuk komunikasi, penelitian, atau analisis data. Untuk membuat Tabel, Anda bisa menggunakan Tag khusus yang sudah disediakan oleh HTML seperti Tag <table>, <tr>, <td>, dsb.

gambar Tabel dengan keterangan beberapa Tag Html
Gambar 1

Jika Anda perhatikan pada gambar diatas, Tabel pada Html tersusun atas beberapa bagian antara lain: Bagian Caption, Header, Body, dan Footer. Beberapa bagian tersebut disusun dan ditulis didalam elemen Table(<table>). Untuk penjelasan atas bagian-bagian tersebut bisa Anda baca di pembahasan No. 5, 6, 7 dan 8(dibawah).

2. Tag Html yang digunakan Untuk Membuat Tabel

Bahasa Pemrograman Html telah menyediakan Tag Tag khusus yang bisa digunakan dalam pembuatan Tabel, dan berikut beberapa tag html beserta dengan deskripsinya yang disajikan dalam bentuk daftar tabel.

Daftar Tabel untuk Tag Html yang digunakan Untuk Membuat Tabel
NoTagKeterangan
1<table>Tag Utama yang digunakan untuk mendefinisikan sebuah Tabel
2<thead>Tag yang menunjukkan bagian dari kepala Tabel(Header)
3<tbody>Tag yang digunakan untuk mendefinisikan bagian isi dari suatu Tabel(body)
4<tfoot>Tag ini mendefinisikan bagian penutup dari tabel(footer)
5<tr>Tag Utama yang digunakan untuk membuat baris pada tabel(elemen baris)
6<td>Tag Utama yang digunakan untuk membuat kolom tabel
7<th>fungsinya hampir sama dengan tag <td>, pada Tag <th> konten/teks akan tercetak tebal dan rata tengah(center)

Tabel diatas pada dasarnya juga dibuat menggunakan tag tag html seperti yang sudah disebutkan. Anda sebagi seorang programmer, pastinya juga sudah mengetahui cara membuat tabel html seperti pada tampilan tabel diatas.

pertama adalah tag <table>, tag <table> digunakan untuk memulai tabel dan ditutup dengan menggunakan tag </table>, sehingga secara keseluruhan bisa disebut dengan elemen tabel.

kedua, elemen table(<table>) adalah hal yang wajib dalam pembuatan tabel, didalam elemen tabel terdapat elemen-elemen lain seperti elemen baris(<tr>), elemen kolom(<td>, <th>), sedangkan elemen cell adalah hasil dari bertemunya elemen baris dan kolom.

Sehingga bisa disimpulkan bahwa syarat utama dalam membuat Tabel HTML adalah menggunakan 3 tag yaitu <table>, <tr>, dan <td>. sedangkan tag tag lain yang berkaitan dalam pembuatan tabel hanya bersifat Optional(tidak wajib).

3. Beberapa Atribut untuk Tag <table>

Secara default, pembuatan tabel html hanya menggunakan Tag saja akan memiliki tampilan biasa, dan yang terlihat adalah teks saja tanpa garis. Untuk itulah Anda bisa menggunakan beberapa atribut html untuk mendukung dalam pembuatan tabel, misalnya atribut border yang berguna untuk membuat garis tabel terlihat.

selain attribut border yang bisa digunakan untuk membuat garis tabel, Anda juga bisa menggunakan attribut lain seperti : bgcolor, cellspacing, align, height, width, dsb. berikut beberapa atribut untuk untuk Tabel html.

Daftar Tabel untuk Beberapa Atribut untuk Tag <table>
NoAtributKeterangan
1alignmengatur perataan teks pada tabel : center, justify, left, right
2backgroundmenentukan gambar latar belakang pada tabel
3bgcolormenentukan warna latar belakang pada tabel
4bordermembuat dan menentukan tebal garis tabel
5cellspacingmenentukan jarak spasi antar cell
6cellpaddingmenentukan jarak antara garis cell dengan isi cell(padding)
7heightmenentukan tinggi tabel
8widthmenentukan lebar tabel
9valignmenentukan posisi vertikal text pada dalam cell : baseline, top, bottom, middle

Pada Html5, beberapa atribut dalam tabel diatas sudah tidak lagi di support, namun masih bisa digunakan. Sebagai alternative, Anda bisa menggunakan css untuk memformat tabel html.

4. Bagian Header Tabel pada Html

Untuk membuat header Tabel pada Html, Anda bisa menggunakan tag khusus yaitu tag <th>. Tag <th> adalah singkatan dari kata 'Table Head' yang berfungsi untuk membuat judul kolom dari baris-baris dibawahnya.

Sebelum menggunakan tag <th>, Anda juga perlu menyertakan tag lain yaitu tag <table>, dan <tr>. Sebagai contoh coba perhatikan contoh kode html sederhana berikut ini.

<table border="1">
   <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
   </tr>
</table>

Jika Anda mencoba menulis ulang beberapa baris kode diatas pada text editor. Kemudian Anda jalankan pada halaman web, maka secara default, teks yang terletak diantara tag <th> dan </th> akan ditampilkan dalam bentuk huruf Tebal dan center(berada ditengah kolom).

Artinya, table head(<th>) membuat teks akan tercetak tebal(bold). Jika Anda perhatikan, contoh kode html diatas hanya mengunakan tag <table>, <tr>, dan <th>, Selain ketiga tag tersebut, Anda bisa juga menambahkan tag <thead>(table header).

Tag <thead> digunakan untuk membungkus konten yang terletak di bagian atas tabel(header), Artinya tag <thead> menunjukkan bagian kepala dari suatu tabel. dan berikut contoh membuat Header yang lebih terstruktur.

<table border="1">
   <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
         <th>Header 5</th>
      </tr>
   </thead>
</table>

5. Bagian Body Tabel pada Html

Setelah Anda mengetahui cara membuat Header Tabel, Anda bisa melanjutkan dengan membuat body tabel pada HTML. Untuk membuat body Tabel secara sederhana, Anda hanya perlu membutuhkan tag <td>, <tr>, dan <table>.

Namun, untuk membuat body tabel lebih terstruktur, Anda bisa menambahkan tag <tbody>(Table Body). tag <tbody> menunjukkan isi dari tabel html. Sebagai contoh coba perhatikan beberapa baris kode dibawah ini.

<table border="1">
   <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
         <th>Header 5</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
         <td>Cell 3</td>
         <td>Cell 4</td>
         <td>Cell 5</td>
      </tr>
      <tr>
         <td>Cell 6</td>
         <td>Cell 7</td>
         <td>Cell 8</td>
         <td>Cell 9</td>
         <td>Cell 10</td>
      </tr>
      <tr>
         <td>Cell 11</td>
         <td>Cell 12</td>
         <td>Cell 13</td>
         <td>Cell 14</td>
         <td>Cell 15</td>
      </tr>
   </tbody>
</table>

6. Bagian Footer Tabel pada Html

Bagian Footer Tabel menunjukkan bagian penutup dari suatu tabel. Namun pada prakteknya, penggunaan Footer Tabel jarang digunakan. Tapi Jika Anda ingin membuat Footer Tabel, Anda bisa menggunakan tag <tfoot>(Table Foot).

Hasil Penggunaan dari Tag <tfoot> akan menampilkan konten di bagian bawah setelah body Tabel. Untuk lebih jelasnya, coba perhatikan contoh kode html berikut dengan menyertakan tag <tfoot>

<table border="1">
   <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
         <th>Header 5</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
         <td>Cell 3</td>
         <td>Cell 4</td>
         <td>Cell 5</td>
      </tr>
      <tr>
         <td>Cell 6</td>
         <td>Cell 7</td>
         <td>Cell 8</td>
         <td>Cell 9</td>
         <td>Cell 10</td>
      </tr>
      <tr>
         <td>Cell 11</td>
         <td>Cell 12</td>
         <td>Cell 13</td>
         <td>Cell 14</td>
         <td>Cell 15</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <th>Footer 1</th>
         <th>Footer 2</th>
         <th>Footer 3</th>
         <th>Footer 4</th>
         <th>Footer 5</th>
      </tr>
   </tfoot>
</table>

7. Bagian Caption Tabel pada Html

Caption Tabel di html dapat Anda gunakan untuk membuat judul Tabel, Caption Tabel bisa Anda tulis dengan tag <captionn>. Penulisan tag <captionn> harus ditulis setelah penulisan tag <table>.

Secara default, suatu caption tabel akan terletak diatas tabel dan berada ditengah-tengah(center). Perlu diingat, bahwa Anda hanya dapat membuat satu Caption per tabel.

Sebagai tambahan, Anda bisa menambahkan sedikit kode CSS untuk mengatur posisi caption Tabel. Misalnya mengatur perataan teks caption dengan attribut text-align(CSS), atau membuat caption berada dibawah tabel bisa menggunakan attribut caption-side(CSS). berikut contoh kode html untuk membuat caption.

<table border="1">

   <caption>Cara Membuat Tabel</caption>
   
   <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
         <th>Header 5</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
         <td>Cell 3</td>
         <td>Cell 4</td>
         <td>Cell 5</td>
      </tr>
      <tr>
         <td>Cell 6</td>
         <td>Cell 7</td>
         <td>Cell 8</td>
         <td>Cell 9</td>
         <td>Cell 10</td>
      </tr>
      <tr>
         <td>Cell 11</td>
         <td>Cell 12</td>
         <td>Cell 13</td>
         <td>Cell 14</td>
         <td>Cell 15</td>
      </tr>
   </tbody>
   
   <tfoot>
      <tr>
         <th>Footer 1</th>
         <th>Footer 2</th>
         <th>Footer 3</th>
         <th>Footer 4</th>
         <th>Footer 5</th>
      </tr>
   </tfoot>
   
</table>

8. Colspan dan Rowspan

Apa itu Colspan? Colspan adalah penggabungan dari beberapa kolom sel menjadi satu sel(cell). Sedangkan Rowspan adalah penggabungan dari beberapa baris sel menjadi satu sel(cell).

Artinya, dalam pemrograman web terdapat fasilitas untuk menggabungkan beberapa cell menjadi satu cell. Hal tersebut mirip dengan fungsi yang dimiliki microsoft excel atau microsoft word yaitu fungsi merge cell. Anda pastinya sudah familiar dengan istilah 'merge cell' tersebut. Untuk lebih jelasnya, berikut contoh kode menggunakan atribut Colspan dan Rowspan.

<table border="1">

   <caption>Nama Hewan</caption>
   
   <thead>
      <tr>
         <th rowspan="2">No</th>
         <th colspan="3">Jenis Hewan</th>
         <th rowspan="2">Keterangan</th>
      </tr>
      <tr>
         <th>Herbivora</th>
         <th>Karnivora</th>
         <th>Omnivora</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>1</td>
         <td>Sapi</td>
         <td>singa</td>
         <td>Monyet</td>
         <td>-</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Gajah</td>
         <td>Serigala</td>
         <td>Orang Utan</td>
         <td>-</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Kuda</td>
         <td>Harimau</td>
         <td>Beruang</td>
         <td>-</td>
      </tr>
   </tbody>
 
</table>

9. Contoh Program Untuk Membuat Tabel

Berikut adalah referensi atau contoh program untuk membuat tabel yang nantinya akan ditampilkan dalam halaman web. Contoh ini dibuat dengan beberapa Tag Html dengan tambahan kode css, kode css dimaksudkan untuk membuat tampilan tabel lebih bagus.

<!DOCTYPE html>
<html>
<head>
   <title>Gotutorid.com</title>
   <style>
      table{
         display:table;
         border-collapse:collapse;
         margin:auto;
      }
      caption{
         margin:20px auto;
         font-size:22px;
         font-family:arial, sans-serif;
         font-weight:bold;
      }
      thead{
         background-color:rgba(128,0,0,0.6);
         color:white;
      }
      tbody tr:nth-child(even){
         background-color:rgba(128,0,0,0.2);
      }
      tr,td,th{
         border:1px solid black;
         text-align:center;
         font-family:calibri,arial,sans-serif;
         padding:10px;
      }
      td{color:rgb(128,0,0);}
   </style>
</head>
<body>
   <table>
      <caption>Nama Hewan</caption>
      <thead>
         <tr>
            <th rowspan="2">No</th>
            <th colspan="3">Jenis Hewan</th>
            <th rowspan="2">Keterangan</th>
         </tr>
         <tr>
            <th>Herbivora</th>
            <th>Karnivora</th>
            <th>Omnivora</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>Sapi Jawa</td>
            <td>Raja singa</td>
            <td>Monyet</td>
            <td>-</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Gajah</td>
            <td>Serigala</td>
            <td>Orang Utan</td>
            <td>-</td>
         </tr>
         <tr>
            <td>3</td>
            <td>Kuda Jantan</td>
            <td>Harimau</td>
            <td>Beruang</td>
            <td>-</td>
         </tr>
         <tr>
            <td>4</td>
            <td>Rusa</td>
            <td>Anjing Liar</td>
            <td>Musang atau Luwak</td>
            <td>-</td>
         </tr>
         <tr>
            <td>5</td>
            <td>Kambing Desa</td>
            <td>Citah</td>
            <td>simpanse</td>
            <td>-</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

dan berikut screenshot atau tampilan hasil dari kode diatas pada halaman web

contoh screenshot table html
Gambar 9