Mudah Membuat Tabel dengan HTML

Seringkali artikel membuat tabel begitu rumit. Kali ini saya berusaha membuatnya lebih mudah dimengerti, terutama bagi pemula. Semoga :)

Code untuk membuat sebuah tabel adalah <table>, <tr>, dan <td>. Sebuah tabel yang paling sederhana setidaknya terdiri dari elemen <table> yang berisi dua atau lebih <tr>, dimana <tr> akan berisi dua atau lebih <td>. <table> adalah table atau tabel, <tr> adalah table row dan <td> adalah table data. Table row sama dengan row atau baris pada pembuatan tabel di Microsoft Word, sedangkan table data sama dengan kolom. Mengapa harus dua atau lebih <tr> dan <td>? Sebab, jika hanya satu berarti hanya terdiri dari satu baris dan satu kolom saja, akan terlihat sebuah kotak saja.

Contoh 1. Tabel yang terdiri dari satu <tr> dan <td>

<table>
    <tr>
        <td>1.1</td>
    </tr>
</table>

Hasil untuk Contoh 1.

1.1

Contoh 2. Tabel yang terdiri dari dua dan atau lebih <tr> dan <td>

<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>

Hasil untuk Contoh 2.

1.1	1.2	1.3
2.1	2.2	2.3

Penomoran 1.1, 1.2, dan seterusnya memudahkan kita mengenali mana baris dan mana kolom. Jadi, nomor 1.1 berarti baris ke-1 kolom ke-1, nomor 1.2 berarti baris ke-1 kolom ke-2.

Bila Anda tidak melihat ada tabel maka tambahkan bingkai atau batas tepi agar terlihat bentuk tabelnya. Caranya tambahkan atribut border. Lebih jelas lihat contoh berikut.

Contoh 3.

<table border='1'>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>

Hasil untuk Contoh 3.

1.1	1.2	1.3
2.1	2.2	2.3

Atribut border ini bisa diatur menggunakan CSS, itu artinya Anda tidak perlu menambahkan atribut border setiap kali membuat tabel. Atau dengan kata lain Anda dapat mengubah tampilan sebuah tabel melalui CSS.

Contoh Mengubah Tampilan Tabel dengan CSS dengan Menambahkan Border

Letakkan CSS berikut dalam template Anda.

table, th, td {
border:1px solid green;
}

CSS tersebut akan menambahkan border selebar 1 px dan berwarna hijau pada setiap tabel yang Anda buat walaupun Anda tidak menambahkan atribut border='1'.

Menambahkan Header dan Judul Tabel (Caption)

Perbedaan Header dan Caption sangat mudah dipahami dengan melihat contoh berikut.

<table border="1">
    <caption>Judul Tabel</caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>

Hasil.

Judul Tabel

Header 1	Header 2	Header 3
1.1	1.2	1.3
2.1	2.2	2.3

Menggabungkan Sel-Sel Tabel (Merge Cell)

Ada dua atribut yang dapat Anda gunakan untuk tujuan ini, yaitu colspan untuk menggabungkan kolom tabel dan rowspan untuk menggabungkan baris tabel. Nilai rowspan dan colspan menunjukkan jumlah sel yang ingin disatukan. Berbeda dengan menggabungkan sel pada Microsoft Word. Bayangkan Anda memiliki sebuah tabel dengan tiga kolom pada MS Word. Jika Anda menggabungkan kolom 1 dan 2 maka tabel Anda akan otomatis menjadi dua kolom saja, yaitu kolom 1 dan 2 yang sudah menjadi satu kolom dan kolom 3. Sedangkan tabel HTML tidak demikian. Jika Anda menggabungkan kolom 1 dan 2 maka lebar kolom 1 akan bertambah lebarnya, dan kolom 2 akan tergeser ke kanan dengan pas, dan kolom 3 juga akan tergeser ke kanan ke luar tabel. Oleh karena itu Anda harus menghapus kolom 3 agar bentuk tabel Anda benar.

Lebih jelas lihat contoh berikut, saya akan menggabungkan kolom 1.1 dengan kolom 1.2.

HTML sebelum gabung.

<table border="1">
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasilnya.

Header 1	Header 2	Header 3
1.1	1.2	1.3
2.1	2.2	2.3

HTML Setelah gabung.

<table border="1">
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td colspan='2'>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasilnya.

Header 1	Header 2	Header 3
1.1		1.2	1.3
2.1	2.2	2.3

Coba perhatikan kolom 1.3! Keluar dari tabel bukan? Oleh karena itu Anda harus menghapus kolom 1.3 itu.

HTML setelah gabung dan hapus kolom 1.3

<table border="1">
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td colspan='2'>1.1</td><td>1.2</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasilnya.

Header 1	Header 2	Header 3
1.1		1.2
2.1	2.2	2.3

Selamat belajar.