Belajar HTML Dasar #9: Table

• 1. Struktur Dasar Tabel
• 2. Menambahkan Judul Kolom dengan <th>
• 3. Atribut Penting dalam Tabel
  • Contoh colspan:
  • Contoh rowspan:
  • 4. Contoh Tabel Lengkap
• 5. Styling Tabel dengan CSS (Bonus)
• Kesimpulan

Halo teman-teman semuanya, di artikel ini, kita akan belajar tentang tabel dalam HTML. Tabel berguna banget untuk menampilkan data dalam bentuk baris dan kolom, misalnya daftar produk, jadwal pelajaran, data mahasiswa, dan lain-lain.

HTML menyediakan tag khusus untuk membuat struktur tabel, dan kita akan bahas satu per satu dengan contoh nyata.

1. Struktur Dasar Tabel

Tabel HTML dibuat menggunakan tag <table>, yang berisi baris <tr> dan kolom <td>.

Contoh sederhana:

<table border="1">
  <tr>
    <td>Nama</td>
    <td>Umur</td>
  </tr>
  <tr>
    <td>Ali</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Siti</td>
    <td>22</td>
  </tr>
</table>

Penjelasan:

• <table> - tag utama untuk membuat tabel
• <tr> (table row) - baris dalam tabel
• <td> (table data) - sel/kolom untuk data

2. Menambahkan Judul Kolom dengan <th>

Untuk bagian kepala atau judul kolom, kita gunakan tag <th> (table header).

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>20</td>
  </tr>
</table>

Biasanya <th> akan otomatis ditebalkan dan ditengah secara default oleh browser.

3. Atribut Penting dalam Tabel

• border - Menambahkan garis pada tabel.

• colspan - Menggabungkan beberapa kolom.

• rowspan - Menggabungkan beberapa baris.

• Contoh colspan:

  <table border="1">
    <tr>
      <th colspan="2">Data Siswa</th>
    </tr>
    <tr>
      <td>Nama</td>
      <td>Ali</td>
    </tr>
  </table>
  

• Contoh rowspan:

  <table border="1">
    <tr>
      <td rowspan="2">Ali</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Jakarta</td>
    </tr>
  </table>
  

4. Contoh Tabel Lengkap

<table border="1">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Jurusan</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Ali</td>
    <td>Teknik Informatika</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Siti</td>
    <td>Sistem Informasi</td>
  </tr>
</table>

5. Styling Tabel dengan CSS (Bonus)

Agar tabel terlihat lebih menarik, kita bisa menambahkan sedikit CSS:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

Kesimpulan

Dengan menggunakan tag <table>, <tr>, <td>, dan <th>, kita bisa menampilkan data dalam bentuk yang terstruktur dan mudah dibaca.

Di seri selanjutnya, kita akan membahas Multimedia di HTML, yaitu bagaimana menampilkan gambar, audio, dan video langsung di halaman web.

Terima Kasih