Daftar dan Tabel

Oleh Ardhana Pragota & Gendis Widodari

Melalui kelas ini, kamu diajak untuk:

Memahami tag yang digunakan dalam membuat elemen daftar dan tabel.
Membuat daftar dan tabel di HTML5.

Tentang Daftar

Daftar adalah wadah yang berisi satu set item (teks) yang saling berkaitan. HTML5 memiliki dua jenis daftar, ordered list dan unordered list.

Mari pelajari keduanya.

Ordered List

Ordered list atau daftar yang berurutan adalah kumpulan item (teks) yang dimulai dengan tag awal <ol> dan diakhiri dengan </ol>. Daftar ini akan menampilkan angka untuk mengurutkan setiap item.

Unordered List

Unordered list atau daftar tidak berurutan menggunakan tag awal <ul> dan diakhiri dengan </ul>. Daftar ini menampilkan bullet point di layar.

Membuat Daftar

Setelah mengetahui dua jenis elemen daftar, langkah selanjutnya adalah membuat daftar. Komponen daftar terdiri dari elemen utama (<ol> atau <ul>) dan elemen set item di dalam elemen utama yang direpresentasikan dengan tag <li>.

Ordered List

<ol>
        <li>Teks pertama</li>
        <li>Teks kedua</li>
        <li>Teks ketiga</li>
</ol>

Unordered List

<ul>
        <li>Teks pertama</li>
        <li>Teks kedua</li>
        <li>Teks ketiga</li>
</ul>

Tentang Tabel

Untuk memahami tabel dalam HTML5, ada beberapa komponen yang harus kita ketahui.

Elemen tabel utama yang direpresentasikan oleh tag <table>
Elemen baris yang direpresentasikan oleh tag <tr>
Elemen baris judul yang direpresentasikan oleh tag <th>
Elemen data yang direpresentasikan oleh tag <td>

Membuat Tabel

Geser gambar-gambar di bawah untuk mengikuti serangkaian langkah membuat tabel.

Langkah 1: Memasukkan elemen tabel utama. Jangan lupa sisakan ruang di tengah agar dapat diisi oleh elemen-elemen lainnya.

<body> 
    <table>
            
    </table>
</body>

Langkah 2: isi elemen baris sesuai dengan jumlah yang diinginkan dengan tag <tr>

<body> 
    <table>
        <tr>

        </tr>

        <tr>

        </tr>

        <tr>
            
        </tr>     
    </table>
</body>

Langkah 23: Saatnya mengisi konten di dalam tabel. Gunakan <th>untuk baris pertama sebagai judul, dan <td> untuk baris data-data di bawahnya.

<body> 
    <table>
        <tr>
            <th>Hari</th>
            <th>Aktivitas</th>
            <th>Keterangan</th>
        </tr>

        <tr>
            <td>Senin</td>
            <td>Berenang</td>
            <td>Selesai</td>
        </tr>

        <tr>
            <td>Selasa</td>
            <td>Memancing</td>
            <td>Belum Selesai</td>
        </tr>  
    </table>
</body>

Selayang Pandang

Baris dan kolom memiliki tag yang berbeda.
Tabel di HTML hanya memiliki bentuk dasar. Untuk styling dapat menggunakan CSS.

Kuis

Apakah tag induk dari tabel HTML

Selamat, Anda telah menyelesaikan pelajaran ini

Klik untuk menyelesaikan