Cara Membuat Tabel Menggunakan HTML

Dutormasi.com – Halo sahabat dutormasi!!. Kembali lagi ni di postingan HTML. Pastinya gak bosan ya. kali ini kita akan membahas bagian yang menarik yaitu bagaimana cara membuat table sekaligus merapikan form yang kita buat kemarin. Yuk langsung aja kita bahas.

Tabel

Tabel adalah data yang berisi informasi yang terdiri dari kolom , baris, dan sel. Dengan html kita menggunakan tag <table> untuk mendeklarasikan table yang kita buat. Ada beberapa tag untuk membuat tabel di HTML:

<table> untuk mendeklarasikan tabelnya

<thead> untuk kepala dari tabel

<tbody> untuk body dari table

<th> untuk membuat judul kolom

<tr> untuk membuat baris

<td> untuk membuat sel

Oke langsung aja yuk kita praktekkan

1. Langsung buka saja code editor kita dan buka project di postingan kita sebelumnya. Disini saya menggunnakan Visual Studio Code.

2. Setelah itu kita tambahkan satu image lagi.(cara menambahkan image).

3. Lalu setelah itu kita tambahkan tag <table> dibawah form yang sudah kita buat dan berikan border sebesar 1

<table border="1">

</table>

4. Lalu table diatas kita dapat memindahkannya ke atas tag form kita.

5. Lalu ikuti sintax dibawah ini

<table border="1">
        <form method="POST">
        <tr>
            <th colspan="3">Form Pendaftaran</th>
        </tr>
        <tr>
            <td rowspan="6">
                <img src="./img/Asset 2.png" width="300px" />
            </td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Pass</td>
            <td><input type="password" ></td>
        </tr>
        <tr>
            <td>Asal</td>
            <td>
                <Select>
                    <option value="indonesia">Indonesia</option>
                    <option value="Luar Negeri">Luar Negeri</option>
                </Select>
            </td>
        </tr>
        <tr>
            <td>Jenis Kelamin</td>
            <td>
                <input type="radio" name="gender" value="Pria">Laki-Laki
                <input type="radio" name="gender" value="Wanita">Wanita
            </td>
        </tr>
        <tr>
            <td>Alamat</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td colspan="3" align="center"><input type="submit" value="Login"></td>
        </tr>
    </form>
    </table>

6. Jangan lupa seandainya kalau kalian copas code diatas, hapus form yang telah kita buat di postingan sebelumnya. Maka hasilnya akan menjadi seperti ini.

7. Jika ingin lebih rapi lagi kita hapus saja border yang kita buat diawal dan lihat hasilnya hehe. Guna border adalah mengetahui bentuk table yang kita buat.

Hayo ada banyak yang berubah kan? Dilihat dari sana ada banyak sekali elemen baru dan beberapa tag seperti <br> telah dihapus. Tapi gak masalah kita akan berikan keterangannya satu satu.

Keterangan :

colspan    = menggabungkan kolom

rowspan  = menggabungkan baris

width       = menagtur ukuran panjang

align         = menentukan letak dari suatu gambar/tulisan

border      = garis pembatas tabel

Oke sekian ya postingan kali ini. Untuk belajar tabel ini sebenarnya susah susah gampang, teteapi kalau sudah paham pasti menyenangkan. Caranya yaitu harus banyak belajar dan selalu kembangkan diri teman teman. Semoga postingan ini bermanfaat. Salam Dutormasi.