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. 4
October 1, 2009
Posted by: Fauzie


Untuk bahagian keempat ini, saya tidak akan berbincang dengan panjang lebar berhubung dengan contoh table atau jadual yang ditunjukkan ini.

Saya rasa inilah contoh table atau jadual yang paling complex kerana ia banyak menggunakan scope untuk column dan row dan juga beberapa jenis class.

Jika anda meminati atau ingin membina contoh table ini, sila copy and paste kod-kod CSS dan HTML ke dalam notepad dan perhatikan kod-kod ini untuk mengetahui bagaimana ianya berfungsi.

"live demo"



Table 1: Power Mac G5 tech specs
ConfigurationsDual 1.8GHzDual 2GHz
ModelM9454LL/AM9455LL/A
G5 ProcessorDual 1.8GHz PowerPCDual 2GHz PowerPC
Frontside bus900MHz per processor1GHz per processor
Level2 Cache512K per processor512K per processor

Dari situ saya pasti anda akan kagum dengan kebolehan kod-kod CSS dan HTML dalam membina satu table atau jadual yang sungguh menarik dan mengkagumkan.

Ini adalah kod-kod CSS dan HTML, dan di bawahnya ialah contoh "live demo" table tersebut.

<html>
<head>
<style type='text/css'>
#mytable {
width: 450px;
padding: 0;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 450px;
font: italic 11px Verdana;
text-align: right;
}

#mytable th {
color: #4f6b72;
border-top: none;
border-right: 1px solid #C1DAD7;
border-left: 0px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
background: #CAE8EA url(&#39;images/bg_header.jpg&#39;) no-repeat;
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:10px;
font-family:Verdana;
padding-left:12px;
padding-right:6px;
padding-top:6px;
padding-bottom:6px;
}

#mytable th.nobg {
border-top: 0px none;
border-left: 0px none;
border-right: 1px solid #C1DAD7;
background: none;
}

#mytable td.alt {
background: #F5FAFA;
}

#mytable th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0px none;
background: #f5fafa url(&#39;images/bullet1.gif&#39;) no-repeat;
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:9px;
font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

#mytable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
font-family: Verdana;
font-size: 10px;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0px none;
background: #f5fafa url(&#39;images/bullet2.gif&#39;) no-repeat;
color: #797268;
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:9px;
font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

</style>
</head>
<body>
<table id="mytable" cellspacing="0">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tbody>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>
<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
<td class="alt">Dual 1.8GHz PowerPC</td>
<td class="alt">Dual 2GHz PowerPC</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>
</tbody>
</table>
</body>
</html>