List HTML
List Pada HTML
.jpg)
List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu, jenis-
|
jenis list dalam HTML adalah:
|
-list tanpa nomor
|
-list dengan nomor
|
-list definisi
|
Unordered List (List tanpa nomor)
|
Untuk membuat list tanpa nomor (bulleted list):
|
-Mulai dengan tag pembuka list <UL>
|
-Masukkan setiap item list dengan menggunakan tag <LI> kemudian tuliskan itemnya (satu
|
saja), tag penutup item </LI>
|
-Ulangi lagi langkah kedua untuk menuliskan item list berikutnya
|
-Akhiri seluruh list dengan sebuah tag penutup </UL>
|
Unordered list disebut juga sebagai bulleted list, mempunyai bullet default berupa noktah. Jenis bullet
|
bisa diubah contohnya dengan mengisi atribut “type” dengan disc atau square.
|
Ordered List (List dengan nomor)
|
Untuk list dengan nomor, disebut juga ordered list, tag <UL> dubah dengan <OL>, demikian juga
|
</UL> diganti dengan </OL>. Nomor item secara default adalah menggunakan angka 1,2,3..dst sampai
|
dengan sejumlah item dalam list tersebut. Untuk keperluan penyajian tertentu kita dapat mengubah
|
TYPE
|
      |
I:Ditampilkan dengan angka Romawi huruf besar
 |
i:Ditampilkan dengan angka Romawi huruf kecil
 |
a:Ditampilkan dengan angka abjad huruf kecil
|
Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan nomor awal yang akan
|
digunakan pada ordered list.
|
Jika kita ingin list dimulai dari nomor 8, maka penulisannya <OL START = 8>....</OL>.
|
Contoh Unordered List:
|
<HTML>
|
<BODY>
|
<H4>Default Bullets List:</H4>
|
<UL>
|
<LI>Gemblonk</LI>
|
<LI>Combro</LI>
|
<LI>Lontong</LI>
|
</UL>
|
<H4>Disc Bullets List:</H4>
|
<UL TYPE="disc">
|
<LI>Gado-gado</LI>
|
<LI>Ketoprak</LI>
|
<LI>Pangsit</LI>
|
</UL>
|
<H4>Circle Bullets List:</H4>
|
<UL TYPE="circle">
|
<LI>Bajigur</LI>
|
<LI>Sekutenk</LI>
|
</UL>
|
<H4>Nested List:</H4>
|
<UL TYPE="circle">
|
<LI>Kue Cucur</LI>
|
<LI>Uli</LI>
|
<LI>Tape</LI>
|
<UL TYPE="square">
|
<LI>Tape Ketan</LI>
|
<LI>Tape Singkong</LI>
|
</UL>
|
<LI>Kue Basah</LI>
|
</UL>
|
</BODY>
|
</HTML>
|
Selamat mencoba~
Tag Table HTML
TABEL HTML
Tag tabel <table> html berfungsi untuk membuat suatu data multidimensi yang terdiri atas kolom
|
dan baris.
|
Tabel dapat digunakan untuk membuat suatu bentuk informasi yang ditampilkan dalam bentuk
|
kotak-kotak, yang biasanya terdiri kolom dan baris. Selain itu dengan tabel kita bisa mengatur
|
tampilan yang ada pada sebuah halaman web kedalam bentuk tampilan tertentu.
|
Tag yang digunakan untuk membuat tabel di HTML sebenarnya hanya 3 saja, yaitu :
|
1
|
.
|
<table> </table>
|
Tag <table> menunjukkan bagian awal dari tabel dan tag </table> menunjukkan akhir.
|
2
|
.
|
<tr> <tr/>
|
Tag <tr> menunjukkan awal baris dan tag <tr/> menjukkan akhir baris.
|
3
|
.
|
<td> </td>
|
Tag <td> menunjukkan awal kolom dan tag </td> menunjukkan akhir kolom.
|
Catatan:
|
Sebuah tabel HTML minimal memiliki sepasang tag <table>, sepasang tag <tr> dan satu pasang
|
tag <td>. Sementara setiap tag <td> selalu diapit oleh tag <tr>.
|
Bentuk minimal tabel HTML :
|
<table>
|
<tr>
|
<td> . . . </td>
|
</tr>
|
</table>
|
Contoh Tabel Sederhana :
|
Tuliskan kode html dibawah ini di text editor, yang saya gunakan disini adalah notepad. Simpan
|
dengan nama tabel.html
|
<table >
|
<tr>
|
<td> isi kolom 1 baris 1</td>
|
<td> isi kolom 2 baris 1</td>
|
</tr>
|
<tr>
|
<td> isi kolom 1 baris 2</td>
|
<td> isi kolom 2 baris 2</td>
|
</tr>
|
</table>
|
Jika kita ingin menambahkan garis di tabel cukup dengan menambahkan atribut border menjadi 1.
|
Jika atribut border tidak disertakan maka tabel dianggap memiliki border dengan nilai 0.
|
<table border="1">
|
<tr>
|
<td> isi kolom 1 baris 1</td>
|
<td> isi kolom 2 baris 1</td>
|
</tr>
|
<tr>
|
<td> isi kolom 1 baris 2</td>
|
<td> isi kolom 2 baris 2</td>
|
</tr>
|
</table>
|
Membuat Judul Tabel HTML
|
Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag
|
<table>. Tag <caption> secara otomatis berada pada posisi tengah. Formatnya sebagai berikut :
|
<caption> ... </caption>
|
silahkan simpan kode di berikut dengan nama judultabel.html
|
<table border="1">
|
<caption>Disini adalah titel tabel ini</caption>
|
<tr>
|
<td>Baris 1 Kolom 1</td>
|
<td>Baris 1 Kolom 2</td>
|
</tr>
|
<tr>
|
<td>Baris 2 Kolom 1</td>
|
<td>Baris 2 Kolom 2</td>
|
</tr>
|
</table>
|
Membuat Header pada Tabel HTML
|
Untuk membuat header pada tabel, kita bisa menambahkan tag <th>. Tag <th> mendefinisikan isi
|
sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel.
|
Tag <th> harus terletak di dalam element <tr>.
|
silahkan simpan kode di berikut dengan nama headertabel.html
|
<table border="1">
|
<tr>
|
<th>Header Kolom 1</th>
|
<th>Header Kolom 2</th>
|
</tr>
|
<tr>
|
<td>Baris 2 Kolom 1</td>
|
<td>Baris 2 Kolom 2</td>
|
</tr>
|
<tr>
|
<td>Baris 3 Kolom 1</td>
|
<td>Baris 3 Kolom 2</td>
|
</tr>
|
</table>
|
Perataan Tabel di HTML
|
Untuk melakukan pengaturan perataan tabel, kita harus menambahkan atribut align pada tag
|
<table>. Nilai atribut align adalah left, center, dan right. Tuiskan kode HTML dibawah ini dan
|
simpan dengan nama perataantabel.html
|
<table border="1" align="center">
|
<tr>
|
<td> align center </td>
|
<td> align center </td>
|
</tr>
|
<tr>
|
<td> align center </td>
|
<td> align center </td>
|
</tr>
|
</table> <br/>
|
<br/>
|
<table border="1" align="right">
|
<tr>
|
<td> align right </td>
|
<td> align right </td>
|
</tr>
|
<tr>
|
<td> align right </td>
|
<td> align right </td>
|
</tr>
|
</table> <br/>
|
<br/>
|
<table border="1" align="left">
|
<tr>
|
<td> align left </td>
|
</tr>
|
<tr>
|
<td> align left </td>
|
<td> align left </td>
|
</tr>
|
</table>
|
Pengaturan tinggi dan lebar tabel di HTML
|
Agar lebar atau tinggi tabel tidak berubah-ubah, kita dapat menentukan ukuran tinggi dan lebar
|
tabel. Caranya dengan menambahkan atribut height untuk nilai tinggi tabel sedangkan width
|
untuk menyimpan nilai lebar tabel. Nilai tinggi dan lebar dalam satuan pixels. Simpan kode
|
HTML berikut ini dengan nama tinggidanlebartabel.html
|
<table height="150" width="400" border="1">
|
<tr>
|
<td> Baris 1 Kolom 1</td>
|
<td> Baris 1 Kolom 2</td>
|
</tr>
|
<tr>
|
<td> Baris 2 Kolom 1</td>
|
<td> Baris 2 Kolom 2</td>
|
</tr>
|
</table>
|
Mengatur Tinggi dan Lebar kolom tabel HTML
|
Untuk mengatur tinggi dan lebar kolom kita tinggal menyisipkan atribut height untuk tinggi kolom
|
dan atribut width untuk lebar kolom di tag <td>. Nilai tinggi dan lebar dalam satuan pixels.
|
Simpan kode dibawah ini dengan nama tinggidanlebarkolom.html
|
<table border="1">
|
<tr>
|
<td width="200" height="100"> Baris 1 Kolom 1 </td>
|
<td > Baris 1 Kolom 2 </td>
|
</tr>
|
</table>
|
Catatan :
|
Jika Kolom A tingginya 70px maka kolom B dan C akan ikut menjadi 70 tingginya meskipun tidak
|
diatur tingginya. Tinggi kolom akan mengkikuti tinggi salah satu kolom yang tertinggi. Hal ini
|
tidak berlaku untuk lebar kolom.
|
Mengatur Perataan Kiri Kanan Kolom Tabel HTML
|
Untuk meratakan kolom secara kiri kanan kita tinggal menyisipkan atribut align di tag <td>.
|
Formatnya sebagai berikut :
|
<td align=”left”|”center”|”right”> . . .</td>
|
Silahkan simpan kode di berikut dengan nama perataankikakolom.html
|
<table width="500" height="50" border="1">
|
<tr>
|
<td align="left"> Baris 1 Kolom 1 </td>
|
<td align="center"> Baris 1 Kolom 2 </td>
|
<td align="right"> Baris 1 Kolom 3 </td>
|
</tr>
|
</table>
|
Mengatur Perataan Atas Bawah Kolom Tabel HTML
|
Untuk meratakan kolom kita tinggal menyisipkan atribut valign di tag <td>. Formatnya sebagai
|
berikut :
|
<td valign=”top”|”center”|”bottom”> . . .</td>
|
silahkan simpan kode di berikut dengan nama perataanabkolom.html
|
<table width="500" height="150" border="1">
|
<tr>
|
<td valign="top"> vertical align top </td>
|
<td valign="center"> vertical align center </td>
|
<td valign="bottom"> vertical align bottom </td>
|
</tr>
|
</table>
|
Hasil perataan saat dibuka lewat browser seperti berikut ini :
|
Memberi Warna Latar Belakang Tabel
|
Tabel yang dibuat tidak mutlak hanya berwarna putih/transparan dengan garis berwarna hitam saja,
|
melainkan warna background tabel juga bisa berubah. Untuk menambahkan warna latar belakang
|
tersebut tabel, anda bisa menggunakan atribut bgcolor pada tag <table>. Untuk pemberian
|
nilai(warna) pada atribut bgcolor dapat dilihat kembali pada tabel warna yang sudah dibahas pada
|
bab sebelumnya. Cara penulisan kodenya dapat diperhatikan pada penggalan kode program berikut
|
ini.
|
<html>
|
<head>
|
</head>
|
<body>
|
<table border="1" bgcolor="yellow">
|
<tr>
|
<td> Baris 1 Kolom 1</td>
|
<td> Baris 1 Kolom 2</td>
|
</tr>
|
<tr>
|
<td> Baris 2 Kolom 1</td>
|
<td> Baris 2 Kolom 2</td>
|
</tr>
|
</table>
|
</table>
|
</body>
|
</html>
|
Kode program di atas digunakan untuk memberikan warna background/seluruh tabel. Sedangkan
|
apabila kita hanya ingin memberikan warna pada sebuah sel saja atau warna teks dalam sebuah
|
tabel, penulisan kode program dapat dilihat pada penggalan kode program berikut ini :
|
<html>
|
<head>
|
</head>
|
<body>
|
<table border="1" bgcolor="yellow">
|
<tr>
|
<td bgcolor=”red”> Baris 1 Kolom 1</td>
|
<td> Baris 1 Kolom 2</td>
|
</tr>
|
<tr>
|
<td> Baris 2 Kolom 1</td>
|
<td> Baris 2 Kolom 2</td>
|
</tr>
|
</table>
|
</table>
|
</body>
|
</html>
|
Cara Menggabungkan Kolom di Tabel HTML
|
Tips :
|
Saat Anda ingin menggabungkan kolom atau baris, sebaiknya sertakan border=”0” di bagian
|
tabel. Ini berfungsi untuk mengetahui apakah tabel yang kita inginkan sudah sesuai atau belum.
|
Jika sudah sesuai border bisa di hapus dengan cara mengubar nilai border menjadi 0 atau
|
menghapus tag border=”0” dari tag <table>. Jika ingin tetap menggunakan border maka tidak
|
perlu merubah apapun.
|
Contoh kasus menggabungkan kolom :
|
Misalnya kita ingin menggabungkan 3 kolom menjadi satu. Namun kolom yang lain tetap.
|
Formatnya adalah :
|
<td colspan=”1”|”2”....dst> ... </td>
|
Contoh tabel yang belum disatukan ( belum di colspan ) kolomnya berdasarkan kasus diatas :
|
<table border="1">
|
<tr>
|
<td> 3 Kolom Jadi Satu </td>
|
</tr>
|
<tr>
|
<td> Baris 2 Kolom 1</td>
|
<td> Baris 2 Kolom 2</td>
|
<td> Baris 2 Kolom 3</td>
|
</tr>
|
</table>
|
Untuk menggabungkan 3 kolom di baris pertama pada tabel maka kita harus mengubah kode
|
HTML tabel diatas menjadi seperti ini :
|
<table border="1">
|
<tr>
|
<td colspan="3"> 3 Kolom Jadi Satu </td>
|
</tr>
|
<tr>
|
<td> isi kolom 1 baris 2</td>
|
<td> isi kolom 2 baris 2</td>
|
<td> isi kolom 3 baris 2</td>
|
</tr>
|
</table>
|
Bila ingin tulisan pada cel 3 Kolom Jadi Satu menjadi rata tengah, tinggal menambahkan attribute
|
align dengan nilai center pada tag <td>.
|
<table border="1">
|
<tr>
|
<td colspan="3" align=”center”> 3 Kolom Jadi Satu </td>
|
</tr>
|
<tr>
|
<td> isi kolom 1 baris 2</td>
|
<td> isi kolom 2 baris 2</td>
|
<td> isi kolom 3 baris 2</td>
|
</tr>
|
</table>
|
Cara Menggabungkan Baris di Tabel HTML
|
Misalnya kita ingin menggabungkan 2 baris terakhir menjadi satu. Namun baris yang lain tetap.
|
Formatnya adalah :
|
<td rowspan=”jumlah baris yang ingin disatukan”> ... </td>
|
Contoh tabel yang belum disatukan barisnya ( belum di rowspan ) berdasarkan kasus diatas:
|
<table border="1">
|
<tr>
|
<td> Baris 1 Kolom 1</td>
|
<td> 2 Baris Jadi Satu</td>
|
</tr>
|
<tr>
|
<td> Baris 2 Kolom 1</td>
|
</tr>
|
</table>
|
Untuk menggabungkan 2 baris di kolom ke-2 pada tabel maka kita harus mengubah kode HTML
|
tabel diatas menjadi seperti ini :
|
<table border="1">
|
<tr>
|
<td> isi kolom 1 baris 1 </td>
|
<td rowspan=”2”> 2 baris jadi satu</td>
|
</tr>
|
<tr>
|
<td> isi kolom 1 baris 2</td> </tr>
|
</table>
|
Selamat mencoba~