Cara Membuat Tabel pada HTML - Cara membuat tabel pada HTML merupakan salah satu hal dasar yang harus dikuasai oleh seorang web developer. Tabel pada HTML digunakan untuk menampilkan data secara terstrukturisasi dan rapi sehingga memudahkan pengunjung website untuk membaca informasi yang disajikan.
Dalam artikel ini, kita akan membahas cara membuat tabel pada HTML dengan mudah dan langkah demi langkah. Selain itu, akan dijelaskan juga bagaimana menambahkan warna pada tabel dan cara menambahkan kolom dan baris pada tabel. Simak ulasan lengkapnya di bawah ini.
Apa itu Tabel HTML?
 |
| HTML Tabel |
Tabel HTML adalah salah satu elemen markup pada bahasa pemrograman HTML yang digunakan untuk menampilkan data dalam bentuk tabel dengan struktur baris dan kolom. Tabel HTML terdiri dari beberapa elemen, seperti <table>, <tr>, <th>, dan <td>, yang digunakan untuk mengatur tampilan dan struktur tabel.
Tabel HTML biasanya digunakan untuk menampilkan data dalam jumlah banyak atau data yang memerlukan pengelompokan atau perbandingan, seperti jadwal kuliah, data penjualan, atau data hasil survey. Dengan menggunakan tabel HTML, pengunjung website dapat dengan mudah membaca dan membandingkan data yang disajikan secara terstrukturisasi dan rapi. Oleh karena itu, pemahaman tentang cara membuat tabel pada HTML sangatlah penting bagi seorang web developer.
Berikut adalah cara-cara membuat tabel pada HTML:
Cara Membuat Struktur Tabel
Untuk membuat tabel pada HTML, kita perlu memahami struktur dasar dari tabel itu sendiri. Struktur dasar tabel pada HTML terdiri dari beberapa elemen, yaitu:
- Elemen <table>
Elemen <table> digunakan untuk membuat tabel pada HTML. Semua elemen tabel lainnya harus diletakkan di dalam elemen <table>. Elemen <table> memiliki atribut "border", "cellpadding", dan "cellspacing" yang dapat digunakan untuk mengatur tampilan tabel.
- Elemen <tr>
Elemen <tr> (table row) digunakan untuk membuat baris pada tabel. Semua elemen <td> dan <th> harus diletakkan di dalam elemen <tr>.
- Elemen <th>
Elemen <th> (table header) digunakan untuk membuat sel header pada tabel. Sel header biasanya diletakkan pada baris pertama tabel atau pada kolom pertama tabel.
- Elemen <td>
Elemen <td> (table data) digunakan untuk membuat sel data pada tabel. Sel data biasanya diletakkan pada baris selain baris pertama dan pada kolom selain kolom pertama.
Berikut adalah contoh kode untuk membuat tabel sederhana pada HTML:
<table><tr><th>Nama</th><th>Umur</th></tr><tr><td>Andi</td><td>25</td></tr><tr><td>Budi</td><td>30</td></tr></table>
Dalam contoh kode di atas, kita membuat sebuah tabel dengan dua kolom (Nama dan Umur) dan dua baris data. Baris pertama digunakan sebagai header tabel dengan menggunakan elemen <th>, sedangkan baris kedua dan ketiga digunakan untuk menampilkan data dengan menggunakan elemen <td>.
Setelah memahami struktur dasar tabel pada HTML, kita dapat melanjutkan untuk memperindah tampilan tabel dengan CSS atau menambahkan kolom dan baris pada tabel.
Cara Menambahkan Atribut Tabel
Ketika membuat tabel pada HTML, kita dapat menambahkan atribut pada elemen <table> untuk mengatur tampilan tabel. Berikut adalah beberapa atribut yang dapat digunakan pada elemen <table>:
- border
Atribut "border" digunakan untuk menentukan lebar garis batas pada tabel. Nilai dari atribut ini adalah bilangan bulat (integer), di mana nilai 0 berarti tidak ada garis batas, dan nilai lebih dari 0 menunjukkan lebar garis batas dalam piksel.
Contoh penggunaan atribut "border":
<table border="1">...</table>
- cellpadding
Atribut "cellpadding" digunakan untuk menentukan jarak antara isi sel (cell content) dengan batas sel (cell border) pada tabel. Nilai dari atribut ini adalah bilangan bulat (integer), di mana nilai 0 berarti tidak ada jarak dan nilai lebih dari 0 menunjukkan jarak dalam piksel.
Contoh penggunaan atribut "cellpadding":
<table cellpadding="10">...</table>
- cellspacing
Atribut "cellspacing" digunakan untuk menentukan jarak antara sel-sel pada tabel. Nilai dari atribut ini adalah bilangan bulat (integer), di mana nilai 0 berarti tidak ada jarak dan nilai lebih dari 0 menunjukkan jarak dalam piksel.
Contoh penggunaan atribut "cellspacing":
<table cellspacing="5">...</table>
- width
Atribut "width" digunakan untuk menentukan lebar tabel. Nilai dari atribut ini adalah bilangan bulat (integer) atau persentase (%), di mana nilai persentase menunjukkan lebar tabel relatif terhadap lebar halaman.
Contoh penggunaan atribut "width":
<table width="80%">...</table>
- height
Atribut "height" digunakan untuk menentukan tinggi tabel. Nilai dari atribut ini adalah bilangan bulat (integer) atau persentase (%), di mana nilai persentase menunjukkan tinggi tabel relatif terhadap tinggi halaman.
Contoh penggunaan atribut "height":
<table height="500">...</table>
Dengan menambahkan atribut pada elemen <table>, kita dapat mengatur tampilan tabel sesuai dengan kebutuhan dan selera kita.
Cara Menambahkan Judul Tabel
Ketika membuat tabel pada HTML, kita juga dapat menambahkan judul pada tabel agar lebih informatif dan mudah dipahami oleh pengguna. Untuk menambahkan judul pada tabel, kita dapat menggunakan elemen <caption> yang diletakkan di antara elemen <table> dan elemen-elemen baris dan sel pada tabel.
Berikut adalah contoh kode untuk menambahkan judul pada tabel:
<table><caption>Jadwal Pelajaran</caption><tr><th>Hari</th><th>Mata Pelajaran</th><th>Jam</th></tr><tr><td>Senin</td><td>Matematika</td><td>08.00-09.30</td></tr><tr><td>Selasa</td><td>Bahasa Indonesia</td><td>09.00-10.30</td></tr>...</table>
Dalam contoh kode di atas, kita menambahkan judul "Jadwal Pelajaran" pada tabel dengan menggunakan elemen <caption>. Judul ini akan ditampilkan di atas tabel. Kita juga menambahkan elemen-elemen baris dan sel pada tabel seperti yang telah dijelaskan sebelumnya.
Dengan menambahkan judul pada tabel, pengguna dapat dengan mudah memahami isi dari tabel tanpa harus membaca seluruh isi tabel terlebih dahulu.
Cara Menambahkan Warna pada Tabel
Ketika membuat tabel pada HTML, kita juga dapat menambahkan warna pada tabel agar tampilannya lebih menarik dan mudah dibedakan antara elemen-elemen pada tabel.
Berikut adalah beberapa cara untuk menambahkan warna pada tabel pada HTML:
1.Menambahkan Warna pada Sel
Untuk menambahkan warna pada sel, kita dapat menggunakan atribut "bgcolor" pada elemen <td> atau <th>. Nilai dari atribut ini adalah kode warna dalam format hexadecimal atau nama warna dalam bahasa Inggris.
Contoh penggunaan atribut "bgcolor":
<table><tr><th bgcolor="#CCCCCC">Nama</th><th bgcolor="#CCCCCC">Usia</th></tr><tr><td bgcolor="#FFFFFF">Andi</td><td bgcolor="#FFFFFF">25</td></tr><tr><td bgcolor="#EEEEEE">Budi</td><td bgcolor="#EEEEEE">30</td></tr></table>
Dalam contoh kode di atas, kita menambahkan warna abu-abu pada baris header menggunakan atribut "bgcolor" pada elemen <th>, dan menambahkan warna putih dan abu-abu bergantian pada baris isi menggunakan atribut "bgcolor" pada elemen <td>.
2.Menambahkan Warna pada Baris
Untuk menambahkan warna pada baris, kita dapat menggunakan atribut "bgcolor" pada elemen <tr>. Atribut ini akan memberikan warna pada seluruh elemen pada baris tersebut.
Contoh penggunaan atribut "bgcolor":
<table><tr bgcolor="#CCCCCC"><th>Nama</th><th>Usia</th></tr><tr bgcolor="#FFFFFF"><td>Andi</td><td>25</td></tr><tr bgcolor="#EEEEEE"><td>Budi</td><td>30</td></tr></table>
Dalam contoh kode di atas, kita menambahkan warna abu-abu pada baris header menggunakan atribut "bgcolor" pada elemen <tr>, dan menambahkan warna putih dan abu-abu bergantian pada baris isi menggunakan atribut "bgcolor" pada elemen <tr>.
3.Menambahkan CSS pada Tabel
Kita juga dapat menambahkan CSS pada tabel untuk mengatur warna dan tampilan tabel secara lebih fleksibel dan terkontrol. Caranya adalah dengan menambahkan CSS pada elemen <table> dan elemen-elemen yang terkait pada tabel, seperti <tr>, <th>, dan <td>.
Contoh penggunaan CSS pada tabel:
<style>table {border-collapse: collapse;width: 100%;}th, td {text-align: left;padding: 8px;}th {background-color: #4CAF50;color: white;}tr:nth-child(even) {background-color: #f2f2f2;}</style></head><body><table><thead><tr><th>Nama</th><th>Alamat</th><th>No. Telepon</th></tr></thead><tbody><tr><td>Andi</td><td>Jl. Raya No. 12</td><td>08123456789</td></tr><tr><td>Budi</td><td>Jl. Mangga No. 45</td><td>08234567890</td></tr><tr><td>Citra</td><td>Jl. Durian No. 78</td><td>08345678901</td></tr></tbody></table>
Dalam contoh kode di atas, CSS diterapkan pada elemen <table> dan elemen-elemen terkait pada tabel. Ada beberapa properti CSS yang digunakan, antara lain:
- "border-collapse: collapse;" untuk menggabungkan garis-garis antar sel pada tabel dan memberikan tampilan yang lebih rapi.
- "width: 100%;" untuk mengatur lebar tabel menjadi 100% dari lebar elemen yang mengandung tabel.
- "text-align: left;" dan "padding: 8px;" untuk mengatur tampilan teks pada elemen <th> dan <td>.
- "background-color: #4CAF50;" dan "color: white;" untuk memberikan warna latar belakang dan teks pada elemen <th>.
- "tr:nth-child(even) { background-color: #f2f2f2; }" untuk memberikan warna latar belakang bergantian pada baris isi tabel.
Dengan menggunakan CSS pada tabel, kita dapat membuat tampilan tabel yang lebih menarik dan mudah dibedakan antara elemen-elemennya. Namun perlu diingat bahwa penambahan warna pada tabel tidak boleh mengurangi kejelasan dan kegunaan tabel tersebut, sehingga tetap harus memperhatikan faktor keterbacaan dan kegunaan tabel.
Cara Menambahkan Kolom dan Baris Tabel
Untuk menambahkan kolom pada tabel, kita dapat menggunakan elemen <th> di dalam elemen <tr> pada elemen <thead>, sedangkan untuk menambahkan baris pada tabel, kita dapat menggunakan elemen <tr> di dalam elemen <tbody>.
Berikut ini adalah contoh kode untuk menambahkan kolom dan baris pada tabel:
<table><thead><tr><th>Nama</th><th>Alamat</th><th>No. Telepon</th><th>Email</th></tr></thead><tbody><tr><td>Andi</td><td>Jl. Raya No. 12</td><td>08123456789</td><td>andi@mail.com</td></tr><tr><td>Budi</td><td>Jl. Mangga No. 45</td><td>08234567890</td><td>budi@mail.com</td></tr><tr><td>Citra</td><td>Jl. Durian No. 78</td><td>08345678901</td><td>citra@mail.com</td></tr><tr><td>Dodi</td><td>Jl. Apel No. 90</td><td>08456789012</td><td>dodi@mail.com</td></tr></tbody></table>
Pada contoh kode di atas, kita menambahkan satu kolom baru yaitu kolom email, dengan menambahkan elemen <th> dengan teks "Email" di dalam elemen <tr> pada elemen <thead>. Selanjutnya, kita menambahkan baris baru pada tabel dengan menambahkan elemen <tr> pada elemen <tbody>. Setiap elemen <tr> pada elemen <tbody> memiliki empat elemen <td> yaitu nama, alamat, nomor telepon, dan email.
Dengan menambahkan kolom dan baris pada tabel, kita dapat mengatur isi tabel sesuai dengan kebutuhan kita.
Kesimpulan
Dalam membuat tabel pada HTML, kita dapat mengatur struktur tabel dengan menentukan jumlah baris dan kolom, menambahkan atribut pada tabel seperti border, cellpadding, cellspacing, dan align, menambahkan judul pada tabel dengan menggunakan elemen <caption>, serta menambahkan warna pada tabel dengan menggunakan CSS.
Selain itu, kita juga dapat menambahkan kolom dan baris pada tabel sesuai dengan kebutuhan kita dengan menggunakan elemen <th> dan <td>. Dengan menggunakan teknik-teknik tersebut, kita dapat membuat tabel yang rapi dan mudah dibaca oleh pengguna.