Baik, kita lanjutkan materi pembelajaran dengan topik **Tabel** dan **Media (Audio/Video)** dalam HTML.
### **Tabel di HTML**
Tabel di HTML digunakan untuk menampilkan data yang terorganisir dalam baris dan kolom. Elemen-elemen utama yang digunakan untuk membuat tabel adalah:
- **`<table>`**: Elemen utama untuk membuat tabel.
- **`<tr>`** (Table Row): Membuat baris dalam tabel.
- **`<th>`** (Table Header): Menentukan sel header di dalam tabel (biasanya teks tebal).
- **`<td>`** (Table Data): Menentukan sel data di dalam tabel.
#### Contoh Tabel Sederhana:
```html
<table border="1">
<thead>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Surabaya</td>
</tr>
</tbody>
</table>
#### Elemen Tambahan Tabel:
- **`<thead>`**: Mengelompokkan baris header tabel.
- **`<tbody>`**: Mengelompokkan baris badan tabel.
- **`<tfoot>`**: Mengelompokkan baris footer tabel (sering digunakan untuk total atau informasi tambahan).
### **Contoh Tabel Lebih Kompleks:**
html
<table border="1">
<caption>Daftar Mahasiswa</caption>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Jurusan</th>
<th>Nilai</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmad</td>
<td>Informatika</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>Ekonomi</td>
<td>85</td>
</tr>
<tr>
<td>3</td>
<td>Citra</td>
<td>Teknik Sipil</td>
<td>88</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Mahasiswa</td>
<td>3</td>
</tr>
</tfoot>
</table>
### **Penjelasan:**
- **`<caption>`**: Memberikan judul untuk tabel.
- **`<thead>`, `<tbody>`, `<tfoot>`**: Membagi tabel menjadi bagian-bagian yang terstruktur dengan jelas.
### **Media: Audio dan Video di HTML**
HTML menyediakan cara mudah untuk menyisipkan media seperti audio dan video langsung ke halaman web menggunakan elemen **`<audio>`** dan **`<video>`**.
#### **Elemen `<audio>`**
Elemen `<audio>` digunakan untuk menambahkan audio ke halaman web. Audio dapat dijalankan secara otomatis atau dengan kontrol pemutar.
##### Contoh Penggunaan Audio:
html
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
#### Atribut-Atribut `<audio>`:
- **`controls`**: Menampilkan kontrol pemutar audio (play, pause, volume, dll).
- **`autoplay`**: Audio akan otomatis diputar ketika halaman dimuat.
- **`loop`**: Audio akan diputar berulang-ulang.
- **`muted`**: Audio akan dimulai dalam keadaan mute.
#### **Elemen `<video>`**
Elemen `<video>` digunakan untuk menambahkan video ke halaman web. Seperti audio, video juga dapat memiliki kontrol untuk memutar, menghentikan, dan mengatur volume.
##### Contoh Penggunaan Video:
html
<video controls width="500">
<source src="video-file.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
#### Atribut-Atribut `<video>`:
- **`controls`**: Menampilkan kontrol video (play, pause, volume, dll).
- **`autoplay`**: Video akan otomatis diputar ketika halaman dimuat.
- **`loop`**: Video akan diputar berulang-ulang.
- **`muted`**: Video akan dimulai dalam keadaan mute.
- **`poster`**: Gambar yang akan muncul sebagai thumbnail sebelum video diputar.
### **Contoh Kode Lengkap dengan Tabel dan Media:**
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Tabel dan Media</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<h1>Contoh Penggunaan Tabel dan Media di HTML</h1>
<!-- Tabel -->
<h2>Daftar Produk</h2>
<table>
<thead>
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Kategori</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Produk A</td>
<td>Elektronik</td>
<td>Rp 2.000.000</td>
</tr>
<tr>
<td>2</td>
<td>Produk B</td>
<td>Furnitur</td>
<td>Rp 1.500.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Produk</td>
<td>2</td>
</tr>
</tfoot>
</table>
<!-- Audio -->
<h2>Contoh Audio</h2>
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
Browser Anda tidak mendukung elemen audio.
</audio>
<!-- Video -->
<h2>Contoh Video</h2>
<video controls width="600">
<source src="video-file.mp4" type="video/mp4">
Browser Anda tidak mendukung elemen video.
</video>
</body>
</html>
### Penjelasan Kode:
1. **Tabel**: Digunakan untuk menampilkan daftar produk dengan kolom "No", "Nama Produk", "Kategori", dan "Harga".
2. **Audio**: Menyisipkan file audio dengan kontrol pemutar.
3. **Video**: Menyisipkan video dengan lebar yang ditentukan dan kontrol pemutar.
Dengan ini, kamu telah mempelajari bagaimana menggunakan tabel untuk menampilkan data terstruktur dan bagaimana menyisipkan media (audio dan video) di HTML.