Editor Gutenberg di WordPress memang memungkinkan Anda untuk membuat tabel. Meski mudah untuk dilakukan, kustomisasi tampilan dan warna tabelnya sangat terbatas.
Solusi dari masalah tersebut adalah membuat tabel sendiri dengan kode HTML. Di artikel ini, Anda akan belajar cara membuat tabel HTML di WordPress.
Komponen dalam Membuat Tabel
Sebelum mulai membuat tabel, Anda perlu mengenal komponen-komponen yang ada dalamnya terlebih dahulu. Setiap tabel memiliki empat bagian, yaitu:
Anda dapat melihat ilustrasi di bawah ini untuk mengetahui letak bagian-bagian tersebut.
Tag HTML untuk Membuat Tabel
Cara membuat tabel HTML tentu mengharuskan Anda untuk menggunakan tag. Nah, tag-tag HTML yang dibutuhkan adalah sebagai berikut:
- <table> — menandai sebuah tabel
- <thead> — menandai bagian head sebuah tabel
- <tbody> — menandai bagian body sebuah tabel
- <tr> — untuk menyisipkan baris
- <td> — untuk menyisipkan sel dalam sebuah baris
- <th> — mengisyaratkan sel header atau judul
Agar tidak bingung, mari memulai dengan contoh penggunaan tag <table>, <tr>, dan <td> dengan contoh berikut ini. Anda dapat menggunakan tool online seperti Tryit Editor W3Schools untuk mencoba kode-kode yang ada di artikel ini.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</body>
</html>Dengan kode tersebut, Anda sudah bisa membuat tabel HTML seperti berikut ini:
Perlu Anda perhatikan bahwa ketebalan bingkai kolom dapat Anda tentukan dengan mengubah value dari border. Jika value-nya dinaikkan dari 1 menjadi 5, hasilnya seperti di bawah ini:
Nah, dengan pengetahuan dasar ini, Anda sudah siap untuk mempelajari cara membuat tabel HTML. Yuk, simak langkah-langkahnya di bagian selanjutnya!
Baca Juga: 19 Editor HTML Terbaik yang Bisa Anda Coba
Cara Membuat Tabel HTML
Membuat tabel HTML tidak serumit yang Anda bayangkan. Setelah tadi Anda belajar membuat tabel, baris, dan kolom, di bagian ini ada beberapa trik untuk mengkustomisasinya:
- Mengatur jarak antara tulisan dengan border
- Memberi warna pada sel dan baris
- Merging (menggabungkan) sel
- Menyisipkan gambar ke sel
Mengatur Jarak antara Tulisan dengan Border
Pada contoh pertama tadi, mungkin Anda menyadari bahwa ruang yang ada di masing-masing sel sangat sempit. Hampir tidak ada jarak antara tulisan dengan border.
Agar dapat menentukan jarak ini, Anda harus menggunakan atribut cellpadding. Letaknya di dalam tag pembuka <table> seperti border tadi.
<table border="1" cellpadding="5">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>Di contoh kali ini, kami memasukkan value 5 untuk cellpadding-nya. Namun, Anda boleh menentukan angka lainnya. Hasilnya seperti di bawah ini:
Lalu, bagaimana jika Anda ingin membuat tabel lebih berwarna? Simak caranya di bagian berikutnya!
Memberi Warna pada Sel dan Baris
Apabila ingin lebih kreatif dengan penampilan tabel, Anda dapat memberikan warna pada sel-sel yang ditentukan.
Caranya menggunakan atribut bgcolor. Atribut ini dapat diletakkan di dalam tag pembuka <tr> atau <td>.
Jika diletakkan di dalam tag <tr>, warna yang ditentukan akan diaplikasikan ke semua sel dalam satu baris. Sebaliknya, atribut bgcolor di dalam tag <td> hanya akan mempengaruhi satu sel. Agar lebih paham, perhatikan contoh di bawah ini.
<table border="1" cellpadding="5">
<tr bgcolor="yellow">
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td bgcolor="red">Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>Dan demikian hasilnya:
Perlu Anda ingat bahwa value atribut bgcolor hanya dapat berupa nama warna dalam bahasa Inggris atau heksadesimal, seperti #00ff80.
Merging (Menggabungkan) Sel
Jika sudah biasa menggunakan aplikasi seperti Microsoft Office Word, kemungkinan Anda sering melakukan merging atau menggabungkan dua sel atau lebih.
Dalam format HTML pun, Anda dapat melakukannya. Caranya menggunakan kedua atribut berikut ini:
- Rowspan — digunakan untuk menggabungkan dua atau lebih sel dalam satu baris.
- Colspan — berfungsi untuk menggabungkan dua atau lebih sel dalam satu kolom.
Berbeda dengan bgcolor dan cellpadding, kedua atribut ini hanya diletakkan dalam tag pembuka <th>. Perhatikan contoh kode di bawah ini untuk lebih jelasnya.
<table border="1" cellpadding="5">
<tr>
<th rowspan="2" bgcolor="yellow">Bulan</th>
<th colspan="2" bgcolor="red">Pendapatan</th>
</tr>
<tr>
<th>Agen A</th>
<th>Agen B</th>
</tr>
<tr>
<td>Bulan 1</td>
<td>1000</td>
<td>2000</td>
</tr>
<tr>
<td>Bulan 2</td>
<td>2000</td>
<td>4000</td>
</tr>
</table>Di bawah ini adalah hasil dari kode tersebut:
Pada contoh di atas, rowspan dan colspan digunakan untuk menggabungkan sel header Bulan dan Pendapatan. Kedua sel header ini dibuat dengan menggunakan tag <th> yang otomatis membuat tulisannya cetak tebal.
Nah, rowspan dan colspan diletakkan dalam tag ini. Kemudian, Anda dapat menentukan berapa sel yang digabungkan dengan mengetikkan value-nya. Pada contoh di atas, value-nya 2.
Baca Juga: 10 Coding HTML Dasar yang Blogger Wajib Tahu
Menyisipkan Gambar ke Sel
Tabel memang tidak selalu memiliki elemen visual di dalamnya. Namun, jika ingin menyisipkan gambar ke dalamnya, Anda dapat melakukannya di tabel HTML.
Syaratnya, gambar yang ingin digunakan di tabel sudah diunggah ke Media Library WordPress. Untuk melakukan ini, login ke Dashboard WordPress dan klik Media > Add New.
Kemudian, Anda cukup tarik file gambar yang ingin diunggah ke bidang yang memiliki teks Drop files to upload. Atau, Anda juga bisa klik Select Files. Cara kedua ini akan membuka file explorer, di mana Anda dapat memilih file gambar yang diinginkan.
Setelah gambar diunggah, klik Media > Library untuk menampilkan daftar gambar yang ada di WordPress Anda. Arahkan kursor ke gambar yang ingin Anda masukkan ke tabel, lalu klik Edit.
Di halaman edit gambar, Anda akan menemukan URL dari gambar tersebut. Salinlah tautan ini agar dapat disisipkan di kode untuk memasukkan gambar ke tabel.
Nah, sekarang mari memasukkan gambar tadi ke tabel HTML. Agar lebih relevan, contoh kali ini adalah tabel daftar produk. Kodenya seperti berikut ini:
<table border="1">
<tr>
<th colspan="3" bgcolor="yellow">Daftar Produk</th>
</tr>
<tr>
<td rowspan="4">
<img src="https://tutorialtest.online/wp-content/uploads/2020/06/home-office-336378_1280.jpg" width="200" />
</td>
</tr>
<tr>
<td>Nama</td>
<td>Laptop</td>
</tr>
<tr>
<td>Harga</td>
<td>Rp10.000.000</td>
</tr>
<tr>
<td>Fitur</td>
<td>
<ul>
<li>Hard drive SSD 256GB</li>
<li>RAM 8GB</li>
<li>Layar OLED 14,5 inci</li>
<li>Baterai 7.000 mAh</li>
</ul>
</td>
</tr>
</table>Dengan kode tersebut, Anda akan menghasilkan tabel seperti berikut ini di WordPress.
Nah, URL yang sudah Anda salin tadi harus dimasukkan ke dalam tag <img> seperti yang ditunjukkan pada contoh di atas. Di sampingnya, Anda juga harus menentukan ukuran gambar dengan atribut width.
Baca Juga: Cara Memasukkan dan Mengatur Gambar di HTML
Siap Membuat Tabel HTML?
Membuat tabel HTML tidaklah susah. Pertama, Anda perlu mengenali tag-tag yang digunakan untuk membuat tabel, seperti <table>, <tr>, dan <td>.
Jika sudah paham dengan penggunaan tag, Anda juga dapat mengkustomisasi tabel dengan atribut. Misalnya bgcolor untuk memberikan warna di sel tertentu.
Di samping itu, Anda juga dapat menggabungkan dua atau lebih sel dengan rowspan atau colspan.
Bagaimana, mudah bukan? Jika Anda memiliki pertanyaan seputar membuat tabel HTML, silakan tinggalkan komentar pada kolom yang tersedia di bawah artikel ini.
