Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



BINA TABLE ATAU JADUAL DENGAN CSS BAH. 3
September 28, 2009
Posted by: Fauzie


Dalam Bahagian ke 3 ini kita akan lihat beberapa lagi bentuk table yang boleh dibuat dengan CSS.

Dua contoh table di bawah ini dipanggil "minimalist" dan efek column diperolehi melalui scope="col". Yang pertama jenis "kosong" iaitu ia tidak diberi efek warna latar dan yang kedua pula dipercantikkan dengan warna tambahan serta "hover effect".

Di bawah ini adalah kod-kod CSS dan HTML dan diikuti dengan contoh "live demo" table atau jadual berkenaan.

<html>
<head>
<style type='text/css'>
#hor-minimalist-a th {
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
border: 1px solid #fff;
border-bottom: 2px solid #ccc;
text-align: left;
background-color: #ffffff;
}
#hor-minimalist-a td {
color: #669;
padding: 9px 8px 0px 8px;
border-bottom: 1px solid #ccc;
width: 150px;
}
#hor-minimalist-a tbody tr:hover td {
color: #009;
}

</style>

</head>
<body>

<table id="hor-minimalist-a" summary="Employee Pay Sheet">
<thead>
<tr>
<th scope="col">Pekerja</th>
<th scope="col">Gaji</th>
<th scope="col">Bonus</th>
<th scope="col">Penyelia</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abu Bin Bakar</td>
<td>$300</td>
<td>$50</td>
<td>Ah Chong</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Ramasamy</td>
</tr>
<tr>
<td>Ah Ming</td>
<td>$200</td>
<td>$35</td>
<td>Ali Salim</td>
</tr>
<tr>
<td>John Kannan</td>
<td>$175</td>
<td>$25</td>
<td>Ramasamy</td>
</tr>
</tbody>
</table>

</body>
</htm>

Contoh Table 1 secara "live demo"


PekerjaGajiBonusPenyelia
Abu Bin Bakar$300$50Ah Chong
Josephin Tan$150-Ramasamy
Ah Ming$200$35Ali Salim
John Kannan$175$25Ramasamy

Contoh Table 2 secara "live demo"

PekerjaGajiBonusPenyelia
Abu Bin Bakar$300$50Ah Chong
Josephin Tan$150-Ramasamy
Ah Ming$200$35Ali Salim
John Kannan$175$25Ramasamy

Kod-kod CSS dan HTML untuk contoh table di atas:

<html>
<head>

<style type='text/css'>

#ver-minimalist-a th {
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 0px solid #fff;
border-left: 0px solid #fff;
border-right: 0px solid #fff;
color: #039;
text-align: left;
border-collapse: collapse;
}
#ver-minimalist-a td
{
color: #669;
background: #e8edff;
padding: 9px 8px 0px 8px;
border-bottom: 0px solid #fff;
width: 150px;
border-collapse: collapse;
}
#ver-minimalist-a tbody tr:hover td
{
background: #d0dafd;
color: #339;
}

</style>
</head>
<body>

<table id="ver-minimalist-a">
<thead>
<tr>
<th scope="col">Pekerja</th>
<th scope="col">Gaji</th>
<th scope="col">Bonus</th>
<th scope="col">Penyelia</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abu Bin Bakar</td>
<td>$300</td>
<td>$50</td>
<td>Ah Chong</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Ramasamy</td>
</tr>
<tr>
<td>Ah Ming</td>
<td>$200</td>
<td>$35</td>
<td>Ali Salim</td>
</tr>
<tr>
<td>John Kannan</td>
<td>$175</td>
<td>$25</td>
<td>Ramasamy</td>
</tr>
</tbody>
</table>

</body>
</html>

Untuk contoh ke 3 ini pula, table data "first-child" dan "last-child" telah digunakan. Disamping itu "even row" telah diperkenalkan untuk mendapatkan efek barisan atau row yang berlainan warna.

Bagi mendapatkan bucu atau corner bulat, prefix -moz-border-radius dan -webkit-border-radius telah ditambah. Prefix ini membolehkan table dilihat mempunyai bucu bulat dalam browser Firefox dan Safari.

Contoh Table 3 secara "live demo"

Column 1Column 2Column 3
112
358
132134
5589144
233377610

Kod-kod CSS dan HTML yang telah digunakan adalah seperti bi bawah ini.

<html>
<head>
<style type='text/css'>
#tablebulat {
line-height: 1.6em;
background:#e6e6e6;
width: 450px;
margin:20px;
border:0px solid #e6e6e6;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

#tablebulat th {
border: none;
padding:4px 10px
}

#tablebulat td {
background:yellow;
padding:2px 10px 4px 10px
}

#tablebulat tr.even td {
background:lime;
}
#tablebulat tr:last-child td:first-child {
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
}
#tablebulat tr:last-child td:last-child {
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px
}
#tablebulat.collapsed {
border-collapse:collapse
}

</style>
</head>
<body>

<table id="tablebulat">
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>

<tr>
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
<tr class="even">
<td>3</td>
<td>5</td>
<td>8</td>
</tr>

<tr>
<td>13</td>
<td>21</td>
<td>34</td>
</tr>
<tr class="even">
<td>55</td>
<td>89</td>
<td>144</td>
</tr>

<tr>
<td>233</td>
<td>377</td>
<td>610</td>
</tr>
</tbody>
</table>

</body>
</html>