Aldwin Nayoan Aldwin is a content writer at Niagahoster. Specializing in web hosting and WordPress, he is eager to help people uplevel their business on the internet. Apart from being a tech junkie, Aldwin likes fiction and photography.

Cara Membuat Tabel HTML di WordPress

4 min read

Featured image tabel HTML

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:

  • Sel
  • Baris
  • Kolom
  • Border

Anda dapat melihat ilustrasi di bawah ini untuk mengetahui letak bagian-bagian tersebut.

Komponen-komponen tabel

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:

Contoh  tabel HTML

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:

Contoh tabel HTML dengan border tebal

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:

Contoh tabel HTML dengan cellpadding

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:

Contoh tabel HTML dengan warna

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:

Contoh merging sel dalam tabel HTML

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.

Halaman upload gambar di Media Library WordPress

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.

Daftar gambar di Media Library WordPress

Di halaman edit gambar, Anda akan menemukan URL dari gambar tersebut. Salinlah tautan ini agar dapat disisipkan di kode untuk memasukkan gambar ke tabel.

URL gambar di Media Library WordPress

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.

0
Aldwin Nayoan Aldwin is a content writer at Niagahoster. Specializing in web hosting and WordPress, he is eager to help people uplevel their business on the internet. Apart from being a tech junkie, Aldwin likes fiction and photography.
[{"code":""
[{"code":""
"label":"Coba Lagi"
"label":"Coba Lagi"
"win":false}
"win":false}
{"code":"HOSTING50"
{"code":"HOSTING50"
"label":"Extra Diskon 50rb "
"label":"Extra Diskon 50rb "
"win":true}
"win":true}
{"code":"HOSTING20"
{"code":"HOSTING20"
"label":"Extra Diskon 20rb "
"label":"Extra Diskon 20rb "
"win":true}
"win":true}
{"code":"HOSTING100"
{"code":"HOSTING100"
"label":"Extra Diskon 100rb "
"label":"Extra Diskon 100rb "
"win":true}
"win":true}
{"code":""
{"code":""
"label":"Belum Beruntung"
"label":"Belum Beruntung"
"win":false}
"win":false}
{"code":"HOSTING20"
{"code":"HOSTING20"
"label":"Extra Diskon 20rb "
"label":"Extra Diskon 20rb "
"win":true}
"win":true}
{"code":""
{"code":""
"label":"Coba Lagi"
"label":"Coba Lagi"
"win":false}
"win":false}
{"code":"HOSTING50"
{"code":"HOSTING50"
"label":"Extra Diskon 50rb "
"label":"Extra Diskon 50rb "
"win":true}
"win":true}
{"code":"HOSTING20"
{"code":"HOSTING20"
"label":"Extra Diskon 20rb "
"label":"Extra Diskon 20rb "
"win":true}
"win":true}
{"code":"FREESHIPPING"
{"code":"FREESHIPPING"
"label":"Coba Lagi"
"label":"Coba Lagi"
"win":false}
"win":false}
{"code":""
{"code":""
"label":"Sedikit Lagi! "
"label":"Sedikit Lagi! "
"win":false}
"win":false}
{"code":"HOSTING50"
{"code":"HOSTING50"
"label":"Extra Diskon 50rb "
"label":"Extra Diskon 50rb "
"win":true}]
"win":true}]