Pembuatan List dan Tabel HTML
Cara Membuat List dan Table HTML
List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penilisan list menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu ordered list dan unordered list.
Elemen list HTML
HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang bisa dibuat di HTML:
1.Ordered List adalah list yang terurut.
2.Unordered List adalah list yang tak terurut.
3.Descriptiona List adalah list yang berisi definisi.
1. Ordered List di HTML
Ordered list dibuat dengan tag <ol>. Lalu di dalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. Item dibuat dengan tag <li> (list item).
contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Buah favorit</h1>
<ol>
<li>Apel</li>
<li>Durian</li>
<li>melon</li>
</ol>
</body>
</html>
List diatas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.
Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III.
Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa diberikan:
- a untuk alfabet a, b, c, dan seterusnya.
- A untuk alfabet A, B, C, dan seterusnya.
- i untuk angka romwari i, ii, iii, dan seterusnya.
- I untuk angka romwari I, II, III, dan seterusnya.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>List dengan type alfabet</h3>
<ol type='a'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type alfabet kapital (huruf besar)</h3>
<ol type='A'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type romawi</h3>
<ol type='i'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type romawi kapital</h3>
<ol type='I'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
</body>
</html>
2.Unordered List di HTML
Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Unordered list</h1>
<ul>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
</body>
</html>
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut type.
Berikut ini nilai yang bisa diberikan untuk atribut type:
- square untuk simbol persegi.
- disc (default) untuk simbol lingkaran disc.
- none tidak memakai simbol.
- circle untuk simbol lingkaran.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:</h1>
<ul type="square">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
<h1>Framework untuk dipelajari:</h1>
<ul type="circle">
<li>Vuejs</li>
<li>Svelte</li>
<li>Reactjs</li>
</ul>
<h1>Tools untuk dipelajari:</h1>
<ul type="none">
<li>Gulp</li>
<li>NPM</li>
<li>Js Lint</li>
</ul>
<h1>Pelajari juga:</h1>
<ul type="disc">
<li>JSON</li>
<li>XML</li>
<li>Markdown</li>
</ul>
</body>
</html>
3. Description List di HTML
Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.
Ada tiga tag yang digunakan untuk membuat description list:
- <dl> (description list) tag untuk memulai description list.
- <dt> (description term) tag untuk membuat kata yang akan dideskripsikan.
- <dd> (description description) tag untuk membuat penjelasan dari kata.
Format penulisannya seperti ini:
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Daftar istilah:</h1>
<dl>
<dt>Kopi</dt>
<dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak
sampai gosong.</dd>
<dt>Kopi Black Magic</dt>
<dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
<dt>White Coffee</dt>
<dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
<dt>Kopi++</dt>
<dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
</dl>
</body>
</html>
List di dalam List (Nested List)
List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.
Caranya, list yang di dalam ditulis di dalam tag <li>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Distro Linux dan Keluarganya</h1>
<ol>
<li>Debian
<ul>
<li>Ubuntu</li>
<li>Mint</li>
<li>elementaryOS</li>
</ul>
</li>
<li>RedHat
<ul>
<li>Fedora</li>
</ul>
</li>
<li>Slackware</li>
</ol>
</body>
</html>
Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table> untuk membuat table, <tr> untuk membuat baris dan <td> untuk membuat kolom. Tag yang terlibat dalam pembuatan table pada HTML.
- <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik.
- <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML.
- <td> atau dikenal dengan table data merupakan tag yang digunakan untuk membuat kolom dalam baris dan untuk menampilkan data dalam table.
- <th> untuk membuat table head atau bagian kepala pada table.
Tabel terdiri dari 4 unsur utama:
- Baris
- Kolom
- Sel
- Garis
Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
- Tag <table> untuk membungkus tabelnya.
- Tag <thead> untuk membungkus bagian kepala tabel.
- Tag <tbody> untuk membungkus bagian body dari tabel.
- Tag <tr> (tabel row) untuk membuat baris.
- Tag <td> (table data) untuk membuat sel.
- Tag <th> (table head) untuk membuat judul pada header.
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.
Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag <th> ….. </th>
Atribut Elemen Tabel
- Width =panjang(lebar table, pixel atau persen)
- Height =panjang(tinggi table, pixel atau persen)
- Border =pixel(tebal garis tepi)
- Cellspacing =pixel(spasi antar sel)
- Cellpadding =pixel(spasi di dalam sel)
- Align =[left|center|right](perataan table)
- Bgcolor =warna(warna latar belakang table)
- Align =[left|center|right](perataan sebaris sel secara horizontal)
- Valign =[top|middle|bottom](perataaan sebaris sel secara vertical)
- Bgcolor =warna(warna latar belakang baris)
Atribut Tabel Data
- Align =[left|center|right](perataan horizontal)
- Width =[top|middle|bottom](perataan vertical)
- Height =pixel(tinggi sel, pixel atau persen)
- Bgcolor =warna(warna latar belakang sel)
Menambah Warna Warna pada Sel dan Baris
Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut "bgcolor" di dalam tag <td> (untuk sel) atau <tr> (untuk baris).
Menggabungkan Sel Tabel
Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Untuk menggabungkan sel tabel, maka Tabel Atribut Data yang digunakan adalah sebagai berikut
- Rowspan =angka(baris yang di span oleh sel)
- Colspan =angka(kolom yang di span oleh sel)
Jadi untuk menggabungkan 4 baris adalah :
<td rowspan=4> …….</td>
Sedangkan untuk menggabungkan 4 kolom adalah :
<th colspan=4> …….</th>
Berikut contoh yang saya buat:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Membuat Table HTML</title>
</head>
<body>
<h3 align="center">JADWAL PELAJARAN XII MULTIMEDIA 2</h3>
<table border="1" align="center">
<tr bgcolor="green">
<th rowspan="2" width="50px">Jam</th>
<th colspan="5">Hari</th>
</tr>
<tr bgcolor="yellow">
<th width="150px">Senin</th>
<th width="150px">Selasa</th>
<th width="150px">Rabu</th>
<th width="150px">Kamis</th>
<th width="150px">Jum'at</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">PKKMM</td>
<td align="center">DMI</td>
<td align="center">DMI</td>
<td align="center">DMI</td>
<td align="center">PKKDKV</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">PKKMM</td>
<td align="center">DMI</td>
<td align="center">DMI</td>
<td align="center">DMI</td>
<td align="center">PKKDKV</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">B.JAWA</td>
<td align="center">DMI</td>
<td align="center">DMI</td>
<td align="center">DMI</td>
<td align="center">PKKDKV</td>
</tr>
<tr bgcolor="red">
<th colspan="6">ISTIRAHAT</th>
</tr>
<tr>
<td align="center">4</td>
<td align="center">B.JAWA</td>
<td align="center">DMI</td>
<td align="center">B.ING</td>
<td align="center">DMI</td>
<td align="center">PKKDKV</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">B.ING</td>
<td align="center">DMI</td>
<td align="center">B.ING</td>
<td align="center">DMI</td>
<td align="center">PKKDKV</td>
</tr>
<tr>
<td align="center">6</td>
<td align="center">B.ING</td>
<td align="center">MTK</td>
<td align="center">TPAV</td>
<td align="center">TPAV</td>
<td align="center">PKKDKV</td>
</tr>
<tr bgcolor="red">
<th colspan="6">ISTIRAHAT&SHOLAT</th>
</tr>
<tr>
<td align="center">7</td>
<td align="center">MTK</td>
<td align="center">MTK</td>
<td align="center">TPAV</td>
<td align="center">TPAV</td>
</tr>
<tr>
<td align="center">8</td>
<td align="center">MTK</td>
<td align="center">B.IND</td>
<td align="center">TPAV</td>
<td align="center">TPAV</td>
</tr>
<tr>
<td align="center">9</td>
<td align="center">PAI</td>
<td align="center">B.IND</td>
<td align="center">TPAV</td>
<td align="center">TPAV</td>
</tr>
<tr>
<td align="center">10</td>
<td align="center">PAI</td>
<td align="center">PANCASILA</td>
<td align="center">TPAV</td>
<td align="center">TPAV</td>
</tr>
<tr>
<td align="center">11</td>
<td align="center">PAI</td>
<td align="center">PANCASILA</td>
<td align="center">TPAV</td>
<td align="center">TPAV</td>
</tr>
<tr bgcolor="grey">
<th colspan="6">PULANG</th>
</tr>
</table>
</body>
</html>
DAFTAR PUSTAKA
https://www.petanikode.com/html-list/
https://freesiswa.blogspot.com/p/041b-pembuatan-list-dan-tabel-pada-html.html
.png)
Komentar
Posting Komentar