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. 2
September 24, 2009
Posted by: Fauzie


Membina dan membuat table atau jadual dengan menggunakan CSS boleh dilakukan dengan berbagai cara.

Dalam bahagian pertama, table atau jadual yang ditunjukkan adalah jenis yang paling asas atau yang paling mudah.

Dalam bahagian kedua ini mari kita lihat beberapa jenis table atau jadual yang dibuat dengan cara lain.

Contoh di bawah ini ialah table atau jadual yang dibina dengan menggunakan "div class" , unordered list (ul) dan listed item (li) dalam bentuk "bulleted list". Di samping itu warna telah diberikan untuk setiap baris dengan menggunakan class "odd" dan "even".

Garisan lurus bagi setiap baris (row) di buat dengan memperkenalkan kod "border-bottom". Kod border-bottom: 2px solid red; ialah untuk garisan di bawah tajuk (title) dan kod border-bottom: 1px solid #e6e6e6; pula untuk garisan bawah setiap baris atau row. Untuk contoh ini, border table ialah 0px untuk memberi efek table tanpa border (border:0px solid #C9C9C9;)

Kod-kod CSS dan HTML adalah seperti di bawah. Kod berwarna maroon ialah kod CSS dan kod berwarna biru ialah kod HTML.

Contoh Table 1 secara "live demo"

  • Nama Pemain
  • Sachin
  • Gilchrist
  • Dhoni
  • Ponting
  • Negara
  • India
  • Australia
  • India
  • Australia
  • Ranking
  • 1
  • 2
  • 6
  • 10










<html>
<head>
<style type="text/css">
.table {
background:#333;
}
.table ul {
float:left;
margin:0;
padding:0;
border:0px solid #C9C9C9;
}
.table ul li {
list-style:none;
padding:5px 10px;
width:150px;
border-bottom: 1px solid #e6e6e6;
}
.table ul li.title {
font-weight:bold;
background:#fff;
color:navy;
border-bottom: 2px solid red;
}
.table ul li.even {
background:#fff
}
.table ul li.odd {
background:#FFFFE6
}
</style>
</head>
<body>
<div class="table">
<ul>
<li class="title">Nama Pemain</li>
<li class="even">Sachin</li>
<li class="odd">Gilchrist</li>
<li class="even">Dhoni</li>
<li class="odd">Ponting</li>
</ul>
<ul>
<li class="title">Negara</li>
<li class="even">India</li>
<li class="odd">Australia</li>
<li class="even">India</li>
<li class="odd">Australia</li>
</ul>
<ul>
<li class="title">Ranking</li>
<li class="even">1</li>
<li class="odd">2</li>
<li class="even">6</li>
<li class="odd">10</li>
</ul>
</div>
</body>
</html>

Bagi contoh table kedua ini, "hover effect" telah diperkenalkan untuk memberi efek baris atau row akan kelihatan bertukar warna apabila cursor diletakkan di atas garisan.

Contoh Table 2 secara "live demo"


Jualan Widget, 2008
ProdukSuku PertamaSuku KeduaSuku KetigaSuku Keempat
SupraWidget$9,940$10,100$9,490$11,730
WonderWidget$19,310$21,140$20,560$22,590
MegaWidget$25,110$26,260$25,210$28,370
HyperWidget$27,650$24,550$30,040$31,980

Kod-kod CSS dan HTML untuk contoh di atas adalah seperti di bawah ini.

<html>
<head>
<style type="text/css">

.pretty-table {
padding: 0;
margin: 0;
border-collapse: collapse;
border: 1px solid #333;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000;
background: #bcd0e4 url("widget-table-bg.jpg") top left repeat-x;
}

.pretty-table caption {
caption-side: bottom;
font-size: 0.9em;
font-style: italic;
text-align: right;
padding: 0.5em 0;
}

.pretty-table th, .pretty-table td {
border: 1px dotted #666;
padding: 0.5em;
text-align: left;
color: #632a39;
}

.pretty-table th[scope=col] {
color: #000;
background-color: #8fadcc;
text-transform: uppercase;
font-size: 0.9em;
border-bottom: 2px solid #333;
border-right: 2px solid #333;
}

.pretty-table th+th[scope=col] {
color: #fff;
background-color: #7d98b3;
border-right: 1px dotted #666;
}

.pretty-table th[scope=row] {
background-color: #b8cfe5;
border-right: 2px solid #333;
}

.pretty-table tr.alt th, .pretty-table tr.alt td {
color: #2a4763;
}

.pretty-table tr:hover th[scope=row], .pretty-table tr:hover td {
background-color: #632a2a;
color: #fff;
}
</style>
</head>
<body>
<table class="pretty-table">
<caption>Jualan Widget, 2008</caption>
<tr>
<th scope="col">Produk</th>
<th scope="col">Suku Pertama</th>
<th scope="col">Suku Kedua</th>
<th scope="col">Suku Ketiga</th>
<th scope="col">Suku Keempat</th>
</tr>
<tr>
<th scope="row">SupraWidget</th>
<td>$9,940</td>
<td>$10,100</td>
<td>$9,490</td>
<td>$11,730</td>
</tr>
<tr class="alt">
<th scope="row">WonderWidget</th>
<td>$19,310</td>
<td>$21,140</td>
<td>$20,560</td>
<td>$22,590</td>
</tr>
<tr>
<th scope="row">MegaWidget</th>
<td>$25,110</td>
<td>$26,260</td>
<td>$25,210</td>
<td>$28,370</td>
</tr>
<tr class="alt">
<th scope="row">HyperWidget</th>
<td>$27,650</td>
<td>$24,550</td>
<td>$30,040</td>
<td>$31,980</td>
</tr>
</table>
</body>
</html>