PEMFORMATAN LIST & TABLE HTML DASAR

A.) 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.

• Ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka.Tag yang digunakan dalam ordered list ini yaitu <ol>.

• Unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di awalnya.Tag yang diguanakan untuk membuat unordered list yaitu <ul>.

B.) 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.

1.) TAG LIST

Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item), yang kemudian perlu ditutup dengan tag </li>.

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran dalam suatu list adalah :

Contoh yang saya buatkan :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h1>Tutorial List HTML</h1>

<hr>

Tutorial list menggunakan angka

<ol>

<li>Pembukaan</li>

<li>isi</li>

<li>kesimpulan</li>

<li>penutup</li>

</ol>

Tutorial list menggunakan huruf besar

<ol type="A">

<li>Gelap terang</li>

<li>Typografi</li>

<li>Tekstur</li>

<li>Bentuk</li>

</ol>

Tutorial list menggunakan huruf kecil

<ol type="a">

<li>Durian</li>

<li>Mangga</li>

<li>Jeruk</li>

<li>Semangka</li>

</ol>

Tutorial list menggunakan romawi besar

<ol type="I">

<li>Baturraden</li>

<li>Alun-alun Purwokerto</li>

<li>Museum BRI</li>

<li>Curug jenggala</li>

</ol>

Tutorial list menggunakan romawi kecil

<ol type="i">

<li>Senin</li>

<li>isi</li>

<li>kesimpulan</li>

<li>penutup</li>

</ol>

</body>

</html>

Hasil program di atas :

Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu, misalnya gambar kotak atau bulat (bullet).

Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML, digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag <ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item), yang kemudian perlu ditutup dengan tag </li>.

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list adalah :

Contoh yang saya buat :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h1>Tutorial List HTML</h1>

<hr>

Tutorial list menggunakan bulat hitam

<ul type="disk">

<li>Pembukaan</li>

<li>isi</li>

<li>kesimpulan</li>

<li>penutup</li>

</ul>

Tutorial list menggunakan bulat putih

<ul type="circle">

<li>Pembukaan</li>

<li>isi</li>

<li>kesimpulan</li>

<li>penutup</li>

</ul>

Tutorial list menggunakan kotak

<ul type="square">

<li>Pembukaan</li>

<li>isi</li>

<li>kesimpulan</li>

<li>penutup</li>

</ul>

</body>

</html>

Hasil program di atas :

Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.

Ada tiga tag yang digunakan untuk membuat description list:

2.) TAG TABEL

Tabel terdiri dari 4 unsur utama:

o Baris

o Kolom

o Sel

o 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)

Atribut Table Row

• 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 :

Sedangkan untuk menggabungkan 4 kolom adalah :

Berikut contoh tabel yang sudah saya buat :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Table pelajaran XII MM2</title>

</head>

<body>

<h3 align="center">JADWAL PELAJARAN XII MM2</h3>

<Table border="3" align="center">

<tr bgcolor="green">

<th rowspan="2">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">Jumat</th>

</tr>

<tr align="center">

<td>1</td>

<td>PKKMM</td>

<td>DMI</td>

<td>PKKDKV</td>

</tr>

<tr align="center">

<td>2</td>

<td>PKKMM</td>

<td>DMI</td>

<td>PKKDKV</td>

</tr>

<tr align="center">

<td>3</td>

<td>B.JAWA</td>

<td>DMI</td>

<td>PKKDKV</td>

</tr>

<th colspan="6" bgcolor="grey"> ISTIRAHAT </th>

<tr align="center">

<td>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>PKKDKV</td>

</tr>

<th colspan="6" bgcolor="grey"> ISTIRAHAT & SHALAT</th>

<tr align="center">

<td>7</td>

<td>MATEMATIKA</td>

<td>TPAV</td>

</tr>

<tr align="center">

<td>8</td>

<td>MATEMATIKA</td>

<td>B.INDONESIA</td>

<td>TPAV</td>

</tr>

<tr align="center">

<td>9</td>

<td>PAISLAM</td>

<td>B.INDONESIA</td>

<td>TPAV</td>

</tr>

<tr align="center">

<td>10</td>

<td>PAISLAM</td>

<td>PANCASILA</td>

<td>TPAV</td>

</tr>

<tr align="center">

<td>11</td>

<td>PAISLAM</td>

<td>PANCASILA</td>

<td>TPAV</td>

</tr>

<th colspan="6" bgcolor="grey"> PULANG </th>

</Table>

</body>

</html>

Hasil dari program di atas seperti ini :

DAFTAR PUSTAKA

Perangkat : Lenovo Ideaped Gaming 3

`Software : Visual Studio Code

Referensi web :

https://freesiswa.blogspot.com/p/041b-pembuatan-list-dan-tabel-pada-html.html

Cari Blog Ini

GILAR SAPUTRA