Pembuatan List dan Tabel

 PEMBUATAN LIST DAN TABEL

A. PENDAHULUAN

List atau daftar berurutan adalah fungsi dalam HTML yang digunakkan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penulisan list menggunakka tag <li> dalam membuat list pada HTML. Terdapat 2 jenis tampilan list yang bisa di gunakkan Yaitu:  

• Ordered List berfungsi untuk menampilkan daftar list dalam bentuk angka. Tag yang digunakkan dalam Ordered list <ol>. 

•  Unordered List berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di awalnya. Tag yang digunakkan dalam Unordered List <ul>.

CONTOH: 

Tabel adalah struktur yang digunakkan untuk menampilkan informasi dalam bentuk baris dan kolom. Untuk membuat table menggunkkan tag <table>, <tr> untuk membuat baris, <td> untuk membuat kolom. Tag yang terlibat dalam pembuatan table pada HTML:

• <table> tag pembuka dalam membuat tabel pada html tanpa <table> penggunaan <tr> dan <td> tidak ada difungsikan dengan baik. 

•  <tr> atau dikenal sebagai table row merupakan tag yang digunakkan untuk membuat baris dalam table html. 

• <td> atau dikenal sebagai table data merupakan tag yang digunakkan untuk membuat kolom dalam baris dan untuk menampilkan data dalam table. 

•  <th> umtul membuat table head atau bagian kepala pada table.

CONTOH:

 B. TAG LIST

Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran tertentu. Penomoran bisa menggunakkan angka (1,2,3...) atau dengan karakter alphabet (a,b,c... atau i,ii,iii...). Daftar yang berurutan umumnya dipakai umtuk item=item yang saling berhubungan satu sama lain, atau menuliskan langkah-langkah atau prosedur dari kegiatan tertentu yang tidak dapat dilakukan secara acak.

Untuk membuat daftar yang berurutan dalam dokumen HTML digunakkan tag <ol> yang berpasangan dengan tag </ol>. Tag <ol> untuk memulai daftar berurutan sedangkan </ol> untuk menandakan bahwa daftar sudah berkhir. Masing-masing item di dalam daftar harus dibuat menggunakkan tag <li> ditutup dengan tag </li>.

Atribut untuk tag <ol> adalah "type" yang menunjukkan jenis penomoran, secara standar menggunakkan penomoran 1,2,3,4,5 dst. Selain tipe default, tipe lain yang dapat digunakkan untuk keperluan penomoran dalam suatu list adalah:

Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah posisinya secara acak. Untuk membuat daftar yang tidak berurutan dengan dokumen html, digunakkan tag <ul> yang berpasangan dengan tag </ul>.Tag <ul> digunakkan untuk memulai suatu daftar berurutan sedangkan tag </ul> unntuk menutup.

 Atribut untuk tag <ul> adalah "type" yang menunjukkan jenis tanda untuk setiap item berupa tanda bulatan untuk defaultnya. Setiap tipe default, tipe lain dapat digunakkan untuk keperluan unordered list adalah:

Description List adlah list yang berisi deskripsi atau penjelasan dari sesuatu. Ada 3 tag yang digunakkan untuk membuat description list:

C. TAG TABEL

Tabel terdiri dari 4 unsur utama:

• Baris 

•  Kolom 

•  Sel 

•  Garis

Ada beberapa tag yang harus diingat umtuk membuat tabel di HTML:

• Tag <table> untuk membungkus tabel 

•  Tag <thead> untuk membungkus bagian kepala 

•  Tag <tbody> untuk membungkus bagian body dari tabel 

•  Tag <tr> (tabel row) untuk membuat baris 

•  Tag <td> (tabel data) untuk membuat sel 

•  Tag <th> (tabel head) untuk membuat judul pada header,

 Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan, boleh digunakkan atau tidak.

 Untuk mendefisikan table heading atau judul tiap kolom menggunakkan tag <th>...</th>. 

Atribut Elemen Tabel:

• Width=panjang (lebar table, pixel atau persen) 

•  Height=panjang(tinggi tabel, pixel atau persen) 

•  Border=pixel(tebal garis tepi) 

•  Cellspacing=pixel(spasi di antar sel) 

•  Cellpadding=pixel(spasi di dalam sel) 

•  Align=[eft|center|right](perataan tabel) 

•  Bgcolor=warna(warna latar belakang table)

Atribut Table Row

•  Align=[eft|center|right](perataan sebaris sel secara horizontal)  

•  Valign=[top|middle|bottom](perataan sebuah sel secara vertikal) 

•  Bgcolor=warna(warna latar belakang table)

Atribut Table Data

•  Align=[eft|center|right](perataan horizontal)  

•  Width=[top|middle|bottom](perataan vertikal)  

• Height=panjang(tinggi sel, pixel atau persen)  

•  Bgcolor=warna(warna latar belakang sel)

 

Menambahkan  Warna Warna Pada Sel dan Baris

Untuk menambahkan warna pada sel dan baris. Menambahkan atribut bgcolor di dalam tag <td> atau <tr>. 

Menggabungkan Sel Tabel

Untuk membuat table seperti di atas maka tabel atribut data yang digunakkan adalah sebagai berikut: 

• Rowspan=angka(baris yang di span oleh sel) 

•  Colspan=angka(kolom yang di span oleh sel)

Jadi untuk menggbungkan 4baris seperti tabel di atas: <td rowspan=4>...</td> 

Jadi untuk menggbungkan 4baris seperti tabel di atas: <th colspan=4>...</th>

 

 DAFTAR PUSTAKA: http://freesiswa.blogspot.com