Tutorial

Coding Tabel di WordPress nan Mudah


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.

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
Baca juga:   5+ Plugin Wishlist WooCommerce Terbaik untuk Anda

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.

Baca juga:   Sekar Ningtyas, Author at Niagahoster Blog

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.

Baca juga:   Panduan Terbaru Cara Migrasi Wix ke WordPress (Paling Lengkap)

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.



Source link

Author

admin

Leave a comment

Your email address will not be published. Required fields are marked *

WeCreativez WhatsApp Support
Tim support kami di sini untuk menjawab pertanyaanmu. Tanyakan apa saja pada kami!
👋 Halo... ada yg bisa kami bantu?
%d bloggers like this: