.jpeg)
-picsay.jpg){kind=link}
Meskipun berisi berbagai informasi, beberapa website memiliki cara yang berbeda dalam menyampaikan informasinya kepada para pembaca. Contoh nya adalah dengan menggunakan Tabel. Dengan menggunakan tabel, para pembaca lebih mudah untuk mengetahui sebuah informasi. Disini kita akan belajar cara membuat tabel dengan html. Apakah bisa membuat tabel menggunakan html ? Jawabannya tentu saja bisa. Bagaimana caranya ? Simak tutorial nya dibawah ini.
Cara Membuat Tabel dengan Html
Untuk membuat tabel dalam html, kita membutuhkan lebih dari satu tag. Selain itu, tabel terdiri dari empat unsur utama, diantaranya seperti dibawah ini
- Baris
- Sel
- Kolom
- Garis
Berikut ini adalah beberapa tag yang kita perlukan untuk membuat tabel dalam html
- Tag <table> untuk membungkus tabel nya
- Tag <thead> untuk membungkus bagian kepala dari tabel
- Tag <tbody> untuk membungkus bagian body dari tabel
- Tag <tr> (table row) untuk membuat baris
- Tag <td> (table data) untuk membuat sel
- Tag <th> (table head) untuk membuat judul pada header
Namun meskipun terdapat tujuh tag untuk membuat tabel, sebenarnya kamu juga bisa mengingat tiga tag yang penting untuk membuat tabel. Yaitu tag <table>,<tr> dan <td> Jadi sisanya hanya lah tambahan (opsional), boleh digunakan ataupun tidak digunakan. Selain itu, kita harus menambahkan atribut border pada tabelnya. Fungsi dari atribut border tersebut adalah untuk membuat garis pada tabel. Jadi kita tambahkan atribut border="1" pada tag <table>. Berikut ini adalah contoh penulisan nya.
Sekarang kita coba buat tabelnya. Berikut ini adalah penulisan codingan nya
<table border="1"><!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tabel di Html</title>
</head>
<body>
<table border="1">
<tr>
<td>Kolom Pertama</td>
<td>Kolom Kedua</td>
</tr>
<tr>
<td>Kolom Ketiga</td>
<td>Kolom Keempat</td>
</tr>
</table>
</body>
</html>.png)
Cara buat artikel menarik lainnya
Artikel Terkait :
Mengatur Jarak Sel dengan Cellpadding
Untuk mengatur antara jarak dengan cellpadding, kita bisa menggunakan atribute cellpadding di dalam tag <table>. Contohnya seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tabel di Html</title>
</head>
<body>
<table border="1" cellpadding="15">
<tr>
<td>Kolom Pertama</td>
<td>Kolom Kedua</td>
</tr>
<tr>
<td>Kolom Ketiga</td>
<td>Kolom Keempat</td>
</tr>
</table>
</body>
</html>.png)
Menambahkan Warna pada Baris dan Sel
Untuk menambahkan warna pada baris dan sel, kita bisa menggunakan atribut bgcolor. Untuk menambahkan warna pada baris, kita menambahkan atribut bgcolor di dalam tag <tr>. Sedangkan untuk menambahkan warna pada sel, kita tambahkan atribut bgcolor di dalam tag <td>. Contohnya seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tabel di Html</title>
</head>
<body>
<table border="1" cellpadding="7">
<tr bgcolor="#FFFFE0">
<td>Kolom Pertama</td>
<td>Kolom Kedua</td>
</tr>
<tr>
<td bgcolor="#FF0000">Kolom Ketiga</td>
<td bgcolor="#FFA500">Kolom Keempat</td>
</tr>
</table>
</body>
</html>.png)
Kamu bisa merubahnya dengan warna yang kamu inginkan. Kamu bisa melihat kode kode warna nya disini
Mudah kan ? Jika kamu kurang mengerti, silahkan bertanya pada kolom komentar.