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:



Leave a Comment