Cara Membuat Tabel Di HTML Dan CSS


Membuat Tabel Di HTML Dan CSS – Membuat tabel di Microsoft Word atau Excel bukanlah perkara yang sulit. Akan tetapi bagaimana jika membuat tabel di HTML?

Untuk diketahui, HTML sudah menyediakan elemen table yang dapat kita gunakan saat ingin membuat tabel. Misalnya untuk menampilkan suatu data yang terstruktur dari database. Seperti yang diketahui, tabel digunakan untuk mengelompokkan data secara terstruktur yang terdiri dari baris, kolom dan sel. Adanya baris, kolom dan sel ini membuat kita bisa dengan mudah melihat informasi keterkaitan di dalamnya.

Tabel HTML pada web juga digunakan untuk mengatur tata letak halaman. Akan tetapi seiring berjalannya waktu web developer sudah bisa menggunakan  CSS untuk mengatur layout tampilan halaman web.

Elemen HTML untuk Tabel

Berikutnya kita pelajari tentang elemen HTML untuk membuat tabel. Perlu diketahui bahwa terdapat beberapa tag atau elemen HTML yang bisa kita gunakan. Pada dasarnya kita bisa membuat tabel hanya dengan tiga elemen HTML di bawah ini:

  1. Elemen <table> : untuk mendefinisikan pembuatan tabel
  2. Elemen <tr> : untuk mendefinisikan pembuatan baris pada tabel
  3. Elemen <td> : dipakai untuk membuat kolom atau sel di setiap baris pada tabel.

Akan tetapi sejalan dengan perkembangan teknologi, HTML menyertakan elemen-elemen opsional lainnya dalam pembuatan tabel. Sehingga ada beberapa elemen tambahan yang bisa kita gunakan, antara lain:

  1. Elemen <th> : dipakai untuk mendefinisikan header dalam tabel
  2. Elemen <thead> : elemen ini dipakai untuk membungkus konten bagian judul atau kepala tabel
  3. Elemen <tbody> : dimanfaatkan untuk membungkus konten di bagian isi atau tubuh tabel
  4. Elemen <tfoot> : elemen yang digunakan untuk membungkus konten bagian bawah dari suatu tabel

Baca juga: Cara Membuat Form HTML Dengan CSS

Cara Membuat Tabel HTML

Berikutnya kita bahas bagaimana cara membuat tabel di HTML dengan beberapa elemen yang diterangkan di atas. Seperti apa caranya?

Langkah pertama, silakan buat file .html baru dengan nama terserah Anda atau index.html. Sesudah itu silakan copy-paste atau salin dan tempel kode di bawah ini pada file yang baru Anda buat tersebut.

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Mengenal Tabel HTML</title>
</head>
<body>
    <table border=“1”>
        <tr>
            <td>Baris ke 1 Kolom ke 1</td>
            <td>Baris ke 1 Kolom ke 2</td>
        </tr>
        <tr>
            <td>Baris ke 2 Kolom ke 1</td>
            <td>Baris ke 2 Kolom ke 2</td>
        </tr>
    </table>
</body>
</html>

Jika diperhatikan, pada kode atau script di atas kita bisa melihat atribut border dalam tag table. Fungsi dari atribut ini adalah untuk memberikan garis pada tabel. Sedangkan angka ‘1’ yang ada dalam border tersebut merupakan nilai dari ketebalan garis yang ditampilkan. Semakin besar angka tersebut maka akan semakin tebal pula garis yang ditampilkan pada halaman web.

Dari kode di atas akan didapatkan hasil seperti berikut ini.

Menggabungkan Sel pada Tabel

Terkadang kita perlu menggabungkan beberapa sel dalam tabel menjadi satu. Untungnya dalam HTML ada atribut yang bisa kita gunakan untuk menggabungkan sel, yakni:

  1. Atribut rowspan: untuk menggabungkan baris pada tabel
  2. Atribut Colspan: untuk menggabungkan kolom pada tabel

Perlu dicatat, atribut di atas dapat digunakan pada tag td ataupun th. Berikut contoh kode yang bisa Anda coba.

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Mengenal Tabel HTML</title>
</head>
<body>
    <table border=“1”>
        <tr>
            <th rowspan=“2”>Nama</th>
            <th colspan=“3”>Nilai</th>
        </tr>
        <tr>
        <th>Matematika</th>
<th>Bahasa Indonesia</th>
<th>Bahasa Inggris</th>
       </tr>
        <tr>
         <td>Ayunda</td>
<td>75</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>Gilang</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Audrey</td>
<td>96</td>
<td>70</td>
<td>80</td>
        </tr>
    </table>
</body>
</html>

Perhatikan pada atribut rowspan. Terlihat bahwa atribut itu mempunyai nilai 2. Artinya baris yang akan digabung adalah 2 baris. Sementara atribut colspan mempunyai nilai 3 yang artinya kolom yang akan digabung ada 3 kolom.

Pada kode di atas Anda juga bisa menjumpai tag th yang fungsinya adalah untuk kepala tabel. Jadi saat ditampilkan data yang ada dalam tag th akan diberi efek bold atau tebal. Sedangkan data dalam tag td tidak.

Dari kode di atas maka akan didapatkan tampilan seperti berikut ini.

Memberikan Warna dan Jarak Antar Sel

Sama halnya dengan software pengolah huruf atau spreadsheet, kita bisa mengatur sel dalam tabel yang dibuat di HTML. Sehingga tampilannya akan terlihat lebih tertata.

Kita bisa menggunakan atribut cellpadding untuk mengatur jarak antar sel. Atribut ini dapat diterapkan langsung pada tag table. Contohnya adalah seperti berikut:

<table border=”1″ cellpadding=”8″>

     ….

</table>

Semakin tinggi angka pada atribut cellpadding, jarak antar sel juga akan semakin lebar. Begitu juga sebaliknya.

Selain mengatur jarak antar sel kita juga bisa mengatur warna latar belakang pada tabel atau sel. Caranya adalah dengan memakai atribut bgcolor lalu diisi dengan warna yang diinginkan. Contohnya kita ingin memberikan warna kuning pada nilai dan oranye pada nama. Maka kita tinggal menambahkan atribut bgcolor pada tag th seperti di bawah ini:

<th bgcolor=”orange” rowspan=”2″>Nama</th>

<th bgcolor=”yellow” colspan=”3″>Nilai</th>

Sesudah melakukan perubahan, tampilan tabel di atas akan berubah seperti di bawah ini:

Baca juga: Materi Basis Data Lengkap

Menerapkan Kode CSS pada Tabel

Sejak kehadiran CSS kita tidak perlu lagi menggunakan script di atas untuk membuat tabel. Jika ingin memasukkan kode CSS pada suatu halaman website, kita bisa membuat berkas CSS terpisah atau disimpan dalam elemen head pada HTML.

Disarankan untuk tidak menyimpannya pada elemen HTML lainnya. Sebab hal itu membuat kode program tidak terlihat rapi. Selain itu dengan meletakkan kode CSS pada file terpisah atau di dalam elemen head, maka membuat kode CSS ini bisa digunakan secara berulang-ulang.

Kode CSS bisa ditulis dengan mendefinisikan tag HTML apa yang akan diubah atau diberi efek CSS. Sebagai contoh silakan lihat contoh kode di bawah ini.

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Mengenal Tabel HTML</title>
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th rowspan=“2”>Nama</th>
            <th colspan=“3”>Nilai</th>
        </tr>
        <tr>
        <th>Matematika</th>
<th>Bahasa Indonesia</th>
<th>Bahasa Inggris</th>
       </tr>
        <tr>
         <td>Ayunda</td>
<td>75</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>Gilang</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Audrey</td>
<td>96</td>
<td>70</td>
<td>80</td>
        </tr>
    </table>
</body>
</html>

Hasil dari kode di atas kurang lebih adalah seperti berikut.

Seperti yang bisa dilihat, kode di atas sudah disisipi kode CSS. Kode tersebut diletakkan di dalam elemen style yang disimpan dalam elemen head. Elemen style ini bertujuan untuk menandai bahwa kode yang ada di dalamnya merupakan kode CSS yang dipakai untuk mendesain halaman web.

Properti CSS yang ada dalam kode di atas mempunyai fungsi yang berbeda-beda. Berikut penjelasan secara singkat untuk Anda.

  1. Properti border-collapse: collapse; dipakai untuk menciutkan garis tabel menjadi satu garis.
  2. Properti border: 1px solid black; fungsinya untuk memberikan garis dan ketebalan garis, berikut warna garis tersebut.
  3. Properti padding: 10px; dipakai untuk mengontrol jarak konten yang ada pada tabel.
  4. Properti background-color: #4CAF50; berguna untuk memberikan warna background atau latar belakang hijau.
  5. Properti color: white; digunakan untuk memberikan warna putih pada teks dalam tabel.

Properti-properti di atas tentu saja dapat disesuaikan lagi sesuai kebutuhan. Anda juga bisa menambahkan properti lain. Misalnya properti width supaya tabel dapat mengikuti ukuran layar perangkat. Lalu Anda bisa menambahkan properti hover agar baris pada tabel mendapat efek warna tertentu saat kursor mengarah pada baris tersebut.

Tidak hanya itu, masih ada banyak properti CSS untuk pembuatan tabel yang dapat kita pakai. Contohnya adalah properti width dan height untuk mengatur lebar dan tinggi. Kita juga bisa mengatur text alignment dengan properti horizontal alignment atau vertical alignment.



Loading...

Leave a Comment