Jenis-jenis List
HTML menyediakan 3 jenis list utama.
1. Ordered List (List Berurutan)
Menggunakan tag <ol> dan <li>:
<h3>Langkah Membuat Kopi</h3>
<ol>
<li>Panaskan air</li>
<li>Masukkan kopi ke dalam gelas</li>
<li>Tuang air panas</li>
<li>Aduk hingga merata</li>
<li>Tambahkan gula sesuai selera</li>
</ol>Atribut untuk Ordered List:
<!-- Mulai dari angka tertentu -->
<ol start="5">
<li>Item ke-5</li>
<li>Item ke-6</li>
</ol>
<!-- Tipe penomoran -->
<ol type="A"> <!-- A, B, C -->
<ol type="a"> <!-- a, b, c -->
<ol type="I"> <!-- I, II, III -->
<ol type="i"> <!-- i, ii, iii -->
<ol type="1"> <!-- 1, 2, 3 (default) -->2. Unordered List (List Tidak Berurutan)
Menggunakan tag <ul> dan <li>:
<h3>Daftar Belanja</h3>
<ul>
<li>Beras</li>
<li>Telur</li>
<li>Sayuran</li>
<li>Buah-buahan</li>
</ul>3. Description List (List Deskripsi)
Menggunakan tag <dl>, <dt> (term), dan <dd> (description):
<h3>Glossary</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, bahasa untuk membuat web</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, untuk styling web</dd>
<dt>JavaScript</dt>
<dd>Bahasa pemrograman untuk membuat web interaktif</dd>
</dl>Nested List (List Bersarang)
<h3>Struktur Website</h3>
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>PHP</li>
<li>Python</li>
<li>Node.js</li>
</ul>
</li>
<li>Database
<ul>
<li>MySQL</li>
<li>MongoDB</li>
</ul>
</li>
</ul>Tabel HTML
Tabel digunakan untuk menampilkan data dalam format baris dan kolom.
Struktur Dasar Tabel:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>Elemen Tabel:
<table>- Container tabel<tr>- Table Row (baris)<th>- Table Header (header kolom)<td>- Table Data (data/cell)
Contoh Tabel Sederhana:
<table border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Budi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Ani</td>
<td>23</td>
<td>Bandung</td>
</tr>
<tr>
<td>Citra</td>
<td>27</td>
<td>Surabaya</td>
</tr>
</table>Struktur Tabel Lengkap
<table>
<caption>Daftar Siswa Kelas 10A</caption>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Nilai</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andi</td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Rata-rata</td>
<td>87.5</td>
</tr>
</tfoot>
</table>Colspan dan Rowspan
Colspan (menggabungkan kolom):
<table border="1">
<tr>
<th colspan="2">Nama Lengkap</th>
<th>Umur</th>
</tr>
<tr>
<td>Nama Depan</td>
<td>Nama Belakang</td>
<td>25</td>
</tr>
</table>Rowspan (menggabungkan baris):
<table border="1">
<tr>
<td rowspan="2">Budi</td>
<td>Matematika</td>
<td>85</td>
</tr>
<tr>
<td>Fisika</td>
<td>90</td>
</tr>
</table>Contoh Lengkap
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>List dan Tabel</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Daftar Menu dan Harga</h1>
<h2>Kategori Makanan</h2>
<ul>
<li>Makanan Berat
<ul>
<li>Nasi Goreng</li>
<li>Mie Goreng</li>
<li>Nasi Uduk</li>
</ul>
</li>
<li>Makanan Ringan
<ul>
<li>Pisang Goreng</li>
<li>Tahu Isi</li>
<li>Bakwan</li>
</ul>
</li>
<li>Minuman
<ul>
<li>Teh</li>
<li>Kopi</li>
<li>Jus</li>
</ul>
</li>
</ul>
<h2>Daftar Harga</h2>
<table>
<caption>Menu Warung Sederhana</caption>
<thead>
<tr>
<th>No</th>
<th>Nama Menu</th>
<th>Kategori</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nasi Goreng</td>
<td>Makanan Berat</td>
<td>Rp 15.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>Makanan Berat</td>
<td>Rp 12.000</td>
</tr>
<tr>
<td>3</td>
<td>Teh Manis</td>
<td>Minuman</td>
<td>Rp 3.000</td>
</tr>
<tr>
<td>4</td>
<td>Kopi</td>
<td>Minuman</td>
<td>Rp 5.000</td>
</tr>
</tbody>
</table>
<h2>Jam Operasional</h2>
<table>
<tr>
<th>Hari</th>
<th>Jam Buka</th>
<th>Jam Tutup</th>
</tr>
<tr>
<td>Senin - Jumat</td>
<td>08:00</td>
<td>21:00</td>
</tr>
<tr>
<td>Sabtu - Minggu</td>
<td>09:00</td>
<td>22:00</td>
</tr>
</table>
</body>
</html>Latihan Artikel 4:
- Buat ordered list dengan langkah-langkah melakukan sesuatu
- Buat unordered list dengan nested list (minimal 2 level)
- Buat tabel dengan minimal 5 baris dan 4 kolom
- Gunakan colspan atau rowspan dalam tabel
- Tambahkan caption dan struktur thead, tbody, tfoot pada tabel
💬 0 Komentars
Belum Ada Komentar
Jadilah yang pertama membagikan pemikiran Anda!