Dalam pengembangan web, daftar (list) dan tabel (table) adalah elemen penting yang memungkinkan Anda untuk mengatur dan menampilkan informasi secara terstruktur. Dalam tutorial ini, kami akan membahas secara rinci tentang Daftar dan Tabel Pada HTMLdan cara membuat daftar (list) dan tabel (table) pada HTML, serta memberikan contoh penggunaannya.
Daftar (List) dalam HTML
Daftar atau list dalam HTML adalah cara yang efektif untuk mengatur dan menyajikan informasi dalam bentuk item yang terkait. Ada beberapa jenis list yang dapat digunakan dalam HTML, masing-masing memiliki tujuan dan penggunaan yang berbeda. Mari kita jelajahi lebih dalam tentang jenis list dalam HTML, atribut yang terkait, dan contoh penggunaannya.
Jenis List dalam HTML
1. Daftar Tak Terurut (<ul> – Unordered List)
Daftar tak terurut adalah jenis list yang mengelompokkan item tanpa urutan tertentu. Setiap item ditampilkan dengan simbol atau ikon yang seragam, seperti bulatan atau kotak kosong.
1 2 3 4 5 | <ul> <li>Item pertama</li> <li>Item kedua</li> <li>Item ketiga</li> </ul> |
2. Daftar Berurut (<ol> – Ordered List)
Daftar berurut adalah jenis list yang mengatur item dalam urutan tertentu dengan nomor atau huruf. Setiap item memiliki nomor atau huruf yang menunjukkan urutan.
1 2 3 4 5 | <ol> <li>Langkah 1</li> <li>Langkah 2</li> <li>Langkah 3</li> </ol> |
3. Daftar Definisi (<dl> – Definition List)
Daftar definisi adalah jenis list yang menghubungkan kata-kata dengan definisi atau penjelasan mereka. Setiap kata atau frasa didefinisikan menggunakan tag <dt> untuk kata dan <dd> untuk definisi.
1 2 3 4 5 6 | <dl> <dt>HTML</dt> <dd>Hypertext Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl> |
Atribut Penting untuk List
1. type (Hanya untuk <ol>)
Atribut type digunakan untuk mengubah jenis nomor pada daftar berurut. Nilai yang umum digunakan adalah "1" (nomor urut), "A" (huruf kapital), "a" (huruf kecil), "I" (angka Romawi kapital), dan "i" (angka Romawi kecil).
1 2 3 4 | <ol type="A"> <li>Item A</li> <li>Item B</li> </ol> |
2. start (Hanya untuk <ol>)
Atribut start menentukan nomor awal untuk daftar berurut. Misalnya, Anda dapat memulai nomor dari "5".
1 2 3 4 | <ol start="5"> <li>Item 5</li> <li>Item 6</li> </ol> |
Contoh Penggunaan List dalam HTML:
Untuk mengimplementasikan daftar (list) pada html, buatlah file dengan nama latihan_html_005.html dan masukkan teks html berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <title>Contoh List dalam HTML</title> </head> <body> <h1>Jenis-jenis List dalam HTML</h1> <h2>Daftar Tak Terurut</h2> <ul> <li>Buah-buahan</li> <li>Sayuran</li> <li>Produk Olahraga</li> </ul> <h2>Daftar Berurut</h2> <ol type="A"> <li>Langkah A</li> <li>Langkah B</li> </ol> <h2>Daftar Definisi</h2> <dl> <dt>HTML</dt> <dd>Hypertext Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl> </body> </html> |
Jika kode html di atas kita jalankan di browser, maka akan tampil seperti pada gambar berikut:
Daftar dalam HTML, baik itu daftar tak terurut (<ul>), daftar berurut (<ol>), atau daftar definisi (<dl>), memungkinkan Anda mengatur dan menyajikan informasi dengan lebih terstruktur. Dengan memahami jenis-jenis list dan atribut yang terkait, Anda dapat membuat konten yang lebih mudah dibaca dan dipahami oleh pengguna. Cobalah dengan gaya dan opsi yang berbeda untuk menciptakan tampilan yang sesuai dengan kebutuhan Anda.
Tabel dalam HTML
Tabel dalam HTML adalah alat yang kuat untuk menyusun dan menampilkan data secara terstruktur dalam bentuk baris dan kolom. Tabel memungkinkan Anda mengorganisir informasi dengan jelas dan memberikan tampilan yang rapi. Dalam tutorial ini, kita akan menjelajahi tabel dalam HTML dengan lebih mendalam, termasuk struktur, atribut, dan contoh penggunaannya.
Struktur Dasar Tabel dalam HTML
Tabel dalam HTML dibuat dengan menggunakan beberapa tag utama: <table>, <tr>, <th>, dan <td>. Berikut adalah struktur dasar dari tabel dalam HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table> <tr> <th>Kolom Header 1</th> <th>Kolom Header 2</th> </tr> <tr> <td>Data Baris 1, Kolom 1</td> <td>Data Baris 1, Kolom 2</td> </tr> <tr> <td>Data Baris 2, Kolom 1</td> <td>Data Baris 2, Kolom 2</td> </tr> </table> |
Keterangan:
<table>: Kontainer utama untuk tabel.<tr>: Representasi baris dalam tabel.<th>: Sel header dalam tabel (biasanya digunakan dalam baris pertama).<td>: Sel data dalam tabel.
Atribut Umum Tabel
1. border
Atribut border menentukan lebar garis tepi tabel. Nilai umum adalah "0" (tanpa garis tepi) atau "1" (dengan garis tepi).
1 2 3 | <table border="1"> <!-- Isi tabel --> </table> |
2. width dan height
Atribut width dan height digunakan untuk mengatur lebar dan tinggi tabel dalam piksel atau persentase.
1 2 3 | <table width="80%" height="300"> <!-- Isi tabel --> </table> |
Contoh Penggunaan Tabel dalam HTML
Untuk latihan membuat tabel pada HTML, buatlah file dengan nama latihan_html_006.html dan masukkan kode berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <title>Contoh Tabel dalam HTML</title> </head> <body> <h1>Tabel dalam HTML</h1> <p>Data Produk:</p> <table border="1" width="60%"> <tr> <th>Kode</th> <th>Nama Produk</th> <th>Harga</th> </tr> <tr> <td>P001</td> <td>Produk A</td> <td>Rp. 100.000</td> </tr> <tr> <td>P002</td> <td>Produk B</td> <td>Rp. 150.000</td> </tr> </table> </body> </html> |
Jika kode di atas kita jalankan di browser, maka hasilnya akan terlihat seperti pada gambar berikut ini:
Tabel dalam HTML adalah cara yang efektif untuk menyusun dan menampilkan data dalam bentuk yang terstruktur dan rapi. Dengan memahami struktur dasar tabel dan atribut yang terkait, Anda dapat membuat tampilan yang lebih terorganisir dan mudah dibaca oleh pengguna. Cobalah dengan opsi dan atribut yang berbeda untuk menciptakan tabel yang sesuai dengan kebutuhan Anda.
Tutorial lengkap html dapat anda lihat pada Index Tutorial HTML: Tingkat Dasar Hingga Tingkat Lanjut.