📊

Panduan Membuat Tabel dalam HTML

Apr 5, 2025

Catatan Kuliah: Cara Membuat Tabel pada Halaman HTML

Pengantar

  • Video ini membahas cara membuat tabel dalam HTML.
  • Tabel mirip dengan tabel di Microsoft Word, Excel, atau PowerPoint.

Struktur Tabel

Elemen Tabel

  • Baris (Row): Dikenal sebagai TR, diisi dengan data.
  • Kolom (Column): Dikenal sebagai TD, menampung konten data.
  • Sel (Cell): Merupakan bagian terkecil dari tabel yang bisa berisi data.
  • Header Tabel: Ditandai dengan TH, memberikan informasi tentang kolom.

Contoh Tabel Data Karyawan

  • Baris pertama: Budi, 35, Direktur
  • Baris kedua: Dewi, 28, Manajer
  • Baris ketiga: Rahmat, 22, Teknisi

Pembuatan Tabel

Tabel Pertama

  1. Buat tabel dengan tag <table>.
  2. Tambahkan baris dengan tag <tr>.
  3. Masukkan data dengan tag <td>.
  4. Tambahkan atribut border untuk menampilkan garis.

Tabel Kedua (Menambahkan Header)

  • Tambahkan header di baris pertama dengan tag <th>.
  • Struktur tabel: <table> <tr> <th>Nama</th> <th>Umur</th> <th>Jabatan</th> </tr> <tr> <td>Budi</td> <td>35</td> <td>Direktur</td> </tr> </table>

Elemen <thead> dan <tbody>

  • <thead> untuk bagian header tabel.
  • <tbody> untuk bagian konten tabel.
  • Penggunaan yang tepat membantu perangkat lunak dalam membaca struktur tabel.

Tabel Ketiga (Header Vertikal)

  • Menggunakan header vertikal di kolom pertama.
  • Contoh struktur: <table> <tr> <th>Nama</th> <th>Umur</th> </tr> <tr> <th>Budi</th> <td>35</td> </tr> </table>

Tabel Keempat (Dua Header)

  • Memperkenalkan dua header: horizontal dan vertikal.

Tabel Kelima (Menggunakan colspan)

  • colspan digunakan untuk menggabungkan beberapa kolom.
  • Contoh: <th colspan="2">Telepon</th>

Tabel Keenam (Menggunakan rowspan)

  • rowspan untuk menggabungkan beberapa baris.

Kesimpulan

  • Telah dipelajari: Struktur tabel, elemen yang digunakan, dan atribut colspan dan rowspan.
  • Pentingnya memahami struktur tabel untuk pengembangan web lebih lanjut.

Penutup

  • Jangan lupa subscribe untuk mendapatkan informasi terbaru.