Tabel HTML


Tabel adalah sekumpulan data terstruktur yang terdiri dari baris dan kolom atau biasa disebut data tabular. Sebuah table memungkinkan kamu dengan cepat dan mudah mencari nilai – nilai yang menunjukkan beberapa jenis hubungan antar data, misalnya nama seseorang – usianya – golongan darahnya – jenis kelaminnya, dll.

Dalam artikel ini kamu akan mempelajari dasar – dasar dari tabel HTML seperti rows(baris) dan cells(data sebuah tabel), headings(judul), colspan ataupun rowspan, dan bagaimana mengelompokkannya bersama hingga menjadi sebuah tabel yang berisikan informasi.

Contoh Tabel

Tujuan utama dari sebuah tabel adalah mengubah data – data menjadi sebuah informasi yang mudah dimengerti dengan membuat visualisasi hubungan antar baris dan kolom.

Membuat Tabel dengan HTML

Untuk membuat tabel dengan HTML dibutuhkan tag <table> untuk mendefinisikannya, lalu setiap baris didefinisikan menggunakan tag <tr>. Untuk judul sebuah data dari table didefinisikan menggunakan tag <th>, dan data sebuah tabel / cell didefinisikan menggunakan tag <td>.

Contoh :

<table>
    <tr>
        <th>Nama</th>
        <th>Umur</th>
        <th>Jenis Kelamin</th>
        <th>Golongan Darah</th>
    </tr>
    <tr>
        <td>Annisa</td>
        <td>25</td>
        <td>Perempuan</td>
        <td>AB</td>
    </tr>
    <tr>
        <td>Ani</td>
        <td>30</td>
        <td>Perempuan</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>28</td>
        <td>Laki-Laki</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Caesar</td>
        <td>23</td>
        <td>Laki-Laki</td>
        <td>B</td>
    </tr>
</table>

Note : Secara default teks / tulis dari tag <th> adalah bold (huruf tebal). Tag <td> merupakan wadah data – data sebuah table yang dapat berisi segala macam elemen HTML seperti :  teks, gambar, list, table lain, dan lain sebagainya.

Mengubah / Menghias Tampilan Tabel

Secara default tampilan tabel dalam HTML memang terlihat terlalu monoton dan masih sulit dimengerti untuk menampilkan data yang banyak, karena kita akan sulit membedakan tanpa adanya sebuah garis dan jarak antar setiap baris maupun kolom. Salah satu ciri khas dari sebuah tabel adalah garis yang menjadi pembatas antar cell. Nah, sekarang mari kita mulai mengubah tampilan tabel :

Menambahkan Border (Garis pembatas) pada tabel

Untuk menambahkan border kamu dapat mendefinisikannya dengan atribut border pada tag <table>.

Contoh :

<table border="1">
    ...
</table>

Output :

Tabel border

Note: Untuk membuat 1 border kalian perlu menambahkan style border-collapse: collapse

Membuat Pembatas antar Cell

Kalian dapat menggunakan atribut cellpadding atau cellspacing untuk membuat pembatas masing – masing data / cell pada tabel.

Contoh :

<table border="1" cellspacing="5" cellpadding="5">
    ...
</table>

Output :

Tabel dengan jarak antar cell

Note : Untuk table yang sudah diberi style border-collapse: collapse, atribut cellspacing sudah tidak berlaku lagi (tidak berpengaruh).

Menambahkan Caption sebuah Table

Untuk menambahkan judul sebuah tabel (bukan judul sebuah data tabel), kalian dapat mendefinisikannya dengan menggunakan tag <caption>.

Contoh :

<table border="1" cellspacing="5" cellpadding="5">
    <caption>Tabel data siswa</caption>
    ...
</table>

Output :

Tabel dengan caption

Note : Tag <caption> harus diletakkan setelah tag <table>

Membuat 2 atau lebih data dalam 1 kolom

Untuk mendefinisikannya kamu dapat menambahkan atribut colspan.

Contoh :

<table border="1" cellspacing="5" cellpadding="5">
    <tr>
        <th>Nama</th>
        <th colspan="2">Nomor Telp.</th>
    </tr>
    <tr>
        <td>Annisa</td>
        <td>08132424xxx</td>
        <td>08142424xxx</td>
    </tr>
</table>

Output :

Tabel beberapa cell dalam 1 kolom

Membuat 2 atau lebih data dalam 1 baris

Untuk mendefinisikannya kamu dapat menambahkan atribut rowspan.

Contoh :

<table border="1" cellspacing="5" cellpadding="5">
    <tr>
        <th>Nama</th>
        <th>Nomor Telp.</th>
    </tr>
    <tr>
        <td rowspan="2">Annisa</td>
        <td>08132424xxx</td>
    </tr>
    <tr>
        <td>08142424xxx</td>
    </tr>
</table>

Output :
Tabel beberapa cell dalam 1 baris