Modul 2.

HTML5: Table dan List

A. Pokok Bahasan
1. Table HTML: Struktur tabel, header, colspan, rowspan, border, dan spasing
2. List HTML: List, nested list, mengganti karakter list

B. Tujuan Pembelajaran
1. Mampu menjelaskan dan mengimplementasikan tabel HTML
2. Mampu menjelaskan dan mengimplementasikan list HTML

C. Waktu
2 (2 x 60 menit)

D. Landasan Teori
Dalam membuat halaman sebuah website kadangkala dibutuhkan penggunaan tabel
dan list. Tabel dan list dibuat sesuai dengan kebutuhan yang akan disajikan di dalam
sebuah halaman web. Seperti halnya membuat tabel daftar mahasiswa, tabel daftar
penduduk dan lain sebagainya. Adapun list bisa digunakan dalam menyajikan resep
masakan, daftar jenis barang yang akan dijual dan lain-lain

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
E. Praktikum

Tabel HTML
Tabel sering dijumpai pada halaman website. Tabel HTML didefinisikan
menggunakan tag <table>. Tiga buah tag yang dapat dipergunakan untuk membuat
tabel adalah <table>, <tr> dan <td>.

1. Struktur Tabel

Praktik
1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file
01_NIM_tabel.html selanjutnya bukalah dengan browser dan amati bagaimana
hasilnya.

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
2. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file
01_NIM_tabel1.html selanjutnya bukalah dengan browser dan amati bagaimana
hasilnya.

2. Tabel Header
Dalam membuat tabel biasa dijumpai judul tabel atau header. Judul tabel dapat
didefinisikan dengan tag <th> untuk menggantikan tag <td> yang digunakan untuk
mewakili sel data aktual (penting). Judul tabel umumnya terletak dibagian teratas
tabel. Secara default judul tabel yang didefiniskan menggunakan tag <th> akan
terletak ditengah dan tercetak tebal.

Praktik
1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file
02_NIM_tabelheader.html selanjutnya bukalah dengan browser dan amati
bagaimana hasilnya.

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
2. Dari dokumen HTML sebelumnya tambahkan header tabel sehingga halaman
tampilan seperti pada contoh gambar. Simpan dengan nama file
02_NIM_tabelheader1.html kemudian amati hasilnya pada web browser.

3. Colspan
Atribut colspan digunakan untuk memperpanjang sebuah sel pada tabel.

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file
03_NIM_colspan.html selanjutnya bukalah dengan browser dan amati bagaimana
hasilnya.

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
2. Dari hasil percobaan sebelumnya, buatlah header Nama agar dapat digunakan
sebagai header pada kolom ke-2 dan ke-3. Tambahkan atribut colspan sebagai berikut:
<th colspan="2">Nama</th>. Simpan dengan nama file 03_NIM_colspan1.html
selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

4. Rowspan
Atribut rowspan digunakan untuk merentangkan ke bawah sebuah sel pada tabel agar
tingginya setara dengan beberapa baris.

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file
04_NIM_rowspan.html selanjutnya bukalah dengan browser dan amati bagaimana
hasilnya.

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
2. Dari hasil percobaan sebelumnya, gabungkan sel yang memiliki nilai yang sama
Desain Web dan Pemrograman Web. Tambahkan atribut rowspan sebagai berikut: <td
rowspan="2">Desain Web</td> dan <td rowspan="2">Pemrograman Web</td>.
Simpan dengan nama file 04_NIM_rowspan1.html selanjutnya bukalah dengan
browser dan amati bagaimana hasilnya.

3. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file
04_NIM_rowspan2.html selanjutnya bukalah dengan browser dan amati bagaimana
hasilnya.

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
5. Border dan Spasing
Tampilan border pada tabel dapat kita rubah supaya menghasilkan garis yang lebih
tegas dengan mereset stylenya. Atau jika belum ada tag <style> dalam kode HTML,
tambahkan didalam <header> tepatnya dibawah <title>.

1. Tambahkan kode berikut:

<style>
table {
border-spacing: 0;
border-collapse: collapse;
}
</style>

Letakkan didalam <header> tepat dibawah <title>. Simpan dengan nama file
05_NIM_borderspacing.html selanjutnya bukalah dengan browser dan amati
bagaimana hasilnya.

List HTML

1. List
List/daftar pada HTML terdapat 2 jenis, yaitu ordered list dan unordered list. Ordered
list adalah list yang menggunakan urutan karakter seperti angka atau huruf, sedangkan
unordered list adalah list yang menggunakan simbol yang sama untuk setiap poin
listnya.

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
Perbedaan dari keduanya terletak pada tag pembuka dan penutupnya. Tag pada
ordered list menggunakan tag <ol> dan unordered list menggunakan tag <ul>. Setiap
poin daftar ditulis di dalam elemen <li>.

Untuk menampilkan susunan ordered list sebagai berikut:

1. daftar satu

2. daftar dua

3. daftar tiga

Dapat menggunakan:

<ol>
<li>daftar satu</li>
<li>daftar dua</li>
<li>daftar tiga</li>
</ol>

Sedangkan untuk menampilkan:

● daftar satu
● daftar dua
● daftar tiga

Dapat menggunakan:

<ul>
<li>daftar satu</li>
<li>daftar dua</li>
<li>daftar tiga</li>
</ul>

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file
06_NIM_list.html selanjutnya bukalah dengan browser dan amati bagaimana
hasilnya.

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
2. Modifikasilah dokumen HTML seperti pada contoh menggunakan ordered list <ol>
dan unordered list <ul> kemudian Setiap poin daftar ditulis di dalam elemen <li>.
Simpan dengan nama file 06_NIM_list2.html selanjutnya bukalah dengan browser
dan amati bagaimana hasilnya.

2. Nested List
Nested List dapat digunakan untuk membuat list di dalam list atau bisa diartikan
sebagai subpoint. Contoh kode yang mengimplementasikan nested list adalah sebagai
berikut:

<ol>
<li>
daftar satu
<ul>
<li>subdaftar pertama</li>
<li>subdaftar kedua</li>
<li>subdaftar ketiga</li>
</ul>
</li>
<li>daftar dua</li>
<li>daftar tiga</li>
</ol>

Tampilan dari kode di atas adalah sebagai berikut:

1. daftar satu
● subdaftar pertama
● subdaftar kedua
● subdaftar ketiga
2. daftar dua
3. daftar tiga

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file
07_NIM_nestedlist.html selanjutnya bukalah dengan browser dan amati bagaimana
hasilnya.

2. Gantilah setiap <h2> pada dokumen menjadi poin list, sehingga setiap list yang ada
di bawah masing-masing <h2> menjadi sub list di atasnya. Simpan dengan nama file
07_NIM_nestedlist1.html selanjutnya bukalah dengan browser dan amati bagaimana
hasilnya.

3. Mengganti Karakter List

Tipe Ordered List

Pada ordered list kita dapat menggunakan tidak hanya list angka saja (1,2,3,dst) tapi
juga huruf (a,b,c,dst) dan angka romawi (I,II,III,dst). Untuk mengubah tipe ordered
list, kita gunakan atribut di dalam tag <ol>.
Contohnya:

<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
Contoh kode di atas akan menampilkan list seperti ini:

1. List Pertama
2. List Kedua
3. List Ketiga

Adapun tipe list style yang dapat kita gunakan diantaranya:

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file
08_NIM_karakterlist.html selanjutnya bukalah dengan browser dan amati
bagaimana hasilnya.

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
2. Gantilah list utama menggunakan ordered list dengan angka romawi kapital.
Jalankan kode dan lihat perubahannya. Gantilah setiap sublist sehingga
masing-masing menggunakan list style tipe kotak, lingkaran dan tanpa simbol.
Simpan dengan nama file 08_NIM_karakterlist1.html selanjutnya bukalah dengan
browser dan amati bagaimana hasilnya.

F. Laporan Praktikum
Buatlah laporan praktikum dari semua praktik yang telah dikerjakan.

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B
Referensi

https://www.w3schools.com/html/default.asp
https://www.codepolitan.com/interactive-coding/html

Ovide Decroly Wisnu Ardhi

Praktikum Desain Web
Modul 2 - HTML5 B