Cara membuat Tabel menggunakan HTML

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 :

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 😀😊😘👌👍 :)