Hello guys, Berjumpa lagi dengan Miniblog dari Inzaghi's Blog! Sebenarnya, membuat Tabel di HTML itu mudah, hanya saja jika sudah terlalu banyak Tabel tersebut akan membuat lebih ribet dan sedikit menyulitkan. Kali ini kita akan memberikan Tips Cara membuat Tabel dalam HTML.
Sumber : Developer.Mozilla.org, Educba.com, dan W3schools.com
Tabel HTML memiliki sejumlah baris dan kolom di mana kita dapat menyisipkan, menyusun, dan menampilkan data. Data ini kemudian ditampilkan di halaman web dalam format tabular. Tabel ini membantu kita menyajikan data secara teratur, seperti menampilkan daftar item, menunjukkan data tabular seperti laporan penjualan, membuat tata letak untuk bagian halaman web, dll.
Inilah Tag-tag yang digunakan dalam HTML :
|
Tag
|
Deskripsi
|
|
<table>
|
Defines a
table and its content.
|
|
<caption>
|
Defines a
title or caption for a table.
|
|
<thead>
|
Groups the
header content in a table.
|
|
<tbody>
|
Groups the
body content in a table.
|
|
<tfoot>
|
Groups the
footer content in a table.
|
|
<tr>
|
Defines a
table row.
|
|
<th>
|
Defines a
table header cell.
|
|
<td>
|
Defines a
table data/cell.
|
|
<colgroup>
|
Specifies a
set of one or more columns in a table for the purpose of formatting.
|
|
<col>
|
Defines the
attributes for a group of columns in a table.
|
Berikut adalah beberapa Cara membuat Tabel menggunakan HTML :
1. Tabel Sederhana
Mari kita buat tabel HTML dasar yang menampilkan informasi produk. Kita akan menyertakan dua kolom yang berlabel "Produk" dan "Harga." Tabel ini akan berisi satu baris data untuk produk "Apel" dengan harga $20.
Untuk membuat tabel HTML sederhana :
- Buka file HTML di editor teks atau editor HTML.
- Tambahkan elemen <table> untuk mendefinisikan tabel.
- Gunakan elemen <tr> untuk membuat baris tabel.
- Elemen <th> mendefinisikan header tabel (label kolom).
- Gunakan elemen <td> untuk membuat sel tabel (data).
- Sisipkan data yang diinginkan dalam sel-sel tabel.
- Simpan file dengan ekstensi .html, lalu buka di browser web untuk melihat tabel.
Contoh :
<table><tr><th>Product</th><th>Price</th><th>Quantity</th></tr><tr><td>Apple</td><td>$20</td><td>10</td></tr><tr><td>Orange</td><td>$10</td><td>15</td></tr></table>
Output :
2. Tabel dengan Border
Pada contoh ini, kita akan menambahkan elemen tabel dan mengatur atribut border dan cellpadding. Kita akan menggunakan atribut border dan mengatur lebar batas tabel menjadi 1 piksel. Untuk atribut cellpadding, kita akan menggunakan padding sebesar 5 piksel untuk konten di dalam setiap sel.
Contoh :
<table border="1" cellpadding="5"><tr><th>Product</th><th>Price</th><th>Quantity</th></tr><tr><td>Apple</td><td>$20</td><td>10</td></tr><tr><td>Orange</td><td>$10</td><td>15</td></tr></table>
Output :
Untuk yang menggunakan Styling Warna pada Tabel, akan menggunakan CSS di lain waktu.
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)