Home › html › Belajar membuat tabel pada html

Belajar membuat tabel pada html

Diperbaharui: 18 October 2020

Pada HTML, Anda bisa membuat sebuah tabel pada html. Pada pembelajaran kali ini kita akan membuat tabel. Berikut list yang akan kita pelajari:

Elemen <table> Mendefinisikan sebuah tabel
Elemen <tr> kepanjangan dari Table Row untuk membuat baris tabel
Elemen <td> Kepanjangan dari Table Data untuk membuat sebuah isi tabel
Elemen <th> Kepanjangan dari Table Heading untuk membuat sebuah isi judul tabel
Elemen <caption> untuk mendefinisikan sebuah judul tabel
Elemen <colgroup> Menentukan grup yang terdiri dari satu atau beberapa kolom
Elemen <col> Menentukan properti kolom untuk setiap kolom dalam elemen
Elemen <thead> Mengelompokkan konten header dalam sebuah tabel
Elemen <tbody> Mengelompokkan konten isi dalam tabel
Elemen <tfoot> Mengelompokkan konten footer dalam sebuah tabel

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar membuat tabel</title>
    </head>
    <body>

    <table>
        <tr>
            <th>Nama</th>
            <th>Umur</th> 
        </tr>

        <tr>
            <td>Budi</td>
            <td>25</td> 
        </tr>

        <tr>
            <td>Cecep</td>
            <td>23</td> 
        </tr>
     </table>

    </body>
</html>

Hasilnya:

<th>dan <td>

Bisa berisi segala macam elemen html, teks, gambar, list dll

Memberi style pada tabel

Untuk lebih jelasnya. Anda bisa memberikan style dengan css agar tabel lebih menarik tampilannya.

Anda akan belajar css lebih dalam dilain waktu.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar membuat tabel</title>

    <style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    th, td {
        padding: 10px;
    }
    </style>

    </head>
    <body>

    <table style="width:100%">
        <tr>
            <th>Nama</th>
            <th>Umur</th> 
        </tr>

        <tr>
            <td>Budi</td>
            <td>25</td> 
        </tr>

        <tr>
            <td>Cecep</td>
            <td>23</td> 
        </tr>
     </table>

    </body>
</html>

Hasilnya:

Menggunakan atribut colspan

Anda bisa membuat rentang sel lebih dari satu kolom dengan menggunakan atribut colspan

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar membuat tabel</title>

    <style>
    table, th, td {
         border: 1px solid black;
         border-collapse: collapse;
    }
    th, td {
        padding: 10px;
    }
    </style>

    </head>
    <body>

    <table style="width:50%">
        <tr>
            <th>Nama</th>
            <th colspan="2">Nomor Antrian</th> 
        </tr>

        <tr>
            <td>Budi</td>
            <td>33</td>
            <td>34</td>
        </tr>

        <tr>
            <td>Cecep</td>
            <td>40</td>
            <td>41</td>
        </tr>
     </table>

    </body>
</html>

Hasilnya:

Menggunakan atribut rowspan

Anda bisa membuat membuat rentang sel lebih dari satu baris dengan menggunakan atribut rowspan

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar membuat tabel</title>

    <style>
    table, th, td {
         border: 1px solid black;
         border-collapse: collapse;
    }
    th, td {
        padding: 10px;
    }
    </style>

    </head>
    <body>

    <table style="width:50%">
    <tr>
        <th>Name</th>
        <td>Budi</td>
    </tr>
    <tr>
        <th rowspan="2">Nomor Antrian</th>
        <td>28</td>
    </tr>
    <tr>
        <td>29</td>
    </tr>
    </table>

    </body>
</html>

Hasilnya:

Menggunakan elemen caption

Anda bisa menambahkan caption teks ke tabel, dengan menggunakan elemen <caption>

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar membuat tabel</title>

    <style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    th, td {
        padding: 10px;
    }
    </style>

    </head>
    <body>

    <table style="width:50%">
    <caption>Daftar siswa baru</caption>
        <tr>
            <th>Nama</th>
            <th>Umur</th> 
        </tr>

        <tr>
            <td>Budi</td>
            <td>25</td> 
        </tr>

        <tr>
            <td>Cecep</td>
            <td>23</td> 
        </tr>
     </table>

    </body>
</html>

Hasilnya:

Menggunakan Elemen <colgroup> dan <col>

Anda bisa memanfaatkan elemen <colgroup> untuk menentukan grup yang terdiri dari satu atau beberapa kolom dan elemen <col> untuk menentukan properti kolom pada setiap kolom dalam elemen

contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar membuat tabel</title>

    <style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    th, td {
        padding: 10px;
    }
    </style>

    </head>
    <body>

    <table style="width:50%">
    <colgroup>
        <col span="2" style="background-color:green">
        <col style="background-color:yellow">
    </colgroup>
    
        <tr>
            <th>Nama</th>
            <th>Umur</th> 
            <th>Alamat</th>
        </tr>

        <tr>
            <td>Budi</td>
            <td>25</td> 
            <td>Jakarta</td>
        </tr>

        <tr>
            <td>Cecep</td>
            <td>23</td> 
            <td>Kalimantan</td>
        </tr>
     </table>

    </body>
</html>

Hasilnya:

Menggunakan Elemen <thead>, <tbody> dan <tfoot>

Anda bisa memanfaatkan <thead>, <tbody> dan <tfoot> untuk membuat grup atau pengelompokan kontent.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar membuat tabel</title>

    <style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    th, td {
        padding: 10px;
    }
    thead {
        background-color: yellow;
    }
    tbody {
        background-color: magenta;
    } 
    tfoot {
        background-color: green;
    }  
    </style>

    </head>
    <body>

    <table style="width:50%">
    <thead>
        <tr>
            <th>Nama</th>
            <th>Umur</th> 
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>Budi</td>
            <td>25</td> 
        </tr>
    
        <tr>
            <td>Cecep</td>
            <td>23</td> 
        </tr>
     </tbody>
     
     <tfoot>
        <tr>
            <td colspan="2">www.hendky.com</td>
        </tr>     
     </tfoot>
     </table>

    </body>
</html>

Hasilnya:

Elemen	Kegunaanya
<table>	Mendefinisikan sebuah tabel
<tr>	Mendefinisikan sebuah baris tabel
<td>	Mendefinisikan sebuah isi tabel
<th>	Mendefinisikan sebuah isi judul tabel
<caption>	Mendefinisikan sebuah judul tabel
<colgroup>	Mendefinisikan grup yang terdiri dari satu atau beberapa kolom
<col>	Mendefinisikan properti kolom untuk setiap kolom dalam elemen
<thead>	Mengelompokkan konten header dalam sebuah tabel
<tbody>	Mengelompokkan isi konten dalam sebuah tabel
<tfoot>	Mengelompokkan konten footer dalam sebuah tabel