Tabel merupakan salah satu elemen yang berfungsi untuk mengelompokkan informasi dalam bentuk kategori atau jenis tertentu melalui struktur baris dan kolom, sehingga susunan data nampak lebih rapi. Pada dokumen digital seperti artikel yang dimuat dalam suatu website atau blog, tak jarang ditemukan tabel di dalamnya.
Bagi para pemula mungkin ada yang kepikiran bagaimana cara membuat tabel post itu? Soalnya berbeda dengan software dokumen pada PC, platform seperti Blogger sampai saat ini belum menyediakan Toolbar untuk membuat kolom-kolom tabel. Sebenarnya membuat tabel pada postingan blog sangatlah mudah. Syams sendiri banyak mempraktikkannya di blog ini.
Bahkan kalau sudah paham akan lebih asyik dilakukan dibanding membuat tabel di MS Word. Karena tabel pada postingan web bisa didesain sedemikian rupa dengan gaya menawan dan atribut yang bermacam-macam. Untuk membuat tabel pada website cukup dibutuhkan sedikit pemahaman HTML dan CSS.
Bagi yang masih awam dengan 2 istilah tersebut boleh baca artikel belajar dasar HTML dan CSS.
Seperti yang Agan tahu, struktur web diatur oleh kode HTML dan CSS, begitu juga dengan desain tabel. Jadi cara buat tabel cukup memahami fungsi beberapa kode saja. Untuk lebih jelasnya langsung simak saja pada bagian pembahasan.
Struktur Dasar Tabel HTML
Kode atau syntax HTML untuk membuat tabel adalah <table>...</table>. Seperti yang diketahui tabel memiliki 2 bagian di dalamnya, yakni baris dan kolom. Baris dieksekusi menggunakan kode <tr>...</tr>, dan kolom memakai kode <td>...</td>. Jika element tersebut disatukan untuk membentuk struktur tabel yang utuh, maka hasilnya menjadi seperti berikut.
| Tabel 2 Baris 3 Kolom | |||||||
|---|---|---|---|---|---|---|---|
<table> <tr> <td>kolom 1</td> <td>kolom 2</td> <td>kolom 3</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> |
|
||||||
| Tabel 3 Baris 2 Kolom | |||||||
|---|---|---|---|---|---|---|---|
<table> <tr> <td>baris 1</td> <td></td> </tr> <tr> <td>baris 2</td> <td></td> </tr> <tr> <td>baris 3</td> <td></td> </tr> </table> |
|
||||||
Dari gambaran diatas rasanya sudah cukup jelas bagaimana memahami struktur HTML pada tabel dengan fungsi baris dan kolom. Selain itu, khusus untuk kolom, ada element lain yang bisa dipakai untuk menggantikan <td>, yaitu <th>. Element <th> ini fungsinya sama untuk menghasilkan kolom, tapi umumnya dipakai pada bagian header atau atas tabel.
<table> <tr> <th>judul 1</th> <th>judul 2</th> <th>judul 3</th> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
Jadi <th> cocok dipakai dengan tabel yang memiliki topik atau judul untuk tiap kategori. Hal ini biar membedakannya dengan data pada kolom lainnya yang memakai <td>. Tapi pada dasarnya fungsinya kurang lebih sama.
Gaya Dasar CSS Pada Tabel
Setelah memahami struktur dasar HTML untuk mengaplikasikan sebuah tabel, sekarang sudah saatnya melakukan praktik langsung dalam pembuatan tabel disertai beberapa desain dasar menggunakan CSS. Cara terbaik untuk memulainya adalah dengan memakai HTML bawaan PC.
Kalau Agan sudah pernah membaca artikel Syams tentang belajar HTML dan CSS pasti tahu apa yang dimaksud, yakni dengan memakai notepad yang lantas ditransformasikan menjadi halaman web. Untuk itu silahkan Agan copy paste kode di bawah ini ke dalam notepad dan simpan dengan nama tabel.html.
<html> <head> </head> <body> <table> <tr> <th>Tutorial</th> <th>eBook</th> <th>Review</th> </tr> <tr> <td>Blogging</td> <td>Novel</td> <td>Aplikasi</td> </tr> <tr> <td>Windows 10</td> <td>Memoar</td> <td>Android</td> </tr> <tr> <td>Desain</td> <td>Pendidikan</td> <td>Buku</td> </tr> </table> </body> </html>
Kemudian tambahkan kode CSS berikut di antara <head>...</head>.
<style>
table {table-layout:fixed;background:lightblue;width:100%;border:1px solid black}
th,td {height:10px;padding:5px;border:1px solid red}
th {background:black;color:white}
</style>
Simpan dan lihat hasilnya. Kurang lebih seperti ini bukan?
| Tutorial | eBook | Review |
|---|---|---|
| Blogging | Novel | Aplikasi |
| Windows 10 | Memoar | Android |
| Desain | Pendidikan | Buku |
Dari kode CSS diatas Agan bisa memahami sendiri logika atau fungsi yang diterapkan pada setiap elemen dalam tabel, dari segi warna maupun ukuran. Di luar dari gaya yang diaplikasikan tersebut, default tabel kurang lebih tidak memiliki border dan tulisan pada kolom <th> otomatis cetak tebal dan rata tengah, berbeda dengan teks yang terdapat pada kolom <td>.
Juga pada mode default border tiap tabel memiliki baris kosong pemisah satu sama lain. Hal ini bisa dihapuskan dengan menambah border-spacing:0 pada desain element table. Nanti hasilnya akan seperti ini.
| Tutorial | eBook | Review |
|---|---|---|
| Blogging | Novel | Aplikasi |
| Windows 10 | Memoar | Android |
| Desain | Pendidikan | Buku |
Gaya lainnya yang bisa diberikan seperti border-collapse:collapse untuk menyatukan tiap border, border-radius untuk menumpulkan tiap sudut tabel, dan lain sebagainya. Silahkan bereksperimen sendiri dengan berbabai logika CSS yang sudah tersedia.
Desain Menawan CSS Untuk Tabel Interaktif
Seperti yang dijanjikan, melalui CSS sebuah tabel dapat didesain sedemikian rupa. Ada banyak trik yang bisa dilakukan untuk menghasilkan tabel dengan gaya spektakuler dan menawan, cocok untuk membuat pengunjung terpesona oleh konten. Web/Blog merupakan wadah berbagi interaktif, maka dari itu desain merupakan langkah wajib demi membuat pembaca semakin tertarik.
Akatsuki Cloud
| Tutorial | eBook | Review |
|---|---|---|
| Blogging | Novel | Aplikasi |
| Windows 10 | Memoar | Android |
| Desain | Pendidikan | Buku |
table {table-layout:fixed;width:100%}
th,td {height:10px;padding:5px;border:1px solid grey;border-radius:8px}
th {background:black;color:red}
td:hover{background:black;color:white;font-weight:bold}
Cukup sampai disini dulu pembahasan kita dalam membuat tabel keren pada artikel web. Jika ada yang masih kurang dipahami mungkin karena Agan membacanya terlalu cepat, baca saja dulu pelan-pelan. Pokoknya diresapinya ilmunya dengan dalam. Hehe..
Artikel ini diharapkan dapat memudahkan siapa saja yang saat ini tengah membutuhkan tutorial atau trik pembuatan tabel dengan desain tambahan yang keren dan simpel untuk diikuti. Jika ada gaya yang baru maka nanti akan diupdate lain waktu.
Tabel dalam berbagai jenis konten media online merupakan salah satu elemen penting untuk menyampaikan informasi kepada pembaca agar data lebih terstruktur dan organisir. Bagi yang memulai karir di dunia maya melalui publikasi artikel, maka sudah semestinya memahami tata cara pembuatan tabel disertai dengan penerapan gaya yang bisa dihasilkan.
Syalams Desainer!
2 Comments
terimakasih min,artikelnya sangat membantu dalam membuat tabel html,semangat terus buat artikenya min
ReplyDeleteperkenalkan nama saya Denni Ramli,jangan lupa juga kunjungi juga website kampus kami dihttps://www.atmaluhur.ac.id/
Menarik dan sangat membantu. Baru mau coba. Tks Bang.
ReplyDelete