Belajar membuat tabel pada html

belajar membuat tabel pada html

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:

contoh pembuatan tabel

 
<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:

Memberi style pada tabel

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:

tabel dengan style colspan

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:

Contoh menggunakan rowspan

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 caption

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 col dan colgroup

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:

pengelompokan thead, tbody dan tfoot
ElemenKegunaanya
<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

Leave a Reply

Your email address will not be published. Required fields are marked *