Tabel HTML

Pada HTML, kita dapat membuat suatu tabel yang memungkinkan kita untuk menampilkan informasi dalam bentuk baris dan kolom.

Konsep tabel yaitu sebagai berikut:

Penjelasan:

• Sel  | Merupakan tempat dimana data akan ditampilkan.
• Baris  | Sekumpulan sel secara horizontal.
• Kolom  | Sekumpulan sel secara vertical.
• Garis Tepi  | Garis pembatas antara satu sel dengan sel lainnya.

Elemen <table>

Untuk membuat tabel pada HTML, kita harus menggunakan tag <table>

<table border="1">
    <tr>
        <th>No</th>
        <th>Nama</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Ian</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Hellen</td>
    </tr>
</table>

Output Dalam Web Browser:

Dalam membuat tabel dengan HTML, setidaknya ada beberapa tag pembentuk tabel yang digunakan, diantaranya yaitu:

• <table>  | Untuk mendefinisikan tabel, jika tag ini tidak digunakan maka kita tidak bisa membuat tabel.
• <tr>  | table row, untuk membuat baris dalam tabel.
• <th>  | table header, untuk membuat kepala / judul dari sel dalam tabel, teks akan memiliki format bold.
• <td>  | table data, untuk mendefinisikan isi dari sel.

> Bagaimana jika kita tidak mendifinisikan <tr> dalam tabel kita?

Ans: Data dalam sel akan ditampilkan dalam satu baris, tidak di baris yang berbeda.

Contoh:

<table border="1">
    <th>No</th>
    <th>Nama Buah</th>
    <td>1</td>
    <td>Pisang</td>
    <td>2</td>
    <td>Mangga</td>
</table>

Output Dalam Web Browser:

Table Styling

Table Border

Border merupakan garis pembatas antara satu sel dengan sel lainnya. Dalam tabel HTML sendiri, by default sebenarnya tidak ada border yang diimplementasikan, contohnya seperti berikut ini:

<table>
    <tr>
        <th>No</th>
        <th>Nama Buah</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Pisang</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mangga</td>
    </tr>
</table>

Output Dalam Web Browser:

Untuk menerapkan border dalam tabel, kita bisa menggunakan atribut border dalam tag <table> pembuka.

<table border="1">

Output Dalam Web Browser:

> Bagaimana supaya tidak ada 2 border, melainkan hanya 1 border saja?

Ans: Kita bisa menggunakan atribut style pada tag <table> menggunakan properti CSS border-collapse dengan nilai collapse.

<table border="1" style="border-collapse: collapse;">

Output Dalam Web Browser:

Table Width dan Height

Kita dapat juga mengatur tinggi dan lebar suatu tabel menggunakan atribut style dengan CSS properti yang diterapkan pada tag <table>.

Contoh Penerapan:

<table border="1" style="border-collapse: collapse; width: 500px; height: 100px;">
    <tr>
        <th>No</th>
        <th>Nama Buah</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Pisang</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mangga</td>
    </tr>
</table>

Output Dalam Web Browser:

Cell Background Color

Kita dapat menerapkan warna background pada sel dengan menggunakan properti bgcolor.

Contoh Penerapan:

<table border="1" style="border-collapse: collapse; width: 500px; height: 100px;">
    <tr>
        <th bgcolor="yellow">No</th>
        <th bgcolor="yellow">Nama Buah</th>
    </tr>
    <tr>
        <td bgcolor="#ADD8E6">1</td>
        <td>Anggur</td>
    </tr>
    <tr>
        <td bgcolor="#ADD8E6">2</td>
        <td>Apel</td>
    </tr>
</table>

Output Dalam Web Browser:

Table Caption

Caption dalam tabel merupakan suatu keterangan yang mewakili judul dalam tabel. Caption akan berposisi tepat di atas tabel. Untuk membuat elemen caption, dapat menggunakan tag <caption>.

Contoh Penerapan:

<table border="1" style="border-collapse: collapse; width: 500px; height: 100px;">
    <caption>Tabel Buah-Buahan</caption>
    <tr>
        <th>No</th>
        <th>Nama Buah</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Anggur</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Apel</td>
    </tr>
</table>

Output Dalam Web Browser:

Merging Cells

Kita juga dapat menggabungkan sel-sel dalam tabel menggunakan atribut colspan dan rowspan, atribut tersebut dapat diterapkan pada elemen <th> dan <td>.

Colspan

Colspan akan menggabungkan satu kolom dengan kolom yang lainnya. Penggunaan colspan menggunakan atribut colspan.

Contoh Penerapan:

<table border="1" style="border-collapse: collapse; width: 500px; height: 200px;">
    <tr>
        <th bgcolor="yellow" colspan="2">Jadwal Hari Senin</th>
    </tr>
    <tr>
        <th bgcolor="#ADD8E6">Mata Pelajaran</th>
        <th bgcolor="#ADD8E6">Jam</th>
    </tr>
    <tr style="text-align: center;">
        <td>Matematika</td>
        <td>07:15 - 09:00</td>
    </tr>
    <tr style="text-align: center;">
        <td>Fisika</td>
        <td>09:15 - 10:30</td>
    </tr>
    <tr style="text-align: center;">
        <td>Kimia</td>
        <td>10:45 - 12:00</td>
    <tr>
        <td colspan="2" bgcolor="lime" style="text-align: center;">ISTIRAHAT</td>
    </tr>
    </tr>
    <tr style="text-align: center;">
        <td>Biologi</td>
        <td>12:30 - 14:00</td>
    </tr>
    <tr style="text-align: center;">
        <td>Bahasa Indonesia</td>
        <td>14:15 - 15:15</td>
    </tr>
</table>

Output Dalam Web Browser:

Rowspan

Rowspan akan menggabungkan satu baris dengan baris yang lainnya. Penggunaan rowspan menggunakan atribut rowspan.

Contoh Penerapan:

<table border="1" style="border-collapse: collapse; width: 300px; height: 100px;">
    <tr>
        <th>Nama Item</th>
        <th>Harga per Item</th>
        <th>Harga Total</th>
    </tr>
    <tr>
        <td>Anggur</td>
        <td>Rp.20.000</td>
        <td rowspan="2">Rp.35.000</td>
    </tr>
    <tr>
        <td>Apel</td>
        <td>Rp.15.000</td>
    </tr>
</table>

Output Dalam Web Browser: