Beranda
HTML

Cara Membuat Tabel di HTML

Tabel dalam HTML digunakan untuk menampilkan data dalam bentuk baris dan kolom. Ini sangat berguna jika kalian ingin menyusun data seperti jadwal
Kode Violet
Cara Membuat Tabel di HTML

Hai teman-teman, apakah kalian sedang belajar HTML dan penasaran bagaimana cara membuat tabel di HTML? Nah, kesempatan ini kodeviolet.com akan membahas tentang cara mudah membuat tabel di HTML lengkap dengan struktur, tag penting, dan contohnya yang bisa langsung kalian praktikkan!

Pengertian Tabel di HTML

Tabel dalam HTML digunakan untuk menampilkan data dalam bentuk baris dan kolom. Ini sangat berguna jika kalian ingin menyusun data seperti jadwal, daftar barang, harga produk, dan sebagainya.

Tabel HTML dibentuk menggunakan beberapa tag utama, yaitu:

Tag HTML Fungsi
<table> Tag utama pembungkus tabel
<tr> Table row / baris tabel
<th> Table header / judul kolom
<td> Table data / isi sel

Struktur Dasar Tabel HTML

Berikut struktur dasar penulisan tabel:

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Rina</td>
    <td>22</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>25</td>
  </tr>
</table>

Penjelasan:

  • <table border="1"> membuat tabel dengan garis tepi.
  • <tr> membuat satu baris.
  • <th> membuat header (judul kolom) dengan teks tebal dan rata tengah.
  • <td> membuat isi dari sel tabel.

Contoh Tabel HTML Lengkap dengan Gambar

Berikut adalah contoh lengkap yang juga menampilkan gambar di dalam tabel:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Tabel HTML</title>
</head>
<body>
  <h2>Data Produk</h2>
  <table border="1">
    <tr>
      <th>Gambar</th>
      <th>Nama Produk</th>
      <th>Harga</th>
    </tr>
    <tr>
      <td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTSba5ugtraL3A2W5jEsl0tNefBjx4iotzq8eWbhrEAxP8sEHTlYR_J8dViTM2BfT-x2CnSk-WMYp7jm_tpF6a8NNP7jQnrNnLRwqzkyLMStS7oyj9qpDZcSELhBknEh6IUgjbepLYkgGe0kpz1ZEgnpMHicuVCvYgFTlz-N19Ss6pRrm3tgSYa7s/s16000-rw/Cara%20Membuat%20Tabel%20di%20HTML.jpg" alt="Gambar Produk" width="100"></td>
      <td>Produk A</td>
      <td>Rp50.000</td>
    </tr>
  </table>
</body>
</html>

Pada contoh di atas, gambar ditampilkan dalam kolom pertama, lalu nama dan harga produk di kolom berikutnya. Jangan lupa untuk selalu menambahkan atribut alt pada gambar agar SEO-nya bagus!

Tips Tambahan

  • Gunakan atribut border, cellpadding, dan cellspacing untuk mengatur tampilan tabel.
  • Kalian bisa juga menggunakan CSS untuk mempercantik tampilan tabel.
  • Selalu uji hasil HTML kalian di browser!

Kesimpulan

Itulah tadi artikel dari kodeviolet.com tentang cara membuat tabel di HTML. Kalian bisa mulai dari struktur sederhana hingga menambahkan gambar. Semoga artikel ini bermanfaat dan selamat mencoba membuat tabel kalian sendiri!

Posting Komentar