11. Pengenalan Tabel dalam HTML | ✓ FR-ACADEMY Kursus Komputer Lampung

Dalam HTML, tabel digunakan untuk menyusun data dalam bentuk baris dan kolom, sehingga informasi lebih terstruktur dan mudah dibaca. Elemen utama yang digunakan untuk membuat tabel adalah <table>, dengan baris didefinisikan menggunakan <tr> (table row) dan setiap sel dalam tabel didefinisikan dengan <td> (table data). Jika ingin menambahkan judul atau header dalam tabel, kita dapat menggunakan <th> (table header), yang secara default akan ditampilkan dalam teks tebal dan rata tengah.

Tabel dalam HTML juga bisa diperindah menggunakan CSS untuk mengubah tampilan, seperti memberikan warna latar belakang, garis batas (border), padding, dan margin agar tabel lebih rapi dan menarik. Tabel sering digunakan dalam berbagai keperluan, seperti menampilkan data keuangan, jadwal, laporan, atau daftar harga. Berikut adalah beberapa contoh penggunaan tabel dalam HTML.

Contoh 1: Tabel Sederhana

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Ani</td>
    <td>25</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>30</td>
    <td>Bandung</td>
  </tr>
</table>

Penjelasan: Tabel ini memiliki tiga kolom (Nama, Umur, Kota) dan dua baris data.

Contoh 2: Tabel dengan Penggabungan Sel (`colspan`)

<table border="1">
  <tr>
    <th colspan="2">Informasi</th>
  </tr>
  <tr>
    <td>Nama</td>
    <td>Rina</td>
  </tr>
</table>

Penjelasan: colspan="2" digunakan untuk menggabungkan dua kolom dalam satu header.

Contoh 3: Tabel dengan Penggabungan Baris (`rowspan`)

<table border="1">
  <tr>
    <th>Hari</th>
    <th>Jadwal</th>
  </tr>
  <tr>
    <td rowspan="2">Senin</td>
    <td>Matematika</td>
  </tr>
  <tr>
    <td>Fisika</td>
  </tr>
</table>

Penjelasan: rowspan="2" digunakan untuk menggabungkan dua baris dalam satu sel.

Contoh 4: Tabel dengan Header di Beberapa Kolom

<table border="1">
  <tr>
    <th>Negara</th>
    <th>Ibukota</th>
  </tr>
  <tr>
    <td>Indonesia</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>Malaysia</td>
    <td>Kuala Lumpur</td>
  </tr>
</table>

Penjelasan: Tabel ini memiliki dua kolom: Negara dan Ibukota.

Contoh 5: Tabel dengan CSS (Styled Table)

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 10px;
      text-align: center;
    }
    th {
      background-color: #f2f2f2;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Ani</td>
    <td>10A</td>
    <td>90</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Budi</td>
    <td>10B</td>
    <td>85</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Citra</td>
    <td>10C</td>
    <td>88</td>
  </tr>
</table>

</body>
</html>

Penjelasan:

Tabel memiliki border dan padding agar lebih rapi.
Header (<th>) memiliki warna latar belakang abu-abu.
Baris genap diberikan warna berbeda untuk tampilan yang lebih menarik.

Dengan memahami konsep tabel di HTML, kita dapat menyusun data dengan lebih terstruktur dan menarik bagi pengguna.

Jumlah Pembaca 54