Jelaskan apa itu tabel pada HTML?

Question

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.

Table of Contents Show

Komponen dalam Membuat Tabel
Tag HTML untuk Membuat Tabel
Cara Membuat Tabel di HTML
Mengatur Jarak antara Tulisan dengan Border
Memberi Warna pada Sel dan Baris
Merging (Menggabungkan) Sel
Menyisipkan Gambar ke Sel
Siap Membuat Tabel HTML?
Subscribe Sekarang
Apa fungsi table pada HTML?
Apa yang dimaksud dengan cellpadding?
Apa yang dimaksud the body of the table?
Bagaimana struktur tabel dalam HTML?

Home » Web Development & Design » Website & Blog » Cara Membuat Tabel HTML di WordPress dengan Mudah

Cara Membuat Tabel HTML di WordPress dengan Mudah

September 16, 2020 5 min read

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.

Daftar isi

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.

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 di 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. Atau, Anda juga bisa membaca artikel -> Belajar HTML: Panduan Lengkap untuk Pemula.

Share

Aldwin Nayoan Follow 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.

Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!

Apa fungsi table pada HTML?

Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk membuat tabel menggunakan tag <table>. Biasanya tag <table> digunakan untuk menampilkan data yang struktur atau tampilan data dari database.

Apa yang dimaksud dengan cellpadding?

Jawaban. Jawaban: Atribut cellpadding digunakan untuk menentukan jarak spasi di dalam sel yakni diantara dinding sel dan isi sel.

Apa yang dimaksud the body of the table?

Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel.

Bagaimana struktur tabel dalam HTML?

Struktur dasar membuat tabel pada HTML adalah tag <table>, <tr> dan <td>. Artinya, hanya dengan 3 tag tersebut kita sudah bisa menampilkan tabel pada web browser.