Tutorial Cara Membuat Tabel Sederhana Pada HTML

0
37
Tutorial Cara Membuat Tabel Sederhana Pada HTML
Tutorial Cara Membuat Tabel Sederhana Pada HTML

Tabel digunakan dalam dokumen HTML (halaman web) untuk menyajikan data tabular. Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Mari simak cara membuat tabel sederhana pada HTML.

Menggunakan Tabel

  • Tabel didefinisikan menggunakan elemen <table>, dan berisi sejumlah sel tabel (<td>, untuk “data tabel”) yang disusun dalam baris tabel (<tr>). Markup (kode HTML) untuk tabel selalu didasarkan pada baris, tidak pernah kolom.
  • Sel tabel yang bertindak sebagai tajuk kolom atau tajuk baris harus menggunakan elemen <th> (tajuk tabel).
  • Sel tabel dapat digabungkan menggunakan atribut colspan dan rowspan.
  • Tabel dapat dipecah menjadi beberapa bagian menggunakan elemen-elemen berikut:
    <thead> – Header tabel
    <tbody> – Badan tabel
    <tfoot> – Footer meja
  • Teks dapat ditambahkan ke tabel menggunakan elemen <caption>.

Kalian dapat menggunakan <col> dan <colgroup> untuk menentukan kolom tabel untuk penataan. Namun, ada sejumlah batasan dengan praktik ini.

Baca juga:   10 Website Belajar Coding Gratis

Contoh Kode Tabel: Tabel Sederhana

<table>
<tr>
<th> Name </th>
<th> Warna Favorit </th>
</tr>
<tr>
<td> Bob </td>
<td> Yellow </td>
</tr>
<tr>
<td> Michelle </td>
<td> Ungu </td>
</tr>
</table>
Contoh tabel sederhana
Contoh tabel sederhana

Contoh Kode Tabel: Tabel Kompleks

<table>
<caption>A complex table</caption>
<thead>
<tr>
<th colspan="3">Invoice #123456789</th>
<th>14 January 2025
</tr> 
<tr>
<td colspan="2">
<strong>Pay to:</strong><br>
Acme Billing Co.<br>
123 Main St.<br>
Cityville, NA 12345
</td>
<td colspan="2">
<strong>Customer:</strong><br>
John Smith<br> 321 Willow Way<br>
Southeast Northwestershire, MA 54321
</td>
</tr>
</thead>
<tbody>
<tr> 
<th>Name / Description</th>
<th>Qty.</th>
<th>@</th>
<th>Cost</th>
</tr>
<tr> 
<td>Paperclips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr>
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>
</tbody>
<tfoot>
<tr> 
<th colspan="3">Subtotal</th>
<td> 110.00</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td> 8% </td> <td>8.80</td>
</tr>
<tr>
<th colspan="3">Grand Total</th>
<td>$ 118.80</td>
</tr>
</tfoot>
</table>
contoh tabel sederhana yang kompleks
contoh tabel sederhana yang kompleks

Tentang Tata Letak Berbasis Tabel

Sudah umum di awal-awal web untuk menggunakan tabel sebagai perangkat tata letak. Sebelum munculnya browser berbasis standar modern, ini adalah cara termudah untuk memastikan bahwa elemen halaman diatur dengan benar di layar.

Pola desain ini sekarang dianggap sangat buruk. Ini buruk untuk pengalaman pengguna, buruk untuk SEO, dan buruk bagi pengembang yang harus memelihara halaman.

Kalian tidak boleh menggunakan tata letak berbasis tabel dalam kondisi apa pun.

Baca juga:   Alasan Kenapa Lebih Baik Install Windows Lewat BIOS Ketimbang Desktop

Namun, itu tidak berarti Anda harus menghindari tabel-tabel harus digunakan kapan pun Anda perlu menyajikan informasi dalam format tabel.

Loading...
Loading...

LEAVE A REPLY

Please enter your comment!
Please enter your name here