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.