#5 Belajar Membuat Tabel Pada HTML

Andre Rip 06 May 2021

#5 Belajar Membuat Tabel Pada HTML

Belajar Membuat Tabel Pada HTML - Cara membuat tabel mengunakan HTML sangatlah mudah kamu hanya perlu mengunakan Tag yang sudah di sediakan dari HTML tersebut.

Apa Sih Kegunaanya?

Kamu pernah mengunakan microsoft exel di windows? Ya kira-kira tabel pada HTML hampir sama seperti yang ada pada microsoft exel tersebut yang di mana kita dapat memasukan list data secara terstruktur dan rapih yang di keolalah melalui web browser.

Manfaat nya juga banyak, kita dapat mengonlinkan website kita yang dimana nanti orang lain juga dapat mengakses dan melihat web yang berisi tabel tersebut.

Atau juga jika ingin mencatat sebuah pengeluaran dan pemasukan bisa mengunakan tabel pada HTML ini.

Cara Pengunaan Tabel Pada HTML

Ada beberapa tag yang harus di ingat untuk membuat tabel pada HTML:

1. Tag <table> - untuk membungkus tabelnya

2. Tag <thead> - untuk membungkus bagian kepala tabel

3. Tag <tbody> - untuk membungkus bagian body dari tabel

4. Tag <tr> - untuk membuat baris

5. Tag <td> - untuk membuat sel

6. Tag <th> - untuk membuat judul pada header

Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Membuat Tabel Pada HTML</title>
</head>
<body>

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

</body>
</html>

Hasilnya:

Tapi kok garis nya tidak muncul?

Karena kita tidak menambahkan atribut border pada tabelnya maka harus di tambahkan terlebih dahulu.

Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di dalam tag .

Sehingga akan menjadi seperti ini:

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

Nilai “1” pada atribut border adalah ukuran garisnya. Semakin besar ukurannya, maka akan semakin besar pula ukuran garisnya.

Nilai “1” adalah ukuran garis yang paling kecil. Jika ingin menmabahkan nilai lebih dari “1” bisa saja karena tidak ada batasanya.

Hasilnya:

Mengatur Jarak Sel dengan Cellpadding

Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.

Atribut ini dapat kita berikan kepada 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:

Terlihat lebih rapih ya.

Menambahkan Warna pada Sel dan Baris

Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).

Contoh:

  <table border="1" cellpadding="10">
        <tr>
            <td bgcolor="blue">Baris 1 kolom 1</td>
            <td>baris 1 kolom 2</td>
        </tr>
        <tr bgcolor="#00ff80">
            <td>Baris 2 kolom 1</td>
            <td>baris 2 kolom 2</td>
        </tr>
    </table>

Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal #07f5d5 atau nama warna dalam bahasa inggris blue.

Hasilnya:

Menggabungkan Sel Tabel

Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:

rowspan untuk menggbungkan baris; colspan untuk mebggabungkan kolom.
colspan untuk mebggabungkan kolom.

rowspan untuk menggbungkan baris; colspan untuk mebggabungkan kolom. Atribut ini bisa kita berikan kepada tag <td> atau <th>.

Contohnya:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Membuat Tabel Pada HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th rowspan="2" bgcolor="blue">Hari</th>
            <th colspan="2" bgcolor="#07f5d5">Pembelajaran Webdeveloper </th>
        </tr>
        <tr>
            <th>Front-end</th>
            <th>Back-end</th>
        </tr>
        <tr>
            <td>Senin</td>
            <td>Html</td>
            <td>PHP</td>
        </tr>
        <tr>
            <td>Selasa</td>
            <td>CSS</td>
            <td>MySQL</td>
        </tr>
        <tr>
            <td>Rabu</td>
            <td>Javascript</td>
            <td>Codenighter</td>
        </tr>
        <tr>
            <td>Kamis</td>
            <td>Bootstrap</td>
            <td>Laravel</td>
        </tr>
    </table>

</body>
</html>

Hasilnya:

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:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Membuat Tabel Pada HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="3" bgcolor="#07f5d5">Komputer Store</th>
        </tr>
        <tr>
            <td rowspan="4">
                <img src="gambar-komputer.png" width="200" />
            </td>
        </tr>
        <tr>
            <td>Nama</td>
            <td>PC Gaming</td>
        </tr>
        <tr>
            <td>Harga</td>
            <td>Rp 8.240.000</td>
        </tr>
        <tr>
            <td>Spektifikasi</td>
            <td>
                <ul>
                    <li>Intel Core I5</li>
                    <li>SSD 1TB</li>
                    <li>RAM 8GB DDR4</li>
                    <li>Garansi 2tahun</li>
                </ul>
            </td>
        </tr>
    </table>

</body>
</html>

Hasilnya:

Terus di coba-coba lagi hinga mahir dan selamat belajar…

🚀 Komentar

🔥 Artikel Terbaru