Cara membuat tabel di dalam tabel html

•  1. Tujuan dan Pengertian Tabel dalam Pemrograman Html
•  2. Tag Html yang digunakan Untuk Membuat Tabel
•  3. Beberapa Atribut untuk Tag <table>
•  4. Bagian Header Tabel pada Html
•  5. Bagian Body Tabel pada Html
•  6. Bagian Footer Tabel pada Html
•  7. Bagian Caption Tabel pada Html
•  8. Colspan dan Rowspan
•  9. Contoh Program Untuk Membuat Tabel

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.

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.

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.

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