Cara Membuat Tabel di HTML

- Kita akan membahas bagagaimana Membuat Tabel di HTML.

Tabel merupakan salah satu cara menyajikan data atau informasi yang sangat efektif digunakan.

Jika Anda memiliki suatu data yang memiliki nilai yang banyak, gunakanlah tabel dalam menyajikannya karena akan lebih menghemat ruang dan mudah dipahami oleh pembaca.

Kecuali mungkin yang belum pernah belajar tentang tabel sehingga tidak bisa membaca tabel.

Jika Anda tahu cara membuat tabel di MS. Word, akan lebih mudah bagi Anda mempelajari panduan Membuat Tabel pada HTML berikut ini.

Panduan Membuat Tabel di HTML

Kita bisa membuat tabel dengan beberapa tag yang sudah disediakan di HTML.

Tag <table> untuk membungkus tabelnya.
Tag <thead> untuk membungkus bagian kepala tabel.
Tag <tbody> untuk membungkus bagian body dari tabel.
Tag <tr> (tabel row) untuk membuat baris.
Tag <td> (table data) untuk membuat sel.
Tag <th> (table head) untuk membuat judul pada header.

Tag yang harus diingat adalah tag <table>, <tr>, dan <td>, sedangkan tag yang lain adalah tambahan (opsional).

#1 Memulai Membuat Tabel

Untuk memulai membuat tabel kita menggunakan tag <table> berikut ini.

<table>
<!-- BUAT DI SINI BARIS DAN KOLOMNYA-->
</tabel>

#2 Membuat Baris dan Kolom

Misalnya kita ingin membuat 1 baris dan 1 kolom, tag <tr> untuk membuat baris sedangkan tag <td> untuk membuat kolom. Perhatikan kode berikut ini.

<table>
<tr>
    <td>Baris 1 kolom 1</td>
</tr>
</table>

Jika ingin membuat dua baris dan dua kolom, cukup tambahkan saja baris dan kolomnya sesuai keinginan.

<table>
<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>

Hasilnya:

Baris 1 kolom 1	Baris 1 kolom 2
Baris 2 kolom 1	Baris 2 kolom 2

#3 Membuat Garis pada Tabel Terlihat

Pada langkah kedua, tidak nampak garisnya bukan?

Iya, karena kita perlu menambahkan atribut border pada tag table.

Jika kita memberikan atribut border dengan nilai 0, maka sama saja tidak ada garisnya, sehingga mulailah dengan memberi nilai border dengan 1.

<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>

Hasilnya:

Baris 1 kolom 1	Baris 1 kolom 2
Baris 2 kolom 1	Baris 2 kolom 2

#4 Mengatur Jarak Teks dengan Garis

Agar teks di dalam sel tabel tidak mepet dengan garis, kita dapat mengaturnya dengan menambahkan atribut cellpadding pada tag <table>.

Contoh:

<table border="1" cellpadding="10">
        <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>

Hasilnya:

Baris 1 kolom 1	baris 1 kolom 2
Baris 2 kolom 1	baris 2 kolom 2

#5 Menambahkan Warna pada Sel dan Baris

Kita dapat memberikan warna pada sebuah sel (kotak-kotak pada tabel) dan baris dengan menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).

Contoh:

<table border="1" cellpadding="10">
        <tr>
            <td bgcolor="#f1f1f1">Baris 1 kolom 1</td>
            <td>baris 1 kolom 2</td>
        </tr>
        <tr bgcolor="yellow">
            <td>Baris 2 kolom 1</td>
            <td>baris 2 kolom 2</td>
        </tr>
    </table>

Hasilnya:

Baris 1 kolom 1	baris 1 kolom 2
Baris 2 kolom 1	baris 2 kolom 2

#6 Memberi Judul Baris dan Kolom pada Tabel

Untuk memberi judul baris dan kolom pada tabel, kita harus melakukan dua hal berikut ini.

Menggabungkan beberapa sel menjadi satu sebagai tempat untuk judul baris dan kolomnya.
Menggunakan tag <th> untuk menuliskan judul baris atau kolomnya.

Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan (untuk menggabungkan baris) dan colspan (untuk menggabungkan kolom). Atribut tersebut diberikan kepada tag <td> atau <th>.

Contoh:

<table border="1">
        <tr>
            <th rowspan="2" bgcolor="yellow">Bulan</th>
            <th colspan="2" bgcolor="#00ff80">Hasil Panen</th>
        </tr>
        <tr>
            <th>Padi</th>
            <th>Kacang</th>
        </tr>
        <tr>
            <td>Januari</td>
            <td>500 Kg</td>
            <td>231 Kg</td>
        </tr>
        <tr>
            <td>Februari</td>
            <td>342 Kg</td>
            <td>423 Kg</td>
        </tr>
        <tr>
            <td>Maret</td>
            <td>432 Kg</td>
            <td>124 Kg</td>
        </tr>
        <tr>
            <td>April</td>
            <td>453 Kg</td>
            <td>523 Kg</td>
        </tr>
    </table>

Hasilnya:

Bulan	Hasil Panen
Bulan	Padi	Kacang
Januari	500 Kg	231 Kg
Februari	342 Kg	423 Kg
Maret	432 Kg	124 Kg
April	453 Kg	523 Kg

#7 Menyisipkan Elemen yang Lain ke dalam Sel

Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang lain, seperti gambar, link, video, list, dsb.

Contoh:

<table cellpadding="2" border="1">
        <tr>
            <th colspan="3" bgcolor="yellow">Buku Best Seller</th>
        </tr>
        <tr>
            <td rowspan="4">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvBK1OJeJPopSNjVJX2BKAOpED0geHTJ9VMkFOdQPIBo7dgFelCa7d0vQ3hMnrU-pIC4I79aalFhhvJi1kZle4t4MdRckgo4ANTkCP1DK9lUR5WkUE48svThuwVhLtWRHyURnWsDYfbkbbFrYx3khvZG56Fm15vLfo9zVPYIyyvHDU0o_bY2gvJLq4Q/s800/BUKU%20SAKTI%20PEMROGRAMAN%20WEB%20HTML,%20CSS,%20PHP,%20MySQL%20&%20Javascript.webp" width="150px">
            </td>
        </tr>
        <tr>
            <th>Judul</th>
            <td>Buku Sakti Pemrograman Web</td>
        </tr>
        <tr>
            <th>Penulis</th>
            <td>Didik Setiawan</td>
        </tr>
        <tr>
            <th>Harga</th>
            <td>Rp 60.000</td>
        </tr>
        <tr>
            <th colspan="3">Detail</th>
        </tr>
        <tr>
             <td colspan="3">
                <ul>
                    <li>Ukuran 14 x 20 cm</li>
                    <li>Tebal 216 Hal.</li>
                    <li>Softcover</li>
                    <li>Book Paper.</li>
                </ul>
            </td>
        </tr>
</table>