#36 Struktur dasar membuat tabel pada HTML

pada tutorial ini kita belajar mengenal struktur dasar membuat tabel pada html, untuk lebih lengkapnya kita bahas satu-satu tag yang ada pada tabel.

Deskripsi

Tabel adalah daftar informasi yang tersusun dalam baris dan kolom.

seperti contoh diatas baris ditandai dengan kotak ke samping, sedangkan kolom ditandai dengan kotak kebawah

Baca juga : membuat garis horizontal di HTML

tabel HTML terdiri dari beberapa struktur tag antara lain sebagai berikut.

tag <table>
tag <thead>
tag <tbody>
tag <tfoot>
tag <tr>
tag <th>
tag <td>

tag <table>

tag <table> digunakan untuk menampilkan data dengan tipe tabel pada HTML. hanya ada satu tag dalam tabel HTML yaitu sebagai bungkusnya.

tag <table> di tulis secara berpasangan dengan tag pembuka <table> dan tag penutup </table>

    <table>
        ....
    </table>Code language: HTML, XML (xml)

tag <thead>

tag <thead> digunakan untuk mengelompokan isi header dalam tabel HTML. <thead> singkatan dari table header

tag <thead> ditulis didalam tag <table> dan hanya ada satu tag <thead> dalam tabel yaitu sebagai bagaian kepala dari tabel.

    <table>
        <thead>
            ...
        </thead>
    </table>Code language: HTML, XML (xml)

tag <tbody>

tag <tbody> digunakan untuk mengelompokan isi tubuh dalam sebuah tabel. <tbody> singkatan dari table body.

tag <tbody> ditulis setelah <thead> jika ada bagian kepala tabel, jika tidak ada tag <thead> bisa langsung di tulis dalam tabel. hanya ada satu tag <tbody> dalam sebuah tabel yaitu sebagai bagian tubuh tabel.

    <table>
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>Code language: HTML, XML (xml)

tag <tfoot>

tag <tfoot> digunakan untuk mengelompokan konten footer dalam tabel. <tfoot> singkatan dari table footer.

tag <tfoot> ditulis setelah <tbody> dan hanya ada satu tag pada tabel. Dalam sebuah tabel <tfoot> merupakan bagian dari kaki tabel.

    <table>
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
        <tfoot>
            ...
        </tfoot>
    </table>Code language: HTML, XML (xml)

tag <tr>

tag <tr> digunakan untuk membuat baris pada tabel, tag <tr> singkatan dari table row.

di dalam tag <tr> terdapat satu atau lebih tag <th> atau <td>

    <table>
        <thead>
            <tr>
                ...
            </tr>
        </thead>
        <tbody>
            <tr>
                ...
            </tr>
        </tbody>
        <tfoot>
            <tr>
                ...
            </tr>
        </tfoot>
    </table>Code language: HTML, XML (xml)

tag <th>

tag <th> digunakan untuk membuat judul pada header. tag ini opsional dipakai, tampilan secara default tebal dan center. tag <th> singkatan dari table head.

tag <th>. dapat berisi satu atau lebih tag ,<th>. secara penulisan yang tepat tag <th> di tulis didalam tag <thead> atau didalam kepala tabel

        <thead>
            <tr>
                <th>Bulan</th>
                <th>Penjualan</th>
            </tr>
        </thead>Code language: HTML, XML (xml)

tag <td>

tag <td> digunakan untuk menampilkan data dan bukan judul tabel. tag <td> singkatan dari table data

tag <td>. dapat berisi satu atau lebih tag ,<td>. secara penulisan yang tepat tag <td> di tulis didalam tag <tbody> atau didalam tubuh tabel

        <tbody>
            <tr>
                <td>Mei</td>
                <td>100.000</td>
            </tr>
            <tr>
                <td>Juni</td>
                <td>200.000</td>
            </tr>
        </tbody>Code language: HTML, XML (xml)

jika kita ingin membuat garis pada tabel tambahkan atribut border=”1″ di dalam tag <table>

    <table border="1">
    </table>Code language: HTML, XML (xml)

kita juga bisa menambahkan css secara inline di dalam tag <table> seperti dibawah ini.

    <table style="width:100%">
        <tfoot style="text-align:center">
            <tr>
                <td>Jumlah</td>
                <td>300.000</td>
            </tr>
        </tfoot>
   </table>Code language: HTML, XML (xml)

jika kita menggabungkan tag” yang sudah kita pelajari akan menjadi sebuah tabel yang berisi informasi .

contoh tabel html yang benar atau penulisan yang tepat sesuai dengan fungsi tag masing-masing pada tabel sebagai berikut.

<!DOCTYPE html>
<html>
<head>
    <title> Belajar membuat tabel di html </title>
</head>
<body>
    <table style="width:100%" border="1">
        <tr>
            <th>Bulan</th>
            <th>Penjualan</th>
        </tr>
        <tr>
            <td>Mei</td>
            <td>100.000</td>
        </tr>
        <tr>
            <td>Juni</td>
            <td>200.000</td>
        </tr>
        <tfoot style="text-align:center">
            <tr>
                <td>Jumlah</td>
                <td>300.000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>Code language: HTML, XML (xml)