PEMBUATAN FORMAT LIST DAN TABEL PADA HTML
MEMBUAT FORMAT DAFTAR DAN TABEL DALAM HTML
A. PENDAHULUAN
HTML sudah menyediakan elemen untuk membuat daftar. Ada tiga jenis daftar yang dapat ditemukan dalam HTML:
- Ordered list adalah list yang terurut.
- Unordered list adalah list yang tidak terurut
- Table berfungi untuk menampilkan informasi dalam bentuk baris dan kolom.
1. ORDERED LIST
Order list dibuat dengan tag <ol>. Lalu didalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. List dibuat dengan tag <li> (list item).
Contoh :
Hasil :
Bagaimana jika ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III ?
- a untuk alfabet a, b, c dan seterusnya;
- A untuk alfabet A, B, C dan seterusnya;
- i untuk angka romawi i, ii, iii dan seterusnya;
- I untuk angka romawi I, II, III dan seterusnya.
Contoh :
Hasil :
2. UNORDDERED LIST
Adalah list yang tidak terurut yang menggunakan simbol-simbol pada item-nya. Dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li>.
Beriku nilai yang bisa diberikan untuk atribut :
- square untuk simbol persegi;
- disc (default) untuk simbol lingkaran disc;
- none tidak memakai simbol;
- circle untuk simbol lingkaran.
Contoh :
Hasil :
3. TABLE
<table> merupakan tag pembuka dalam membuat sebuah table pada html. Macam-macam tag yang terlibat dalam pembuatan table di HTML :
- <table> untuk membungkus tabelnya;
- <thead> untuk membungkus bagian kepala tabel;
- <body> untuk membungkus bagian body dari tabel;
- <tr> (tabel row) untuk membuat baris;
- <td> (tabel data) untuk membuat sel;
- <th> (tabel head) untuk membuat judul pada header.
Tag yang paling penting diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.
Contoh :
Hasil :
Tabel atribut data yang biasa digunakan adalah sebagai berikut :
- Rowspan = angka (baris di span oleh sel)
<td rowspan="..."> untuk menggabungkan beberapa baris.
- Colspan = angka (kolom yang di span oleh sel)
<th colspan="..."> untuk menggabungkan beberapa kolom.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tabel HTML</title>
</head>
<body>
<h3>JADWAL PELAJARAN XII MULTIMEDIA 2</h3>
<table border="1">
<tr bgcolor="grey">
<th rowspan="2">Jam</th>
<th colspan="5">Hari</th>
</tr>
<tr bgcolor="red">
<th>SENIN</th>
<th>SELASA</th>
<th>RABU</th>
<th>KAMIS</th>
<th>JUM'AT</th>
</tr>
<tr align="center">
<td align="center">1</td>
<td>PKKMM</td>
<td>DMI</td>
<td>DMI</td>
<td>DMI</td>
<td>PKKDKV</td>
</tr>
<tr align="center">
<td align="center">2</td>
<td>PKKMM</td>
<td>DMI</td>
<td>DMI</td>
<td>DMI</td>
<td>PKKDKV</td>
</tr>
<tr align="center">
<td align="center">3</td>
<td>B.JAWA</td>
<td>DMI</td>
<td>DMI</td>
<td>DMI</td>
<td>PKKDKV</td>
</tr>
<tr>
<th colspan="6">ISTIRAHAT</th>
</tr>
<tr align="center">
<td align="center">4</td>
<td>B.JAWA</td>
<td>DMI</td>
<td>B.INGGRIS</td>
<td>DMI</td>
<td>PKKDKV</td>
</tr>
<tr align="center">
<td>5</td>
<td>B.INGGRIS</td>
<td>DMI</td>
<td>B.INGGRIS</td>
<td>DMI</td>
<td>PKKDKV</td>
</tr>
<tr align="center">
<td>6</td>
<td>B.INGGRIS</td>
<td>MATEMATIKA</td>
<td>TPAV</td>
<td>TPAV</td>
<td>PKKDKV</td>
</tr>
<tr>
<th colspan="6">ISTIRAHAT</th>
</tr>
<tr align="center">
<td align="center">7</td>
<td>MATEMATIKA</td>
<td>MATEMATIKA</td>
<td>TPAV</td>
<td>TPAV</td>
<td>-</td>
</tr>
<tr align="center">
<td align="center">8</td>
<td>MATEMATIKA</td>
<td>B.INDONESIA</td>
<td>TPAV</td>
<td>TPAV</td>
<td>-</td>
</tr>
<tr align="center">
<td align="center">9</td>
<td>PAI</td>
<td>B.INDONESIA</td>
<td>TPAV</td>
<td>TPAV</td>
<td>-</td>
</tr>
<tr align="center">
<td align="center">10</td>
<td>PAI</td>
<td>PANCASILA</td>
<td>TPAV</td>
<td>TPAV</td>
<td>-</td>
</tr>
<tr align="center">
<td align="center">11</td>
<td>PAI</td>
<td>PANCASILA</td>
<td>TPAV</td>
<td>TPAV</td>
<td>-</td>
</tr>
</table>
</body>
</html>
DAFTAR PUSTAKA
https://freesiswa.blogspot.com/p/041-pengenalan-format-teks-dan-paragraf.html
https://www.petanikode.com/html-paragraf/
.png)
Komentar
Posting Komentar