Dalam website biasanya terdapat tabel dan untuk memberikan beberap informasi. Nah kali ini aku akan share tentang cara membuat daftar dan tabel dengan coding html dan css. lalu perberdaan apa jika gunakan html saja dan html css.
B. Latar Belakang
Karena dalam website biasanya terdapat informasi berbentuk tabel atau daftar, jadi bagaimana cara membuatnya.
C. Maksud dan Tujuan
Agar dapat mengerti dan membuat tabel dan daftar di HTML CSS.
D. Alat & Bahan
- Aplikasi Editor Text ( Sublime Text )
- Web Browser ( Mozzila Firefox )
- 5 -10 Menit
Daftar dalam HTML, mungin kalian sudah tau apa itu daftar. Lalu bagaimana cara buat Daftar di HTML. Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>.
Properti tipe-daftar-gaya CSS digunakan untuk menentukan gaya penanda item daftar:
- disc Menetapkan penanda item daftar ke sebuah peluru (default)
- circle Mengatur penanda item daftar ke sebuah lingkaran
- square Setel penanda daftar item ke persegi
- none Item daftar tidak akan ditandai
Atribut type dari tag <ol>, mendefinisikan tipe penanda item daftar. Atribut tupe pada ol maupu li.
- type = "1" Item daftar akan diberi nomor (default)
- type = "A" Item daftar akan diberi nomor dengan huruf besar
- type = "a" Item daftar akan diberi nomor dengan huruf kecil
- type = "I" Item daftar akan diberi nomor dengan angka romawi huruf besar
- type = "i" Item daftar akan dinomori dengan angka romawi huruf kecil
HTML juga mendukung daftar deskripsi. Daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah. Tag <dl> mendefinisikan daftar deskripsi, tag <dt> mendefinisikan istilah (nama), dan tag <dd> menggambarkan setiap istilah.
Secara default, daftar yang dipesan akan mulai menghitung dari 1. Jika kalin ingin mulai menghitung dari angka yang ditentukan, Anda dapat menggunakan atribut start.
Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.
Pembuatan Tabel
Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan elemen table. dan selanjutnya, kita dapat menambahkan baris ke dalam tabel tersebut dengan menggunakan elemen tr. Dan setiap baris dari tabel tentunya harus diisikan dengan data, yang akan menghasilkan kolom tabel. Pengisian data pada tabel dilakukan dengan menggunakan elemen td.
Meskipun terlihat sederhana, pembangunan tabel yang telah kita lakukan sampai sejauh ini masih merupakan sebuah tabel yang hanya menyimpan data. Data yang disimpan dan ditampilkan sendiri tidak memiliki strukutr, sehingga tidak terdapat organisasi data yang baik. Pengorganisasian data yang baik dan benar pada sebuah tabel HTML akan sangat membantu kita dalam mengembangkan aplikasi web, terutama jika tabel yang ingin dibangun harus bersifat dinamis.
Penambahan kolom dan baris tabel saja tidak cukup untuk mengorganisasikan data pada tabel, karena kita tidak dapat secara langsung mengetahui mana bagian dari tabel yang merupakan data, mana yang merupakan isi data, dan mana yang merupakan nilai agregasi dari data. Kita juga tidak dapat mengetahui tujuan atau deskripsi dari sebuah tabel dengan hanya baris dan kolom tabel. HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal yang disebutkan sebelumnya, yaitu elemen caption, thead, tfoot, dan tbody.
Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.
Pembuatan Tabel
Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan elemen table. dan selanjutnya, kita dapat menambahkan baris ke dalam tabel tersebut dengan menggunakan elemen tr. Dan setiap baris dari tabel tentunya harus diisikan dengan data, yang akan menghasilkan kolom tabel. Pengisian data pada tabel dilakukan dengan menggunakan elemen td.
Meskipun terlihat sederhana, pembangunan tabel yang telah kita lakukan sampai sejauh ini masih merupakan sebuah tabel yang hanya menyimpan data. Data yang disimpan dan ditampilkan sendiri tidak memiliki strukutr, sehingga tidak terdapat organisasi data yang baik. Pengorganisasian data yang baik dan benar pada sebuah tabel HTML akan sangat membantu kita dalam mengembangkan aplikasi web, terutama jika tabel yang ingin dibangun harus bersifat dinamis.
Penambahan kolom dan baris tabel saja tidak cukup untuk mengorganisasikan data pada tabel, karena kita tidak dapat secara langsung mengetahui mana bagian dari tabel yang merupakan data, mana yang merupakan isi data, dan mana yang merupakan nilai agregasi dari data. Kita juga tidak dapat mengetahui tujuan atau deskripsi dari sebuah tabel dengan hanya baris dan kolom tabel. HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal yang disebutkan sebelumnya, yaitu elemen caption, thead, tfoot, dan tbody.
Berikut Contoh untuk memperjelas mengenai Table dan List :
Contoh List HTML :
Contoh List HTML :
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Mukti911</title>
</head>
<body>
<h3>Ini Daftar</h3>
<ul style="list-style-type: circle;">
<li>Tutorial Mukti911_1</li>
<li>Tutorial Mukti911_2
<ol start="10" type="I">
<li>Tutorial Mukti911_1</li>
<li>Tutorial Mukti911_2</li>
<li>Tutorial Mukti911_3</li>
</ol>
</li>
<li>Tutorial Mukti911_3</li>
</ul>
<dl>
<dt>Tutorial</dt>
<dd>- Mukti911</dd>
<dt>Tutorial</dt>
<dd>- Mukti911</dd>
<dt>Tutorial</dt>
<dd>- Mukti911</dd>
</dl>
<h3>Ini Table</h3>
<table width="100%" border="1px" cellpadding="2" cellspacing="1" >
<caption>Ini Caption Table</caption>
<thead>
<tr><th>Kelas</th><th>Nama</th><th>No. Absen</th></tr></thead>
<tbody>
<tr><td rowspan="2">XI -TKJ 1</td><td colspan="2">Colirul 1</td></tr>
<tr><td>Marji</td><td>2</td></tr>
<tr><td>XI -TKJ 3</td><td>Tampir</td><td>3</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">Akhir</td></tr>
</tfoot>
</table>
</body>
</html>
Hasil :
Penjelasan :
Jika mengunakan HTML saja kan terlihat monoton tidak terlihat bagus. Namun jika tidambah CSS seperti dibawah ini dimana CSS untuk tabel dan daftar maka akan terlihat lebih bagus:
- <ul> Menentukan daftar yang tidak diurutkan
- <ol> Mendefinisikan daftar yang dipesan
- <li> Mendefinisikan sebuah item daftar
- <dl> Mendefinisikan daftar deskripsi
- <dt> Mendefinisikan istilah dalam daftar deskripsi
- <dd> Menjelaskan istilah dalam daftar deskripsi
- style="list-style-type" Mengubah bentuk list pada <ul>
- start="" Mendefinisikan awal dari List <ol>
- type="I" Untuk mengubah bentuk list pada <ol>
- <table> untuk mendefinisikan tabel
- <tr> untuk menentukan baris tabel
- <td> untuk menentukan data tabel
- <th> untuk menentukan judul tabel
- <caption> untuk menentukan keterangan tabel/li>
- colspan untuk membuat sel menjangkau banyak kolom
- rowspan untuk membuat sel menjangkau banyak baris
- cellpading untuk membuat sel memili jarak dari content
- border untuk garis tepi
- width untuk mengubah ukuran sebuah atribut
- thead untuk mendefinisikan header dari tabel
- tbody untuk mendefinisikan body dari tabel
- tfoot untuk mendefinisikan footer dari tabel
Contoh :
<style type="text/css">Penjelasan :
ul.q, dl { width: auto; background-color: #889; border-radius: 5px; padding: 5px; padding-left: 20px; color: #fff; }
ul.q li { padding: 5px; list-style-position: inside; list-style-type: katakana; }
ul.q li ol { background-color: #900; padding-left: 30px; }
ul.q li ol li { padding: 10px; list-style-type: georgian; }
dl { font-style: italic; }
dt { font-weight: bold; }
dd { font-style: normal;}
table { width: 100%; border-spacing: 0px; }
table caption { background-color: #899; padding: 10px; color: #fff; border-radius: 10px 10px 0px 0px; }
table tr { background-color: #810; }
table tr td, table tr th { border: 2px solid #890; color: #fff; padding: 5px; text-align: center; }
</style>
- width untuk mengatur lebar pada tag
- background-color untuk merubah warna pada background
- border-radius untuk membuat sudut pada tag menjadi tidak lancip
- padding untuk membuat jarak antara tag dan content
- color untuk merubah warna isi tag
- list-style-type untuk merubah tipe penomeran list
- list-style-position untuk merubah posisi content list
- font-style & font-weight untuk merubah style text
- border-spacing untuk membuat jarak antar border
- text-aligh untuk merubah bentuk paragraf pada text
G. Hasil Yang Didapat
Bisa membuat tabel dan list.
H. Kesimpulan
Jadi untuk membuat tabel dan daftar pada conding HTML mengunakan tag table dan ol / li. Tapi HTML saja tidak cukup agar tampilan lebih bagus gunakan CSS pula.
I. Referensi
No comments:
Post a Comment