Tabel ~ Pemrograman dan Teknologi

Selain menampilkan teks dan gambar, kita juga bisa menampilkan tabel dengan menggunakan kode HTML. Untuk membuat tabel, tag yang kita gunakan adalah tag <table>.

Tabel merupakan elemen HTML yang terdiri dari beberapa pasang tag. Selain tag <table>, kalian juga memerlukan tag <tr> dan </tr> untuk menandai baris di dalam tabel. Beberapa pasang tag tersebut harus kalian letakkan di antara tag <table> dan </table>.

Selain itu, kita harus meletakkan sekumpulan tag <th> dan <td> beserta pasangan tag penutupnya di antara tag <tr> dan </tr>. Kedua tag tersebut digunakan untuk menandai kolom dalam tabel. Setiap kolom bisa kita isi dengan teks, gambar, maupun elemen html yg lain. Berikut ini adalah contoh sederhana tabel yg hanya terdiri dari satu baris dan satu kolom.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table>
            <tr>
                <td>Isi</td>
            </tr>
        </table>
    </body> 
</html>

Untuk menambahkan kolomnya, tambahkan tag <td> beserta penutupnya sesuai jumlah kolom yang diinginkan. Misalnya, jika kalian ingin ada tiga kolom dalam dalam satu baris maka kode HTML-nya adalah seperti di bawah ini.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
        </table>
    </body>
</html>

Jika kalian ingin memperbanyak barisnya, tambah saja tag <tr> beserta dengan isinya.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
        </table>
    </body>
</html>

Sekarang, kalian sudah punya tabel dengan dua baris yang masing-masing memiliki tiga kolom. Setiap tag <tr> sebaiknya berisi tag <td> dengan jumlah yg sama jika kalian tidak menggunakan atribut colspan. Untuk sementara, abaikan dulu soal atribut colspan. Saya akan membahas atribut tersebut di bawah.

Oh ya, supaya kalian bisa memastikan tabelnya terlihat, kalian memerlukan atribut border. Selain itu kalian bisa menggunakan CSS untuk mengatur bentuk dan warna border tabel. Tapi, CSS-nya tidak akan saya bahas di sini. Sekarang kita fokus dengan HTML-nya dulu.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
        </table>
    </body>
</html>

Sekarang coba simpan dan lihat hasilnya.

Cellspacing dan Cellpadding

Selain atribut border, atribut lain yang bisa kalian gunakan dalam tabel adalah cellspacing dan cellpadding. Cellpadding digunakan untuk mengatur jarak teks atau isi kolom dari bordernya. Cellspacing digunakan untuk mengatur jarak tiap kotak dalam tabel. Sekarang coba beri nilai 4 pada cellpadingnya, dan 0 pada atribut cellspacing.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table border="1" cellpadding="4"> cellspacing="0">
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
        </table>
    </body>
</html>

Sekarang kalian sudah bisa membuat tabel sederhana. Sebagainlatihan, kalian bisa mencoba membuat tabel dengan jumlah baris dan kolom yang berbeda.

Menebalkan Teks dalam Tabel

Untuk menebalkan teks dalam tabel, kalian bisa menggunakan tag <b>. Walaupun begitu, khusus untuk bagian nama kolom, ada cara lain yang bisa kalian gunakan.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table border="1" cellpadding="4"> cellspacing="0">
            <tr>
                <b>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
                </b>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
            <tr>
                <td>Judul</td>
                <td>Judul</td>
                <td>Judul</td>
            </tr>
        </table>
    </body>
</html>

Walaupun kalian bisa menggunakan cara di atas, sebaiknya kalian menggunakan tag <th> dan tag penutupnya yang sudah disediakan HTML untuk menandai judul kolom pada tabel. Tag tersebut akan menampilkan tulisan yang tebal selama tidak diubah dengan CSS.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table border="1" cellpadding="4"> cellspacing="0">
            <tr>
                <th>Judul</th>
                <th>Judul</th>
                <th>Judul</th>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
        </table>
    </body>
</html>

Colspan

Pada contoh-contoh sebelumnya, semua baris menampilkan kolom yang sama. Lalu, bagaimana jika ada satu baris yang jumlah kolomnya berbeda dengan baris lainnya? Untuk lebih jelasnya kita coba saja langsung.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table border="1" cellpadding="4" cellspacing="0">
            <tr>
                <th>Judul</th>
                <th>Judul</th>
                <th>Judul</th>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
            <tr>
                <td colspan="3">Isi</td>
            </tr>
        </table>
    </body>
</html>

Rowspan

Jika sebelumnya saya sudah menunjukkkan cara menggabungkan beberapa kolom, selanjutnya kita akan mempelajari cara menggabungkan beberapa baris menjadi satu. Atribut HTML yang bisa kita gunakan untuk melakukan ini adalah rowspan. Rowspan bisa digunakan pada tag <td> dan <th> seperti halnya atribut colspan.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table border="1" cellpadding="4" cellspacing="0">
            <tr>
                <th>Judul</th>
                <th>Judul</th>
                <th>Judul</th>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td>Isi</td>
            </tr>
            <tr>
                <td>Isi</td>
                <td>Isi</td>
                <td rowspan="2">Rowspan</td>
            </tr>
            <tr>
                <td colspan="2">Colspan</td>
            </tr>
        </table>
    </body>
</html>

Pada contoh di atas kita menggabungkan 2 baris menjadi 1 baris. Selain itu, kita juga menggabungkan 2 kolom menjadi 1 kolom. Selain di ujung kolom atau baris, kalian bisa menggunakan colspan dan rowspan di kolom manapun dalam tabel. Untuk jelasnya silakan dicoba sendiri.

Pengelompokan Bagian Tabel

Penulisan tabel seperti contoh-contoh di atas sudah cukup tepat. Tapi, lebih bagus lagi kalau kita mengelompokkan tabel menjadi tiga bagian. Kita bisa mengelompokkan tabel menjadi beberapa bagian dengan menggunakan tag <theader> untuk bagian judul, <tbody> untuk isi dan <tfooter> bagian bawah tabel. Pembagian tersebut tidak akan mempengaruhi tampilan tabel, tapi itu akan berguna saat kita menggunakan atribut style atau CSS. Penggunaan tag-tag tersebut bisa kalian lihat di bawah ini.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table border="1" cellpadding="4" cellspacing="0">
            <theader>
                <tr>
                    <th>Judul</th>
                    <th>Judul</th>
                    <th>Judul</th>
                </tr>
            </theader>
            <tbody>
                <tr>
                    <td>Isi</td>
                    <td>Isi</td>
                    <td>Isi</td>
                </tr>
                <tr>
                    <td>Isi</td>
                    <td>Isi</td>
                    <td>Isi</td>
                </tr>
            </tbody>
            <tfooter>
                <tr>
                    <td colspan="3">Isi</td>
                </tr>
            </tfooter>
        </table>
    </body>
</html>

Caption

Selain 3 tag yang sudah saya sebutkan di atas, ada satu tag lagi yang bisa digunakan dalam elemen tabel. Tag tersebut adalah tag <caption>. Isi dari caption ditampilkan di atas tabel dengan posisi rata tengah.

<html>
    <head>
        <title>tabel</title>
    </head>
    <body>
        <table border="1" cellpadding="4" cellspacing="0">
            <caption>Contoh Tabel</caption>
            <theader>
                <tr>
                    <th>Judul</th>
                    <th>Judul</th>
                    <th>Judul</th>
                </tr>
            </theader>
            <tbody>
                <tr>
                    <td>Isi</td>
                    <td>Isi</td>
                    <td>Isi</td>
                </tr>
                <tr>
                    <td>Isi</td>
                    <td>Isi</td>
                    <td>Isi</td>
                </tr>
            </tbody>
            <tfooter>
                <tr>
                    <td colspan="3">Isi</td>
                </tr>
            </tfooter>
        </table>
    </body>
</html>