Jumat, 08 Juni 2018

Cara Membuat Tabel dengan HTML

Selamat datang di Guan Kode. Pada kesempatan kali ini saya mau berbagi sedikit cara bagaimana membuat sebuah tabel menggunakan html. Seperti yang sudah kita tau, tabel adalah pertemuan antara baris dan kolom, tabel biasanya kita gunakan untuk membuat sebuah daftar agar lebih tersusun rapi. Dalam html sendiri tabel biasanya dibuka oleh kode <table> dan ditutup oleh kode </table>. Biar lebih gampang langsung simak kode di bawah ini.

<html>
    <head>
        <title>
            Membuat Tabel
        </title>
    </head>
    <body>
        <h1 align="center">Membuat Tabel dengan HTML</h1>
        <br>
        <table border="1px" align="center">
            <tr>
                <th>Kolom 1</th>
                <th>Kolom 2</th>
                <th colspan="2">Kolom 3</th>
            </tr>
            <tr>
                <td>Baris 1 Kolom 1</td>
                <td>Baris 1 Kolom 2</td>
                <td>Baris 1 Kolom 3a</td>
                <td>Baris 1 Kolom 3b</td>
            </tr>
            <tr>
                <td>Baris 2 Kolom 1</td>
                <td>Baris 2 Kolom 2</td>
                <td>Baris 2 Kolom 3a</td>
                <td>Baris 2 Kolom 3b</td>
            </tr>
            <tr>
                <td>Baris 3 Kolom 1</td>
                <td>Baris 3 Kolom 2</td>
                <td>Baris 3 Kolom 3a</td>
                <td>Baris 3 Kolom 3b</td>
            </tr>
        </table>
    </body>
</html>


Saya jelaskan dulu sedikit tentang kode di atas. Pada bagian <table border="1px" align="center"> , border="1px" digunakan untuk membuat ketebalan border tabel itu sendiri, semakin besar nilainya semakin tebal juga bordernya. Kode <th> digunakan untuk membuat kolom dan <td> digunakan untuk membuat baris. Untuk menggabungkan 2 kolom, kita menggunakan colspan seperti pada bagian <th colspan="2">Kolom 3</th> . Nah jika sudah faham dengan kodenya sekarang coba buka dengan browser dan tampilannya kirang lebih akan seperti gambar ini.


Sekian dulu untuk kali ini. Jika ada pertanyaan silahkan tulis pada kolom komentar. Semoga artikel ini bisa memberi manfaat bagi kita semua. Amiin.

Tidak ada komentar:

Posting Komentar

Berkomentarlah yang sopan, jika ada yang tidak berkenan mohon dimaafkan.