1. Pengertian Tabel dalam Website

Tabel dalam website adalah struktur data berbentuk baris dan kolom yang digunakan untuk menampilkan informasi secara terorganisir.

Contoh penggunaan tabel:

Data mahasiswa
Jadwal kuliah
Nilai akademik
Daftar produk
Laporan keuangan

Analogi: Tabel di HTML seperti tabel di Excel atau Word.

2. Fungsi Tabel

Tabel digunakan untuk:

Menyajikan data numerik & teks
Membuat laporan terstruktur
Menampilkan data hasil query database
Membandingkan data

3. Struktur Dasar Tabel HTML

Tag utama tabel:

Tag	Fungsi
`<table>`	Membuat tabel
`<tr>`	Baris (table row)
`<td>`	Kolom/data (table data)
`<th>`	Header/judul kolom

4. Contoh Tabel Paling Sederhana

<table border="1">
  <tr>
    <th>NIM</th>
    <th>Nama</th>
    <th>Prodi</th>
  </tr>
  <tr>
    <td>2023001</td>
    <td>Budi</td>
    <td>Informatika</td>
  </tr>
  <tr>
    <td>2023002</td>
    <td>Siti</td>
    <td>Sistem Informasi</td>
  </tr>
</table>

Hasil:

NIM	Nama	Prodi
2023001	Budi	Informatika
2023002	Siti	Sistem Informasi

5. Atribut Penting pada Tabel

a. Border

<table border="1">

b. Width & Height

<table width="80%" height="200">

c. Align

<table align="center">

6. Menggabungkan Kolom (colspan)

<tr>
  <th colspan="3">DATA MAHASISWA</th>
</tr>

Artinya: 1 sel menempati 3 kolom.

7. Menggabungkan Baris (rowspan)

<tr>
  <td rowspan="2">Informatika</td>
  <td>Budi</td>
</tr>
<tr>
  <td>Siti</td>
</tr>

8. Struktur Profesional: thead, tbody, tfoot

<table border="1">
  <thead>
    <tr>
      <th>NIM</th>
      <th>Nama</th>
      <th>Nilai</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Ani</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Rata-rata</td>
      <td>85</td>
    </tr>
  </tfoot>
</table>

Keuntungan:

Struktur rapi
Mudah dibaca mesin (SEO & accessibility)
Profesional untuk data besar

9. Styling Tabel dengan CSS (Modern)

HTML modern tidak disarankan pakai border atribut, tapi CSS.

Contoh CSS Table

<style>
table {
  width: 80%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

th {
  background-color: #2c3e50;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

10. Contoh Tabel Realistis (Studi Kasus Kampus)

Data Nilai Mahasiswa

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>NIM</th>
      <th>Nama</th>
      <th>Mata Kuliah</th>
      <th>Nilai</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2023001</td>
      <td>Budi</td>
      <td>Web Fundamental</td>
      <td>A</td>
    </tr>
  </tbody>
</table>