Membuat Table Sederhana HTML

    Tabel HTML adalah elemen HTML yang digunakan untuk mengorganisir data tabular dalam bentuk baris dan kolom. Struktur dasar dari sebuah tabel HTML melibatkan beberapa elemen utama.

    elemen – elemen pada tag table :

    <table> = tag untuk membuat table yang berisikan elemen – elemen lain yang akan diletakkan didalam
    di tag ini.

    <tr> = tag untuk membuat garis di dalam tag table.

    <td> = tag untuk membuat sel data didalam tag table.

    <th> = tag untuk membuat sel header didalam tag table, biasanya sel header ini di gunakan untuk
    membuat judul pada bagian kolom atau baris. Secara otomatis akan menebalkan dan
    meratakan taks nya ke tengah.

    colspan = Digunakan untuk menggabungkan beberapa kolom dalam satu sel,ini berguna ketika anda
    ingin membuat sel yang mencakup lebih dari satu kolom.

    Berikut adalah source code contoh membuat table sederhana HTML :

    rowspan = Digunakan untuk menggabungkan beberapa baris dalam satu sel, ini berguna ketika anda
    ingin membuat sel yang mecakup lebih dari satu baris.

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>Helooo</title>
    
    </head>
    
    <body>
    
        <h2>Table Mahasiswa</h2>
    
        <table border="1" cellSpacing="0" cellPedding="5">
    
            <tr>
    
                <th>No</th>
    
                <th>Nama Mahasiswa</th>
    
                <th>NIM</th>
    
                <th>Alamat</th>
    
                <th>Jenis Kelamin</th>
    
            </tr>
    
            <tr>
    
                <td>1</td>
    
                <td>M. Faisal</th>
    
                <td>191011400061</td>
    
                <td>Jalan Gunung</td>
    
                <td>Laki - laki</td>
    
            </tr>
    
            <tr>
    
                <td>2</td>
    
                <td>Ernawati</th>
    
                <td>74839291</td>
    
                <td>Jalan mana</td>
    
                <td>Laki - laki</td>
    
            </tr>
    
            <tr>
    
                <td>3</td>
    
                <td>Pepi</th>
    
                <td>844939002999</td>
    
                <td>Jalan ada</td>
    
                <td>Laki - laki</td>
    
            </tr>
    
            <tr>
    
                <td>4</td>
    
                <td>Asep</th>
    
                <td>84838329</td>
    
                <td>Jalan Kenanga</td>
    
                <td>Laki - laki</td>
    
            </tr>
    
        </table>
    
        <h2>Table Angka</h2>
    
        <table border="1" cellSpacing="0" cellPedding="5">
    
            <tr>
    
                <td>1,1</td>
    
                <td colspan="2" rowspan="2" style="justify-items: center; color: red;">1 & 2</th>
    
                <!-- <td>1,3</td> -->
    
                <td>1,4</td>
    
            </tr>
    
            <tr>
    
                <td >2,1</td>
    
                <!-- <td>2,2</th>
    
                <td>2,3</td> -->
    
                <td>2,4</td>
    
            </tr>
    
            <tr>
    
                <td>3,1</td>
    
                <td>3,2</th>
    
                <td>3,3</td>
    
                <td>3,4</td>
    
            </tr>
    
            <tr>
    
                <td>4,1</td>
    
                <td>4,2</th>
    
                <td>4,3</td>
    
                <td>4,4</td>
    
            </tr>
    
        </table>
    
    </body>
    
    </html>

    Berikut adalah hasil dari source code di atas :

    Subscribe

    Related articles

    Membuat Design Form Login & Register Hi-Fi (Hight-Fidelity)

      Langkah - langkah membuat Hight-Fidelity pada UI “Login” seperti...

    Mengenal Fitur Pada Figma

    Figma memiliki fungsi yang berbeda dengan aplikasi desain grafis...

    4 Karateristik Utama Yang Baik Pada UX

    Apa yang membuat suatu produk efektif bagi penggunanya? Jawabannya berbeda-beda...

    Mengenal UI/UX Dan Perbedaannya

    Ap aitu UI/UX? UI (User Interface) dan UX (User Experience)...

    Mengenal Display Properti Pada CSS

    Display property dalam CSS adalah untuk mengontrol tipe tata...

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here