Home Uncategories HTML : CARA MEMBUAT TABEL MUDAH

HTML : CARA MEMBUAT TABEL MUDAH

Cara Membuat Tabel Di HTML





Haloo selamat pagi, siang, sore, malam kapanpun kalian berada. Ketika membuat tabel pada HTML kita membutuhkan kolom serta baris yang berbeda agar dapat menampilkan tabel sesuai yang kita inginkan. Namun, bagaimana cara kita melakukan itu? Kita bisa menggunakan atribut colspan & rowspan.


Apa Itu Colspan & Rowspan?

Secara singkat, Colspan merupakan kependekan dari column span dan fungsinya adalah untuk menggabungkan beberapa kolom menjadi satu. Sedangkan atribut Rowspan digunakan untuk menggabungkan baris.


Cara Membuat Tabel pada HTML

Untuk membuat tabel pada HTML ada beberapa tag yang wajib digunakan, antara lain :
  • <table> – tag pertama yang wajib ditulis saat membuat tabel, berfungsi untuk membungkus tabel.
  • <thead> – berfungsi untuk membungkus kepala tabel.
  • <tbody> – berfungsi untuk membungkus tubuh tabel.
  • <tr> – berfungsi untuk membuat baris tabel, singkatan dari Table Row.
  • <th> – berfungsi untuk membuat judul pada header tabel, singkatan dari Table Header.
  • <td> – berfungsi untuk membuat sel tabel, singkatan dari Table Data.
selanjutnya kalian bisa mengikuti contoh codingan yang saya buat di vscode :


<!DOCTYPE html>
<html>
    <head>
        <title>Cara membuat tabel</title>
    </head>
    <body>
        <h1>Contoh penggunaan colspan & rowspan</h1>
    <table border="1">
        <tr>
            <td>Baris 1, Kolom 1</td>
            <td>Baris 1, Kolom 2</td>
            <td>Baris 1, Kolom 3</td>
        </tr>
        <tr>
            <td>Baris 2, Kolom 1</td>
            <td colspan="2" >Baris 2, Kolom 2 & 3</td>
        </tr>
        <tr>
            <td rowspan="2"> Baris 3 & 4, Kolom 1</td>
            <td> Baris 3, Kolom 2</td>
            <td> Baris 3, Kolom 3</td>
        </tr>
        <tr>
            <td> Baris 4, Kolom 2</td>
            <td> Baris 4, Kolom 3</td>
        </tr>
    </table>
    </body>
</html>



Dengan codingan tersebut akan menghasilkan tampilan tabel seperti ini.

Sekian dari saya cara mudah membuat tabel menggunakan HTML di vscode, semoga informasi ini bermanfaat untuk kalian, terima kasih😍

Share this:

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible

LATEST POSTS