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. 1 |
| September 23, 2009 Posted by: Fauzie |
"Table" atau Jadual adalah salah satu objek yang paling susah untuk diberi style dalam web design. Banyak masa yang diperlukan hanya untuk membuat satu table atau jadual yang mudah.
Dalam dunia 'worldwide web', jenis table yang paling kerap dibuat ialah dengan menggunakan kod HTML. Saya telah pun membincangkan cara membuat table dengan HTML sebelum ini dengan secara ringkas dengan menggunakan NVU.
Untuk artikel ini mari kita lihat pula bagaimana untuk membina table atau jadual dengan cara yang lebih mudah dan diharap akan dapat menolong anda memberi style kepada table atau jadual yang anda ingin bina.
Penggunaan table dikatakan banyak disalahgunakan terutama dalam pembinaan 'pages layout'. Table atau jadual ini sepatutnya dibina atau disediakan hanya untuk satu tujuan iaitu, untuk mengstruktur 'tabular data'.
Sebelum kita mulakan perbincangkan ini, mari kita lihat setiap 'tag' yang digunakan:
Elemen <table> merujuk kepada 'table'.
Elemen <tr> merujuk kepada 'table row'.
Elemen <td> merujuk kepada 'table data' (data cell) yang mana terletak di dalam (enclosed) tag 'tr'.
Dan elemen <th> pula merujuk kepada 'table header'.
Disamping itu 'attribute' colspan (column span) dan rowspan (row span) juga digunakan dalam pembinaan table untuk memberi efek yang menarik.
Contoh-contoh atau 'live demo' yang ditunjukkan di bawah ini adalah jenis table atau jadual yang paling asas dan mudah dibuat dengan menggunakan CSS.
Contoh Table 1 secara "live demo"
| Baris 1, Column 1 | Baris 1, Column 2 | Baris 1, Column 3 |
| Baris 2, Column 1 | Baris 2, Column 2 | Baris 2, Column 3 |
| Baris 3, Column 1 | Baris 3, Column 2 | Baris 3, Column 3 |
| Baris 4, Column 1 | Baris 4, Column 2 | Baris 4, Column 3 |
| Baris 5, Column 1 | Baris 5, Column 2 | Baris 5, Column 3 |
Kod-kod CSS dan HTML untuk contoh table atau jadual di atas adalah seperti berikut:
<html>
<head>
<style type="text/css">
#jadual td {
border: 1px solid #999;
width: 150px;
background-color:#e6e6e6;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table>
<table id="jadual">
<tr>
<td>Baris 1, Column 1</td>
<td>Baris 1, Column 2</td>
<td>Baris 1, Column 3</td>
</tr>
<tr>
<td>Baris 2, Column 1</td>
<td>Baris 2, Column 2</td>
<td>Baris 2, Column 3</td>
</tr>
<tr>
<td>Baris 3, Column 1</td>
<td>Baris 3, Column 2</td>
<td>Baris 3, Column 3</td>
</tr>
<tr>
<td>Baris 4, Column 1</td>
<td>Baris 4, Column 2</td>
<td>Baris 4, Column 3</td>
</tr>
<tr>
<td>Baris 5, Column 1</td>
<td>Baris 5, Column 2</td>
<td>Baris 5, Column 3</td>
</tr>
</table>
</body>
</html>
<head>
<style type="text/css">
#jadual td {
border: 1px solid #999;
width: 150px;
background-color:#e6e6e6;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table>
<table id="jadual">
<tr>
<td>Baris 1, Column 1</td>
<td>Baris 1, Column 2</td>
<td>Baris 1, Column 3</td>
</tr>
<tr>
<td>Baris 2, Column 1</td>
<td>Baris 2, Column 2</td>
<td>Baris 2, Column 3</td>
</tr>
<tr>
<td>Baris 3, Column 1</td>
<td>Baris 3, Column 2</td>
<td>Baris 3, Column 3</td>
</tr>
<tr>
<td>Baris 4, Column 1</td>
<td>Baris 4, Column 2</td>
<td>Baris 4, Column 3</td>
</tr>
<tr>
<td>Baris 5, Column 1</td>
<td>Baris 5, Column 2</td>
<td>Baris 5, Column 3</td>
</tr>
</table>
</body>
</html>
Bagi contoh ke 2 ini pula, tag th atau 'table header' telah digunakan untuk mendapatkan efek header atau tajuk. Penggunaan tag th akan menjadikan huruf header tebal (bold) secara automatik.
Contoh Table 2 secara "live demo"
| Tajuk 1 | Tajuk 2 | Tajuk 3 |
|---|---|---|
| Baris 1, Column 1 | Baris 1, Column 2 | Baris 1, Column 3 |
| Baris 2, Column 1 | Baris 2, Column 2 | Baris 2, Column 3 |
| Baris 3, Column 1 | Baris 3, Column 2 | Baris 3, Column 3 |
| Baris 4, Column 1 | Baris 4, Column 2 | Baris 4, Column 3 |
| Baris 5, Column 1 | Baris 5, Column 2 | Baris 5, Column 3 |
Kod CSS dan HTML untuk membuat table atau jadual di atas adalah seperti berikut. Kod-kod ini adalah sama seperti contoh table 1 di atas. Perbezaan hanya kod yang berhuruf tebal, kod untuk tag th (table header) yang telah ditambah untuk mendapatkan efek tajuk.
Seperti biasa, kod berwarna maroon ialah kod-kod CSS dan yang berwarna biru kod-kod HTML. Kod "width: 150px;" memberi erti lebar setiap column adalah 150 pixel.
<html>
<head>
<style type='text/css'>
#jadual td, th {
border: 1px solid #999;
width: 150px;
background-color:#e6e6e6;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table id="jadual">
<tbody>
<tr>
<th>Tajuk 1</th>
<th>Tajuk 2</th>
<th>Tajuk 3</th>
</tr>
<tr>
<td>Baris 1, Column 1</td>
<td>Baris 1, Column 2</td>
<td>Baris 1, Column 3</td>
</tr>
<tr>
<td>Baris 2, Column 1</td>
<td>Baris 2, Column 2</td>
<td>Baris 2, Column 3</td>
</tr>
<tr>
<td>Baris 3, Column 1</td>
<td>Baris 3, Column 2</td>
<td>Baris 3, Column 3</td>
</tr>
<tr>
<td>Baris 4, Column 1</td>
<td>Baris 4, Column 2</td>
<td>Baris 4, Column 3</td>
</tr>
<tr>
<td>Baris 5, Column 1</td>
<td>Baris 5, Column 2</td>
<td>Baris 5, Column 3</td>
</tr>
</tbody>
</table>
</body>
</html>
<head>
<style type='text/css'>
#jadual td, th {
border: 1px solid #999;
width: 150px;
background-color:#e6e6e6;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table id="jadual">
<tbody>
<tr>
<th>Tajuk 1</th>
<th>Tajuk 2</th>
<th>Tajuk 3</th>
</tr>
<tr>
<td>Baris 1, Column 1</td>
<td>Baris 1, Column 2</td>
<td>Baris 1, Column 3</td>
</tr>
<tr>
<td>Baris 2, Column 1</td>
<td>Baris 2, Column 2</td>
<td>Baris 2, Column 3</td>
</tr>
<tr>
<td>Baris 3, Column 1</td>
<td>Baris 3, Column 2</td>
<td>Baris 3, Column 3</td>
</tr>
<tr>
<td>Baris 4, Column 1</td>
<td>Baris 4, Column 2</td>
<td>Baris 4, Column 3</td>
</tr>
<tr>
<td>Baris 5, Column 1</td>
<td>Baris 5, Column 2</td>
<td>Baris 5, Column 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Untuk meletakkan table/jadual ini dalam blog, sila copy & paste kod-kod di atas. Untuk kod CSS (maroon) sila letakkan dalam bahagian "edit HTML" (klik Layout->Edit HTML dan paste di bahagian atas </head>). Dan untuk kod HTML (biru) sila letakkan (paste) dalam bahagian "blog post" (pastikan anda dalam mode Edit Html bukan Compose).
Satu perkara yang perlu diingat ialah semua kod HTML mestilah dirapatkan dalam satu garisan (compressed). Ini akan memberi efek bentu jadual lebih kemas.
Contoh "compressed codes". Nota: adalah lebih baik kod-kod ini di taip terus satu persatu dalam satu garisan dan pastikan tiada ruang atau space antara satu kod dengan kod yang lain.
<table id="jadual"><tbody><tr><th>Tajuk 1</th><th>Tajuk 2</th><th>Tajuk 3</th></tr><tr><td>Baris 1, Column 1</td><td>Baris 1, Column 2</td>....
Contoh ke 3 ialah table atau jadual yang mempunyai tajuk dalam bentuk menegak (vertical) dan mewarnakan column tajuk dan column data dengan warna yang berlainan.
Contoh Table 3 secara "live demo"
| Tajuk 1 | Baris 1, Column 1 | Baris 1, Column 2 |
|---|---|---|
| Tajuk 2 | Baris 2, Column 1 | Baris 2, Column 2 |
| Tajuk 3 | Baris 3, Column 1 | Baris 3, Column 2 |
| Tajuk 4 | Baris 4, Column 1 | Baris 4, Column 2 |
| Tajuk 5 | Baris 5, Column 1 | Baris 5, Column 2 |
Kod-kod CSS dan HTML adalah seperti berikut:
<html>
<head>
<style type="text/css">
#vjadual td {
border: 1px solid #999;
width: 200px;
background-color:#ccffff;
padding: 0.1em 1em;
}
#vjadual th {
border: 1px solid #999;
width: 100px;
background-color:#99ffcc;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table>
<table id="vjadual">
<tr>
<th>Tajuk 1</th>
<td>Baris 1, Column 1</td>
<td>Baris 1, Column 2</td>
</tr>
<tr>
<th>Tajuk 2</th>
<td>Baris 2, Column 1</td>
<td>Baris 2, Column 2</td>
</tr>
<tr>
<th>Tajuk 3</th>
<td>Baris 3, Column 1</td>
<td>Baris 3, Column 2</td>
</tr>
<tr>
<th>Tajuk 4</th>
<td>Baris 4, Column 1</td>
<td>Baris 4, Column 2</td>
</tr>
<tr>
<th>Tajuk 5</th>
<td>Baris 5, Column 1</td>
<td>Baris 5, Column 2</td>
</tr>
</table>
</body>
</html>
<head>
<style type="text/css">
#vjadual td {
border: 1px solid #999;
width: 200px;
background-color:#ccffff;
padding: 0.1em 1em;
}
#vjadual th {
border: 1px solid #999;
width: 100px;
background-color:#99ffcc;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table>
<table id="vjadual">
<tr>
<th>Tajuk 1</th>
<td>Baris 1, Column 1</td>
<td>Baris 1, Column 2</td>
</tr>
<tr>
<th>Tajuk 2</th>
<td>Baris 2, Column 1</td>
<td>Baris 2, Column 2</td>
</tr>
<tr>
<th>Tajuk 3</th>
<td>Baris 3, Column 1</td>
<td>Baris 3, Column 2</td>
</tr>
<tr>
<th>Tajuk 4</th>
<td>Baris 4, Column 1</td>
<td>Baris 4, Column 2</td>
</tr>
<tr>
<th>Tajuk 5</th>
<td>Baris 5, Column 1</td>
<td>Baris 5, Column 2</td>
</tr>
</table>
</body>
</html>
Nota: Perhatikan kod #vjadual td memberi style untuk table data dan #vjadual th yang memberi style untuk table header atau tajuk.
Untuk contoh ke 4 ini pula, 2(dua) column telah diletakkan di bawah tajuk "Carnivores".
Contoh Table 4 secara "live demo"
| Carnivores | Primates | |
|---|---|---|
| Tiger | Grey Wolf | Indri |
| Cheetah | Cape hunting dog | Sifaka |
| Caracal | Red fox | Brown lemur |
| Wildcat | Fennec | Dwarf lemur |
Untuk mendapatkan efek table atau jadual seperti ini, sila gunakan kod-kod CSS dan HTML di bawah:
<html>
<head>
<style type="text/css">
#horjadual td {
border: 1px solid #999;
width: 150px;
background-color: #ccff66;
padding: 0.1em 1em;
}
#horjadual th {
width: 225px;
background-color: #ff6600;
border: 1px solid #999;
color: #fff;
text-align: center;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table>
<table id="horjadual">
<tr>
<th colspan="2">Carnivores</th>
<th>Primates</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Cheetah</td>
<td>Cape hunting dog</td>
<td>Sifaka</td>
</tr>
<tr>
<td>Caracal</td>
<td>Red fox</td>
<td>Brown lemur</td>
</tr>
<tr>
<td>Wildcat</td>
<td>Fennec</td>
<td>Dwarf lemur</td>
</tr>
</table>
</body>
</html>
<head>
<style type="text/css">
#horjadual td {
border: 1px solid #999;
width: 150px;
background-color: #ccff66;
padding: 0.1em 1em;
}
#horjadual th {
width: 225px;
background-color: #ff6600;
border: 1px solid #999;
color: #fff;
text-align: center;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table>
<table id="horjadual">
<tr>
<th colspan="2">Carnivores</th>
<th>Primates</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Cheetah</td>
<td>Cape hunting dog</td>
<td>Sifaka</td>
</tr>
<tr>
<td>Caracal</td>
<td>Red fox</td>
<td>Brown lemur</td>
</tr>
<tr>
<td>Wildcat</td>
<td>Fennec</td>
<td>Dwarf lemur</td>
</tr>
</table>
</body>
</html>
