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>
<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"
| Pekerja | Gaji | Bonus | Penyelia |
|---|---|---|---|
| Abu Bin Bakar | $300 | $50 | Ah Chong |
| Josephin Tan | $150 | - | Ramasamy |
| Ah Ming | $200 | $35 | Ali Salim |
| John Kannan | $175 | $25 | Ramasamy |
Contoh Table 2 secara "live demo"
| Pekerja | Gaji | Bonus | Penyelia |
|---|---|---|---|
| Abu Bin Bakar | $300 | $50 | Ah Chong |
| Josephin Tan | $150 | - | Ramasamy |
| Ah Ming | $200 | $35 | Ali Salim |
| John Kannan | $175 | $25 | Ramasamy |
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>
<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 1 | Column 2 | Column 3 |
|---|---|---|
| 1 | 1 | 2 |
| 3 | 5 | 8 |
| 13 | 21 | 34 |
| 55 | 89 | 144 |
| 233 | 377 | 610 |
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>
<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>
