Bagaimana cara membuat tabel menggunakan html?…
Tabel bisanya dibuat untuk memperjelas beberapa keterangan yang ada, kemudian membaginya menjadi beberapa kelompok. Dia juga akan membuat sebuah informasi tersebut lebih enak dipandang.
Coba perhatikan gambar berikut
Lebih rapi dan enak mana dilihat, yang menggunakan tabel atau tidak?….
Saya yakin kita sudah mengenal yang namanya tabel, karena dia juga ada di microsoft word.
Mungkin dari segi tampilan tidak jauh beda. Akan tetapi cara membuat tabel di word tidak sama dengan cara membuat tabel di html.
Karena di microsoft word kita tidak memerlukan kode, cukup menggunakan alat yang sudah tersedia di sana.
Sedangkan di html kita memerlukan kode-kode tertentu yang sering dikenal dengan tag. Dan jika ingin membuatnya dengan praktis kita memerlukan software HTML editor.
Tapi walaupun kita sudah menggunakan software HTML editor, tetap saja kita perlu mempelajari tag-tag yang berhubungan dengan pembuatan tabel tersebut.
Tag HTML5 Yang Diperlukan Untuk Membuat Tabel
Ada 10 tag / kode yang kita perlukan jika kita ingin membuat tabel html, yaitu :
| No | Tag | Kegunaan |
|---|
| 2 | <table> | Untuk membungkus keseluruhan tabel |
| 1 | <tbody> | Untuk membungkus grup body / isi tabel |
| 3 | <thead> | Untuk membungkus grup header tabel |
| 4 | <th> | Untuk membuat kolom header tabel dalam bentuk kolom ke samping |
| 5 | <tr> | Untuk membuat kolom ke bawah pada tabel |
| 6 | <td> | Untuk membuat kolom ke samping pada tabel |
| 7 | <tfoot> | Untuk membungkus grup footer tabel |
| 8 | <caption> | Untuk memberikan caption / keterangan pada tabel |
| 9 | <colgroup> | Untuk menentukan kelompok dari satu atau lebih kolom di dalam tabel |
| 10 | <col> | Untuk mengaitkan seluruh kolom menurun setiap kolom dalam <colgroup> menggunakan atribut span |
Tidak semua tag di atas wajib ada dalam sebuah tabel html.
Sedangkan yang wajib ada hanya 3 tag saja, yaitu no.1 <table>, 5 <tr> dan 6 <td>.
Bagaimana cara menggunakan kode-kode tersebut?…
Untuk membuat tabel menggunakan tag di atas kita harus memahami kegunaan masing-masing tag.
Setelah mengetahuinya, kita juga harus ingat bahwa kebanyakan tag harus di akhiri dengan tag penutup. Ini sudah saya jelaskan di halaman
belajar html untuk dasar pemula.
Dan perbedaan antara tag pembuka dan penutup hanya pada garis miring (/) saja.
| Tag Pembuka | Tag Penutup |
|---|
<table> | </table> |
Oke, mari kita lanjutkan.
Cara Membuat Tabel HTML Sederhana
Agar lebih mudah memahami bagaimana cara menggunakan tag-tag di atas dalam pembuatan tabel. Saya akan memberikan contoh mulai dari yang paling sederhana.
Yaitu dengan menggunakan 3 tag yang wajib saja.
Silakan siapkan text editor seperti Notepad, atau buka html editor kalau punya.
Misalnya kita ingin membuat tabel sederhana dengan 3 kolom ke bawah dan 2 kolom ke samping.
Maka yang pertama harus ditulis adalah kode pembungkus tabel, yaitu :
Agar lebih mudah dilihat, silakan beri jarak antara tag pembuka dan penutup dengan cara menekan tombol enter.
Setelah itu kita akan membuat 3 kolom ke bawah menggunakan tag <tr>.
Maka kita harus menulis kode tersebut sebanyak 3x tag pembuka dan 3x tag penutup, jumlahnya 6x.
Seperti ini
<table>
<tr>
</tr><!--- Kolom menurun 1 selesai --->
<tr>
</tr><!--- Kolom menurun 2 selesai --->
<tr>
</tr><!--- Kolom menurun 3 selesai --->
</table>
Jangan lupa beri jarak pemisah antara <tr> dan </tr>, karena kode kolom ke samping akan kita tulis di sana.
<!--- Kolom menurun 1 selesai ---> sampai 3 hanya keterangan tambahan untuk mempermudah kita membedakan masing-masing kolom. Ini tidak wajib dan tidak akan ditampilkan.
Selanjutnya baru kita buat 2 kolom ke samping menggunakan tag <td>.
Karena terdapat 3 kolom ke bawah. Maka kita harus menulis tag <td> sebanyak 2x (4x jika beserta tag penutup) pada masing-masing kolom ke bawah.
Sehingga hasil keseluruhan menjadi seperti ini
Kode Tebel HTML Sederhana
<table>
<tr>
<td>.......</td>
<td>.......</td>
</tr><!--- Kolom menurun 1 selesai --->
<tr>
<td>.......</td>
<td>.......</td>
</tr><!--- Kolom menurun 2 selesai --->
<tr>
<td>.......</td>
<td>.......</td>
</tr><!--- Kolom menurun 3 selesai --->
</table>
Di mana kita harus menulis isi yang akan ditampilkan pada tabel?….
Pada hasil keseluruhan kode di atas saya sengaja memberi tanda …….
Pada tanda ……. itulah nantinya kita akan menulis isi tabel (jangan lupa hapus tanda ……. itu ya).
Intinya kita harus menulis isi tabel di antara kode <td> dan </td>, atau <th> dan </th> jika menggunakan tabel header.
Untuk melihat contoh nyata silakan perhatikan gambar berikut
Kenapa tabel yang dibuat tidak memiliki garis dan tidak seperti tabel yang ada pada website umumnya?…
Secara default begitulah hasil tabel yang kita buat menggunakan kode html / tag tabel.
Apabila kita ingin membuat tabel html tersebut memiliki garis dan terlihat lebih menarik. Maka kita harus memberinya sentuhan CSS.
Sebenarnya kita bisa saja membuat garis menggunakan atribut border="nilai".
nilai pada atribut tersebut harus ditulis dengan angka yang akan diterjemahkan dalam pixel, misalnya :
border="1" artinya besar garis 1px (pixel) atauborder="2" artinya besar garis 2px (pixel) dan seterusnya
Untuk contoh penerapannya silakan lihat gambar berikut.
Namun karena saat ini atribut border sudah tidak valid di HTML5, maka kita disarankan untuk membuat garis menggunakan CSS.
Cara Membuat Tabel Dengan Kode HTML Lengkap
Sebelum kita lanjut ke pembuatan garis pada tabel. Saya akan memberikan contoh kode tabel html yang lebih lengkap.
Misalnya kita bikin tabel daftar tagihan (1 kolom header + 5 kolom body + 1 kolom footer untuk total). Atau 7 kolom ke bawah dan 5 ke samping.
Kita buat lebih singkat saja ya tutorialnya 🙂
Pertama : Membuat grup kolom menjadi berwarna menggunakan <colgroup> dan <col>
Kode
<colgroup>
<col span="4" style="background-color:#6cc5fc">
<col style="background-color:#76f8d0">
</colgroup>
Keterangan :
- 4 kolom ke samping nanti akan berwarna
#6cc5fc.
- 1 kolom terakhir (paling kanan) akan berwarna
#76f8d0.
Kedua : Menambahkan keterangan / judul pada tabel
kode yang akan digunakan adalah <caption>.
<caption>Tabel HTML Lengkap</caption>
Judul pada tabel memang jarang digunakan.
Namun pada beberapa situasi mungkin kita memerlukannya.
Ketiga : Membuat tabel header 1 kolom ke bawah + 5 kolom ke samping
Tag yang diperlukan adalah :
<thead> sebagai pembungkus tabel header.<tr> pembungkus kolom ke bawah.<th> pembungkus kolom ke samping.
Karena kita membuatnya menjadi 1 kolom ke bawah dan 5 ke samping, maka kalau ditulis menjadi seperti ini :
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Tagihan (Rp)</th>
<th>Bulan</th>
<th>Total (Rp)</th>
</tr>
</thead>
Keempat : Membuat tabel isi (body) 6 kolom ke bawah + 5 kolom ke samping
Tag yang kita perlukan yaitu :
<tbody> sebagai pembungkus tabel body.<tr> pembungkus kolom ke bawah.<td> pembungkus kolom ke samping.
Karena tujuan kita adalah untuk membuat 6 kolom ke bawah dan 5 ke samping, maka akan ditulis seperti ini :
<tbody>
<tr>
<td>2</td>
<td>Ahmad</td>
<td>25.000</td>
<td>2</td>
<td>50.000</td>
</tr>
<tr>
<td>1</td>
<td>M. Syahroni</td>
<td>25.000</td>
<td>1</td>
<td>25.000</td>
</tr>
<tr>
<td>3</td>
<td>Edo Wijaya</td>
<td>25.000</td>
<td>3</td>
<td>75.000</td>
</tr>
<tr>
<td>4</td>
<td>Ali Wafa</td>
<td>25.000</td>
<td>1</td>
<td>25.000</td>
</tr>
<tr>
<td>5</td>
<td>Syarwani</td>
<td>25.000</td>
<td>1</td>
<td>25.000</td>
</tr>
<tr>
<td>6</td>
<td>Suhartono</td>
<td>25.000</td>
<td>4</td>
<td>100.000</td>
</tr>
</tbody>
Kelima : Membuat tabel footer untuk hasil 1 kolom ke bawah + 2 kolom ke samping
Tag yang akan kita gunakan adalah :
<tfoot> sebagai pembungkus tabel footer.<tr> dan <td>.
Karena kita ingin membuat 1 kolom ke bawah dan 2 ke samping, maka ditulis seperti ini :
<tfoot>
<tr>
<td colspan="4" style="text-align:right">Total</td>
<td>300.000</td>
</tr>
</tfoot>
Kok cuma bikin 2 kolom ke samping, tidak 5 seperti yang lainnya?….
Karena kolom yang akan dipakai cuma 2 saja, maka kita buat 2 saja.
Dan pada kolom pertama terdapat atribut colspan yang nantinya akan membuatnya menjadi selebar 4 kolom.
Jadi lebih hemat kode 🙂
Apakah boleh saya buat 5 kolom ke samping juga?….
Boleh…. Tapi atribut jangan lupa dibuang ya…
Sehingga kalau ditulis jadi begini
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td>Total</td>
<td>300.000</td>
</tr>
</tfoot>
Pada kode di atas, ada 3 kolom yang dikosongkan.
Keenam : Membungkus semua dengan kode <table>
Kode akhirnya menjadi seperti ini
<table>
<colgroup>
<col span="4" style="background-color:#6cc5fc">
<col style="background-color:#76f8d0">
</colgroup>
<caption>Tabel HTML Lengkap</caption>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Tagihan (Rp)</th>
<th>Bulan</th>
<th>Total (Rp)</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Ahmad</td>
<td>25.000</td>
<td>2</td>
<td>50.000</td>
</tr>
<tr>
<td>1</td>
<td>M. Syahroni</td>
<td>25.000</td>
<td>1</td>
<td>25.000</td>
</tr>
<tr>
<td>3</td>
<td>Edo Wijaya</td>
<td>25.000</td>
<td>3</td>
<td>75.000</td>
</tr>
<tr>
<td>4</td>
<td>Ali Wafa</td>
<td>25.000</td>
<td>1</td>
<td>25.000</td>
</tr>
<tr>
<td>5</td>
<td>Syarwani</td>
<td>25.000</td>
<td>1</td>
<td>25.000</td>
</tr>
<tr>
<td>6</td>
<td>Suhartono</td>
<td>25.000</td>
<td>4</td>
<td>100.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="text-align:right">Total</td>
<td>300.000</td>
</tr>
</tfoot>
</table>
Dan hasilnya seperti gambar berikut
Cara Membuat Garis Pada Tabel Menggunakan CSS / Memberi Style
Secara default tabel html tidak memiliki garis pembatas / border, kecuali jika dia sudah di beri style dengan sentuhan css.
Lain halnya jika kita membuat tabel di blogger / wordpress atau platform website praktis lainnya.
Karena biasanya template yang kita gunakan pada platform tersebut sudah mengandung css yang akan membentuk tabel.
Berikut kode css yang bisa digunakan untuk membuat garis pada tabel di atas
table caption {font-size:130%;font-size:bold;padding:10px 0}
table,tr {border-collapse: collapse;}
thead {background-color:#555;color: aliceblue}
th{border:1px solid #333;margin: 0;padding:5px}
td{border:1px solid #646262;margin: 0;padding:5px}
Untuk penempatan kode css tabel di atas bisa dengan cara penulisan internal atau eksternal.
Bagaimana cara penulisan css internal maupun eksternal?…
Agar lebih mudah memahaminya silakan lihat gambar berikut.
Untuk penulisan internal kita cukup menulis kode seperti ini sebelum </head>.
<style type="text/css">
tulis kode css di sini
</style>
Sedangkan penulisan eksternal kita harus membuat file dengan akhiran .css.
misalnya : main.css atau styleku.css, dan sebagainya.
Apabila sebelumnya kita sudah memiliki file css. Maka kita cukup mengedit atau menambahkan kode css tabel di atas di dalam file tersebut.
Jika belum punya maka kita dapat membuatnya menggunakan Notepad.
Caranya :
- Buka Notepad.
- Paste seluruh kode css tabel di dalamnya.
- Simpan file. Klik File → Save As → Jangan lupa akhiri nama file dengan
.css, misal tabel.css, atau dengan nama yang anda mau.
Kemudian masukkan url file tersebut pada atribut href pada tag <link>.
contoh : <link rel="stylesheet" href="tabel.css">
Atribut Untuk Tabel HTML
Berikut atribut html yang berhubungan dengan tag untuk membuat tabel.
| Atribut | Untuk | Fungsi |
|---|
colspan | <td>, <th> | Untuk menentukan jumlah kolom tabel yang akan di jangkau secara horizontal. |
rowspan | <td>, <th> | Untuk menentukan jumlah baris cell / kolom tabel yang akan di jangkau secara vertikal. |
headers | <td>, <th> | Untuk mendefinisikan satu atau lebih header cell yang berhubungan. |
scope | <th> | Untuk mendefinisikan cara untuk mengasosiasikan sel header dan sel data dalam tabel. |
span | <col>,<colgroup> | Untuk menentukan jumlah kolom yang di jangkau. |
class | Global | Untuk menentukan satu / lebih class unik sebuah elemen (untuk menghubungkan dengan css). |
id | Global | Untuk menentukan id unik untuk sebuah elemen (untuk menghubungkan dengan css). |
style | Global | Untuk memberikan style (CSS inline) pada sebuah elemen. |
Nah itulah semua atribut yang bisa digunakan pada tabel html, 3 di antaranya termasuk atribut global.
Perlu diketahui bahwa atribut bukanlah suatu yang wajib ada, namun dalam kondisi tertentu kita memerlukannya.
Oke, akan saya jelaskan bagaimana cara menggunakan sebagian atribut di atas.
Cara Menggunakan Atribut colspan dan rowspan Pada Tabel
Fungsi kedua atribut ini sudah saya jelaskan secara singkat di atas.
Jika masih belum jelas kegunaannya silakan lihat gambar berikut.
Pada contoh ini terdapat 1 atribut rowspan dan 2 colspan yang masing-masing memiliki nilai yang ditulis dengan angka, yaitu :
rowspan="2"colspan="2"colspan="3"
Angka 2 dan 3 adalah nilai dari atribut yang bersangkutan. Sehingga kolom tersebut memanjang menjadi 2 / 3 kolom ke samping (colspan) atau ke bawah (rowspan).
Apabila nilai kita rubah menjadi 5, maka kolom akan memanjang seperti 5 kolom, dan seterusnya.
Cara Menggunakan Atribut headers Pada Tabel
Atribut ini tidak akan mempengaruhi pada tampilan tabel.
Sedangkan cara penggunaanya adalah menggunakan atribut id yang nantinya akan dikaitkan dengan atribut headers.
Untuk lebih jelasnya silakan perhatikan gambar berikut.
Pada contoh di atas terdapat 1 id dengan nilai name dan 2 headers dengan nilai yang sama. Itu mengisyaratkan bahwa mereka memiliki hubungan.
Contoh penggunaan atribut scope
Karena ini juga tidak mempengaruhi tampilan tabel, maka saya hanya akan memberikan contohnya saja.
contoh dan hasil ada pada gambar berikut.
Cara menggunakan atribut span dan style pada tabel
Atribut ini dapat kita gunakan pada tag <colgroup> atau <col>.
Hampir sama dengan penggunaan atribut colspan dan rowspan, yang mana nilai dari atribut akan menjelaskan jumlah kolom yang akan dijangkau.
Apabila nilai kita isi dengan angka 3, maka jumlah kolom yang akan dijangkau adalah 3 juga.
Berikut contoh penggunaan beserta hasilnya.
Pada contoh di atas terdapat juga atribut style (lebih lengkapnya style="background-color:#9ccc65").
nilai background-color:#9ccc65 akan membuat tabel yang dijangkau menggunakan atribut span memiliki latar dengan warna #9ccc65.
Apabila ingin merubah warna latar, maka kita cukup mengganti #9ccc65 dengan kode warna lainnya, misalnya #000 (untuk hitam), dsb.
Atribut style tidak hanya dapat digunakan untuk memberi warna latar sebuah elemen saja, namun dia memiliki fungsi yang luas, seperti :
- Untuk memberi warna pada teks serta merubah font.
- Untuk menentukan lebar serta warna garis tepi / border.
- Untuk memberi jarak keluar / kedalam elemen (margin / padding).
- Dan sebagainya.
Intinya atribut style fungsinya untuk memberi sentuhan css, atau bisa juga disebut untuk membuat css inline.
Namun sekarang ini css inline hanya digunakan pada kondisi tertentu saja, karena lebih efektif menggunakan css internal / eksternal.
Cara Menggunakan Atribut Class dan ID Pada Tabel
Sebenarnya ini jarang digunakan pada tag tabel html, namun tidak ada salahnya juga kita menggunakannya.
Karena kedua atribut ini fungsinya untuk mengaitkan tabel dengan css internal atau eksternal. Maka dia tidak akan memiliki fungsi jika tidak ada class / id yang ditulis pada css website kita.
Selain untuk mengaitkan dengan css. Tag id juga dapat digunakan untuk mengaitkan dengan atribut headers, seperti yang sudah saya contohkan di atas tadi.
Setiap class maupun id harus memiliki nilai (nama) yang sama dengan nama (selector) yang ada pada css.
Misalnya kita akan menyisipkan sebuah class dengan nilai besar, maka penulisannya seperti ini class="besar".
Sedangkan pada css selector class akan ditulis dengan tanda titik (.) didepannya, maka penulisannya begini .besar {property : value}.
Atau kita ingin menyisipkan id dengan nilai agak-besar, maka harus ditulis seperti ini id="agak-besar".
Dan pada css selector id harus ditulis dengan tanda pagar (#) didepannya, maka penulisannya begini #agak-besar {property : value}.
Untuk contoh penggunaanya silakan lihat gambar ini.
Selesai dan selamat mencoba 🙂
Semoga panduan bagaimana cara membuat tabel html ini bermanfaat untuk anda.
