Contoh tabel yang akan dihasilkan adalah sebagai berikut :
1. 8 baris dengan 5 Kolom. Yang diatasnya memiliki border yang tebal.
2. Border untuk kolom No tidak bergaris (bagian kiri) dan border diantara kolom pro dan free juga tidak ada, begitu juga dengan kolom paling kanan tidak terdapat garis .
3. Untuk baris header terdapat border di bagian bawah.
4. Border untuk baris-baris tidak ada kecuali untuk baris ke lima dan ke tujuh.
Ok, kita melangkah ke level selanjutnya. Kita harus memikirkan bagaimana cara untuk memanipulasi tabel tersebut. hehe...(programer harus pandai merekayasa)
1. Kita buat tabel dengan lebar sembarang dan border = 0. (kita menset border agar tidak terlihat)
<table border="0" width="600" align="center">2. Untuk membuat garis tebal yang paling atas. Kita buat sebuah baris dengan satu kolom. Kita atur stylenya dengan membuat border bagian bawah berwarna hitam (#000000) dan format thick.
<tr>3. Selanjutnaya untuk membaut header tabel, diperlukan 4 kolom yang terlihat. Hal yang dilakukan sama dengan membuat baris dengan 5 kolom biasa. Namun kita harus membuat 3 kolom tambahan untuk membuat garis horizontal antara kolom 1 dan 2, 2 dan 3, serta 3 dan 4. Untuk membuat garis horizontal, kita dapat melakukan rowspan seluruh jumlah baris. Selanjutnya kita ubah style kolom tersebut dengan border left atau right yang berwarna hitam dan berukuran thin (tipis). Dan untuk garis dibawah header, sama seperti membuat garis yang pertama hanya ukurannya diubah jadi thin.
<td colspan="8" style="border-bottom:#000000 solid thick;"></td>
</tr>
<tr>4. Selanjutnya tinggal membuat baris-baris dan mengisinya dengan nilai-nilai yang ingin dimasukkan.
<th><strong>No</strong></th>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<th align="center" ><strong>Fitur</strong></th>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<th align="center"><strong>Enterprise</strong></th>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<th align="center"><strong>Pro</strong></th>
<th align="center"><strong>Free</strong></th>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>5. Untuk membuat garis diantara baris kelima dan keenam serta dibawah yang ketujuh. Kode yang digunakan sama seperti yang pada poin no 2. Kode ini diletakkan pada posisi yang ingin dikasih garis.
<td align="center">1</td>
<td style="align:left">Garansi seumur hidup</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
Setelah semua tahapan dilakukan, maka tabel insyaallah akan sudah jadi.
Walaupun teknik yang digunakan berbau manipulasi penglihatan tapi itu juga dapat dijadikan salah satu solusi untuk membuat jenis tabel yang neko-neko...
Untuk yang pengen tahu script utuhnya adalah sebagai berikut :
<!DOCTYPE htmlOke, mari belajar pemrograman html secara bersama-sama. Jangan lupa kopi untuk teman belajar pemrograman html.... cheers...
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Belajar Tentang Table</title>
</head>
<body>
<h1 align="center">Tabel Fitur</h1>
<table border="0" width="600" align="center">
<tr>
<td colspan="8" style="border-bottom:#000000 solid thick;"></td>
</tr>
<tr>
<th><strong>No</strong></th>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<th align="center" ><strong>Fitur</strong></th>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<th align="center"><strong>Enterprise</strong></th>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<th align="center"><strong>Pro</strong></th>
<th align="center"><strong>Free</strong></th>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">1</td>
<td style="align:left">Garansi seumur hidup</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">2</td>
<td align="left">Multiuser</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">3</td>
<td align="left">Update otomatis</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">4</td>
<td align="left">Cetak Laporan</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">5</td>
<td align="left">Notifikasi Error</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">6</td>
<td align="left">Ubah tema</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td align="center">7</td>
<td align="left">Try Icon</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
</table>
</body>
</html>
=================================================
kurangin tidur banyakin ngopi
No comments:
Post a Comment