Langkah-Langkah Membuat Tabel HTML, Dijamin Sukses

Pada artikel ini saya akan menjelaskan cara membuat tabel (table) menggunakan html (hypertext markup language) langkah demi langkah, barangkali teman-teman blogger ingin belajar membuat struktur tabel sesuai standard markup table.

Pertama-tama akan lebih baik saya jelaskan terlebih dahulu mengenai markup table, agar proses belajar membuat tabel menjadi lebih singkat dan mudah dipahami.

Markup Table (HTML Table Tag)

No.	Tag	Fungsi
1	<table>	Penegas sebuah tabel digunakan sebagai container tabel.
2	<thead>	Markup penegas elemen header pada tabel.
3	<tbody>	Markup penegas elemen body tabel.
4	<tr>	Untuk membuat baris (row) pada tabel
5	<th>	Untuk membuat kolom (column) di header tabel.
6	<td>	Untuk membuat kolom (column) dan cell di body (badan) tabel.
7	<caption>	Untuk teks caption yang menjelaskan tentang table tersebut.

Di atas adalah markup table yang paling umum atau sering digunakan pada tabel, selain markup tersebut masih ada lagi markup (tag) html table yang juga perlu untuk kamu ketahui yakni;

8	<tfooter>	Markup penegas footer (konten bawah) pada tabel.
9	<colgroup>	Untuk membuat grup dari bebrapa kolom (tag <col>) dalam tabel untuk pemformatan.
10	<col>	Untuk membuat kolom (column) pada markup (tag) <colgroup>

[ads id="ads1"]

Mengenal Vokabuler Pada Tabel

Pada sebuah tabel ada beberapa istilah (vokabuler) yang sering digunakan, sebelum belajar membuat tabel sebaiknya kita kenali terlebih dahulu istilah yang dimakasud agar proses belajar tabel menjadi lebih mudah.

Table

Tabel atau table adalah susunan kolom (column) dan baris (row) secara horizontal dan vertikal yang biasanya berisi data atau informasi yang saling memiliki relasi (terstruktur). Sebagian orang mengenal tabel sebagai tabular dan menyebutnya dengan istilah data tabular.

Row

Pada sebuah tabel row adalah baris atau lebih tepatnya adalah baris horizontal yang disususn secara vertikal (dari atas ke bawah) dan umumnya row berisi kolom-kolom.

Column

Column atau kolom pada sebuah tabel adalah kotak yang dimuat dalam elemen baris (row), column merupakan grid element yang dapat disusun secara vertikal maupun horizontal.

Cell

Cell adalah kombinasi antara kolom (column) dan baris (row), pertemuan dari keduanya disebut dengan istilah cell, perhatikan gambar berikut untuk memahami ke-empat istilah tersebut.

Cara Membuat Tabel Menggunakan HTML

Berikut ini adalah langkah-langkah membuat tabel (table) menggunakan html, simak satu demi satu penjelasan lengkapnya;

Langkah 1 - Membuat Container Tabel

Gunakan tag <table> sebagai markup awal untuk membuat container tabel (wajib), seperti contoh pada cuplikan kode di bawah ini.

<table>  // adalah tag pembuka tabel


</table>  // adalah tag penutup tabel

Jangan lupa untuk memberikan spasi baris antara tag pembuka table dan tag penutup tabel seperti yang telah saya contohkan.

Langkah 2 - Membuat Header Tabel

Kemudian tambahkan tag <thead> untuk membuat header (kepala) tabel ke dalam container table, lihat contoh berikut ini.

<table>
 <thead>  // adalah tag pembuka header tabel
 
 </thead>   // adalah tag penutup header tabel

</table>

Langkah 3 - Membuat Baris (Row) Header

Selanjutnya tambahkan tag <tr> pembuka dan tag </tr> penutup ke dalam tag <thead> untuk membuat baris pada header tabel.

<table>
 <thead>
    <tr> spasi </tr>
 </thead>

</table>

Langkah 4 - Membuat Kolom (Column) Header

Untuk membuat kolom pada header tabel, tambahkan tag <th> kedalam baris header yakni <tr> sehingga terlihat seperti berikut ini.

<table>
 <thead>
    <tr><th> Header1 </th></tr>
 </thead>

</table>

Jika ingin membuat lebih banyak kolom header tambahkan tag <th> (tag pembuka dan penutup) sebanyak yang kamu inginkan, misalnya adalah tiga kolom;

<table>
 <thead>
    <tr> <th> Header1 </th>  <th> Header2 </th>  <th> Header3 </th> </tr>
 </thead>

</table>

Preview

Header1	Header2	Header3

Langkah 5 - Membuat Body Tabel

Tambahkan tag <tbody> untuk membuat body tabel ke dalam container tabel, tepatnya setelah tag penutup </thead>, sehingga terlihat seperti berikut ini.

<table>
 <thead>
    <tr><th>Header1</th><th>Header2</th><th>Header3</th></tr>
 </thead>
<tbody>

</tbody>
</table>

Langkah 6 - Membuat Baris (Row) Body

Untuk membuat baris pada body tabel, tambahkan tag <tr> pembuka dan tag </tr> penutup ke dalam tag <tbody> (markup) body table.

<table>
 <thead>
    <tr><th>Header1</th><th>Header2</th><th>Header3</th></tr>
 </thead>
<tbody>
<tr> spasi </tr>

</tbody>
</table>

Langkah 7 - Membuat Kolom (Column) Body

Untuk membuat kolom pada baris di body tabel gunakan tag <td> bukan <th>, tambahkan tag <td> (tag pembuka kolom body) dan tag </td> (tag penutup kolom penutup) ke dalam tag <tr> yang ada pada body table.

Karena header tabel terdiri dari tiga kolom, maka kita juga menambahkan tag <td> pada baris body sebanyak tiga kali agar jumlah kolomnya sama yaitu tiga kolom.

<table>
 <thead>
    <tr><th>Header1</th><th>Header2</th><th>Header3</th></tr>
 </thead>
<tbody>
<tr> <td>value</td>  <td>value</td>  <td>value</td> </tr>
<-- spasi -->
</tbody>
</table>

Jika kamu ingin menambakan lebih banyak baris dan kolom pada body tabel, ulangi langkah 6 dan langkah 7 sebanyak yang kamu inginkan, agar lebih mudah copy saja baris dan kolom yang ada pada body table yang telah kita buat yakni;

<tr> <td>value</td>  <td>value</td>  <td>value</td> </tr>

Kemudian paste/tempelkan di atas tag penutup body yakni; </tbody> sehingga markup table akan terlihat sperti di bawah ini.

<table>
 <thead>
    <tr><th>teks</th><th>teks</th><th>teks</th></tr>
 </thead>
<tbody>
<tr> <td>value</td>  <td>value</td>  <td>value</td> </tr>
<tr> <td>value</td>  <td>value</td>  <td>value</td> </tr>
<tr> <td>value</td>  <td>value</td>  <td>value</td> </tr>
<tr> <td>value</td>  <td>value</td>  <td>value</td> </tr>
</tbody>
</table>

Preview

Header1	Header2	Header3
value	value	value
value	value	value
value	value	value
value	value	value

Pada tahap ini markup tabel beserta baris dan kolom (row dan column) sudah selesai kita buat tanpa ada kesalahan, sekarang agar desain tabel lebih menarik dan responsive pengaturan css (cascading style sheets) perlu ditambahkan.

Pengaturan Dasar CSS Tabel

table {
  width:100%;
  max-width:500px;
  box-sizing:border-box;
  margin:10px 0;
  border-collapse:collapse;
 }
table td,table th {
  box-sizing:border-box;
  padding:5px 15px;
  border:1px solid rgba(155,155,155,0.3);
  text-align:left;
  }

Keterangan: table{width:100%} adalah pengaturan dasar tabel responsive, nilai width:100% dipilih agar tabel selalu dalam tampilan lebar penuh, sedangkan;

max-width:500px; adalah pembatas lebar tabel (lebar maksimal), hapus jika tidak diperlukan atau ganti nilainya menjadi 100% agar lebar tabel selalu penuh di berbagai ukuran layar.

box-sizing:border-box; adalah pembatas element (tabel) agar tidak keluar dari padding (melebihi frame atau container yang memuatnya).

margin:10px 0; adalah pengatur jarak atas dan bawah tabel agar tidak mampat dengan element lain, kemudian;

border-collapse:collapse; merupakan css untuk menghilangkan jarak atau rongga antar kolom (table cell) pada tabel.

padding:5px 15px; untuk mengatur jarak font/data pada kolom agar tidak mampat dengan border.

border:1px solid rgba(155,155,155,0.3); untuk mengatur ketebalan border (garis) pada table cell dan warna border.

text-align:left; adalah pengatur teks pada kolom tabel agar selelu berada diposisi kiri, ubah menjadi center untuk membuat teks di posisi tengah atau right untuk membuat teks di posisi kanan.

#CSS - Mengatur Warna Background Dan Font

table {
  background-color: white;
  color: grey;
 }

Pengaturan css di atas menjadikan warna background tabel putih dan warna font grey, untuk desain yang lebih spesifik penerapan warna background pada selector tabel tidak perlu dilakukan,

Misalnya ketika kamu ingin mengatur warna background pada header dan body tabel seperti contoh di bawah ini.

table th {
  background-color:#d7daf9; // adalah warna background kolom header (table th)
  color: #636363; // warna font header
  }
table td {
  background-color:#fbf9d2; // adalah warna background kolom body (table td)
  color: #636363; // warna font header body
  }

Penting: dalam menentukan warna background pada kolom tabel pastikan warna tersebut memiliki kontras yang memadai dengan warna font agar konten atau teks pada kolom tetap dapat dibaca.

#CSS - Mengatur Lebar Kolom (column)

Berikut adalah kode css untuk mengatur lebar kolom pada tabel menjadi sama rata dan responsive, misalnya jumlah kolom adalah tiga.

table {
   width:100%; // lebar tabel penuh
  }
table td,table th {
   width:33.3%; // adalah lebar masing-masing kolom
  }

Jika jumlah kolom adalah empat, ubah width:33.3%; menjadi width:25%;, jika jumlah kolom adalah dua, ubah width:33.3%; menjadi width:50%; dan lebar tabel keseluruhan biarkan tetap 100%.

Metode lainnya, untuk mengatur lebar kolom tidak sama rata namun tetap responsive, misalnya jumlah kolom pada tabel adalah tiga.

table {
   width:100%;  // adalah lebar tabel penuh
  }
table td:first-child,table th:first-child {
   width:10%;  // adalah lebar kolom pertama
  }
table td:nth-child(2),table th:nth-child(2) {
   width:30%;  // adalah lebar kolom kedua
  }
table td:last-child,table th:last-child {
   width:60%;  // adalah lebar kolom terakhir
  }

Mengatur lebar kolom pada tabel dengan ukuran yang spesifik dengan ukuran pixel (px).

table {
   width:auto;  // lebar tabel disetting otomatis mengikuti lebar keseluruhan kolom
  }
table td,table th {
   width:200px;  // adalah lebar setiap kolom
  }

Jika jumlah kolom adalah 4 maka lebar keseluruhan tabel adalah 200x4 dalam satuan pixel (px).

Demikian dari saya langkah-langkah membuat tabel menggunakan html beserta pengaturan css tabel, semoga artikel ini dapat membantu teman-teman blogger dalam belajar html khususnya belajar membuat tabel.