-->

Belajar HTML #18 : Cara membuat Tabel di HTML

Konten [Tampil]

    Table atau tabel HTML adalah salah satu elemen HTML yang digunakan untuk menampilkan data dalam bentuk kolom dan baris. Tabel sangat berguna untuk menyajikan data secara terstruktur dan mudah dibaca oleh pengguna. Pada artikel ini, kita akan membahas cara membuat tabel di HTML.

    Tabel HTML

    Berikut ini adalah langkah-langkah cara membuat tabel di HTML:

    Menambahkan tag table 

    Untuk membuat tabel, kita perlu menambahkan tag table pada halaman HTML. Tag table ditempatkan di antara tag <body> dan </body>. Contoh penggunaan tag table dapat dilihat di bawah ini:

    
    <body> 
        <table> 
            <!-- Isi tabel --> 
        </table>
    </body>
    

    Menambahkan tag row 

    Setiap baris di tabel direpresentasikan oleh tag <tr>. Tag <tr> ditempatkan di antara tag <table> dan </table>. Contoh penggunaan tag <tr> dapat dilihat di bawah ini:

    
    <body> 
        <table> 
            <tr> 
                <!-- Isi baris -->
            </tr> 
        </table> 
    </body>
    

    Menambahkan tag cell 

    Setiap kolom dalam baris direpresentasikan oleh tag <td>. Tag <td> ditempatkan di antara tag <tr> dan </tr>. Contoh penggunaan tag <td> dapat dilihat di bawah ini:

    
    <body> 
        <table> 
            <tr> 
                <td>kolom 1</td>
                <td>kolom 2</td> 
                <td>kolom 3</td> 
            </tr>
        </table> 
    </body>
    

    Menambahkan atribut table 

    Kita dapat menambahkan beberapa atribut pada tag <table> untuk mengatur tampilan dan perilaku tabel. Atribut yang umum digunakan adalah width, border, dan cellspacing. Contoh penggunaan atribut table dapat dilihat di bawah ini:

    
    <body> 
        <table width="100%" border="1" cellspacing="0">
            <tr> 
                <td>kolom 1</td> 
                <td>kolom 2</td>
                <td>kolom 3</td> 
            </tr> 
        </table> 
    </body>
    

    Pada contoh di atas, tabel akan memiliki lebar 100%, memiliki border dengan lebar 1, dan sel akan berjarak 0 pixel.

    Menambahkan judul tabel 

    Kita dapat menambahkan judul pada tabel dengan menggunakan tag <caption>. Tag <caption> ditempatkan di antara tag <table> dan <tr>. Contoh penggunaan tag <caption> dapat dilihat di bawah ini:

    
    <body> 
        <table width="100%" border="1" cellspacing="0">
            <caption>Judul Tabel</caption> 
            <tr> 
                <td>kolom 1</td> 
                <td>kolom 2</td> 
                <td>kolom 3</td>
            </tr> 
        </table> 
    </body> 
    

    Dalam kesimpulan, tabel adalah salah satu elemen HTML yang berguna untuk menampilkan data dalam bentuk kolom dan baris. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat tabel di HTML dengan mudah dan menambahkan atribut dan judul pada tabel.

    LihatTutupKomentar