Jun 29, 2010

Buat Table Dalam Pos


PIALA DUNIA 2010 AFRIKA SELATAN
26/06/10 Uruguay 2:1 Korea Selatan
27/06/10 Ghana 2:1 USA
27/06/10 Jerman 4:1 England
28/06/10 Argentina 3:1 Mexico
28/06/10 Belanda 2:1 Slovakia
29/06/10 Brazil 3:0 Chile
Contoh Table 1

Seblum buat kod untuk Contoh Table 1, kena masukkan dulu dalam pos dia punya kod CSS seperti berikut:


<style type="text/css">
table.contoh1 {
width: 500px;
background-color: #fafafa;
border: 5px #000000 solid;
margin-left: 15px;
font-size: small;
font-weight: bold;
border-style: inset;
}

td.hed {
background-color: #666;
border: 2px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: center;
color: #fff;
padding: 5px;
border-style: inset;
}

td.date {
width: 20%;
background-color: #99CCCC;
border: 2px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: center;
padding: 5px;
color: #404040;
border-style: inset;
}

td.team1 {
width: 35%;
background-color: #99CCCC;
border: 2px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: right;
padding: 5px;
color: #404040;
border-style: inset;
}

td.score {
width: 10%;
background-color: #99CCCC;
border: 2px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: center;
padding: 5px;
color: #404040;
border-style: inset;
}

td.team2 {
width: 35%;
background-color: #99CCCC;
border: 2px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: left;
padding: 5px;
color: #404040;
border-style: inset;
}

.nobr br {
display: none
}
</style>

Selepas masukkan kod CSS> di atas baru buat kod untuk Contoh Table 1 seperti berikut:


<div class="nobr">
<table class="contoh1" cellspacing="5" cellpadding="0"><tbody>

<tr>

<td class="hed" colspan="4">PIALA DUNIA 2010 AFRIKA SELATAN</td>
</tr>

<tr>
<td class="date">26/06/10</td>
<td class="team1">Uruguay <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWh4f4li7oH_EALiHBLQ7CDo_qnTjTdiqaFiLXnuOpe1TF6hLp75hsrNofG6zljO_9hneirJsuHSyKNVJeyMB5PeeUTJFs6Hc471QqYOzCyssz48npIMMV1f-v5eAY_RyVMXkP0sVJuTg/s800/Uruguay.jpg" /></td>
<td class="score">2:1</td>
<td class="team2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIae_SBPimZMUtt9aHlbxb6vyFr0RZ9ZG4oWpmZcNPnSKNnM8v7qJfB1zj_HAPOI_RfYitOrJg5FsZCKlhztP1-dR2rtmU_PYK19Ep7KzPprUx1OBNszAGua21tJkc313ZxwOjVSGovoQ/s800/Korea.jpg" /> Korea Selatan</td>
</tr>

<tr>
<td class="date">27/06/10</td>
<td class="team1">Ghana <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7D7SaDNNl9lJ8IElFvcXgAmG6DVwOCJNd3kkBqR3RKqt6wrmVBjgy_U0QNqreqYvDWyh49o6ELfgLgjA7TGR_9S4AWWXHbJe-mJQgoVAx8VXYTA8chIjfOeAaIxnYTtDeGbrsYJieeew/s800/Ghana.jpg" /></td>
<td class="score">2:1</td>
<td class="team2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJDyBIjdHaipu0tZgrXM5arRRiz68zhSswClvsRYC_g2FqI3bGvJ9m1exoDI9n5LM1evnokVYb0w38OEO0ctmNpuCTTqdit7aXPFFzNuNHFyN0fDdttLerqmLdBZIo5j0cIZ0Fc3Kiwzw/s800/usa.jpg" /> USA</td>
</tr>

<tr>
<td class="date">27/06/10</td>
<td class="team1">Jerman <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJDoV2UNp2yj4ynUkd4CXmVEhNqQzu2liXYQwIE2IW2YWfxjtiblBPqzsxWaGy8cTdqr7Dcz05iNlDCH7TuF9C3klOB2pdhr4E_cLUqSPZc1Y2wyU-nZSCKsEe-WqzgQ50LmScd8hxU04/s800/Germany.jpg" /></td<
<td class="score">4:1</td>
<td class="team2"><img src="http://lh3.ggpht.com/_AkrTrvrxAwY/TCn787JaFKI/AAAAAAAAArw/x3KBmd5LXyY/s800/England.jpg" /> England</td>
</tr<

<tr>
<td class="date">28/06/10</td>
<td class="team1">Argentina <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAug9j5b2oSRp647V3_rUqc_o0uriNbw2XzB_sqd7pXZlomQigv3Co3qD-qro38J6lUKS77ZjwGGBx2AG4UtqbqGm5onYbOyUdi_EAaUTUaofao-eh4KOjik45Q29U5bb0605-j4r02ic/s800/Argentina.jpg" /></a></td>
<td class="score">3:1</td>
<td class="team2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1xgZS6Z9u8a-ENX_l4c5l2d9QbRVBrCSDUPTdqtpJbhdRWgmP9Q_K_adCDMDueqPegma7pD_n7u0wu7ynDpFi8HWFgSdBMj0ycFl26vV9A66rg1fqg0HRBdOXD4ZTOWW78fn-knFIZU/s800/Mexico.jpg" /> Mexico</td>
</tr>

<tr>
<td class="date">28/06/10</td>
<td class="team1">Belanda <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRe0ldLYaL4LJJxHsD8n7eZttlxAPTuoMgj7cBwCjOzmwBHSUgyI6IHZQotCVy3r_ozpPIVkWPO98I1IibliberIdSw5KaD2RXG4CipLzFv6nreNMopdUpKc94ecALaxBQ1co1xQB8q20/s800/Netherland.jpg" /></td>
<td class="score">2:1</td>
<td class="team2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1qi0NvFiVsOZ7AjEl8MlBO6Gu8f-kk_9xbPca-Xj3rKKVtzie9lLCCBplNZCQz7Mf1hO6oEzZiVKNR2HaKopnUOiHgbaGYNDlEmssy-QIA4XGcYjNP0UhGNqy08zGDXgx5cVhWB3XIYA/s800/Slovakia.jpg" /> Slovakia</td>
</tr>

<tr>
<td class="date">26/06/10</td>
<td class="team1">Brazil <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXiEz6CkW50qEaOLB_1XTq-D-B1wD0HyGADNVMbMtivKzjcoI8CmzVtNSeaVzeyRxoK6uNE3V-6dJ98SRHv0Vp0SjcxJDV9M0x8R5M336pIO0VpP8Tc4DeV0tlIeR4x7uiqecHCuJFi3c/s800/Brazil.jpg" /></td>
<td class="score">3:0</td>
<td class="team2"><img src="http://lh5.ggpht.com/_AkrTrvrxAwY/TCn784XsPtI/AAAAAAAAArs/QKa2NYkRU5I/s800/Chile.jpg" /> Chile</td>
</tr>

</tbody></table></div>
<span style="font-size: small; padding-left: 15px;">Contoh Table 1</span>



2. Contoh Table 2:

T A J U K T A B L E
1.Sel duaSel tigaSel empatSel lima
2.Sel duaSel tigaSel empatSel lima
3.Sel duaSel tigaSel empatSel lima
4.Sel duaSel tigaSel empatSel lima
5.Sel duaSel tigaSel empatSel lima
Contoh Table 2

2.1 Sebelum buat Contoh Table 2, masukkan kod CSS untuk table ini dalam pos blog seperti berikut:

<style type="text/css">
table.contoh2 {
width: 500px;
border: 1px #000000 solid;
margin-left: 15px;
font-size: small;
font-weight: bold;
border-style: inset;
}

td.tajuk {
border: 1px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: center;
padding: 8px;
border-style: inset;
}

td.kolom {
width: 20%;
border: 1px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: center;
padding: 5px;
border-style: inset;
}
</style>

2.2 Lepas itu baru masukkan kod untuk Contoh Table 2 seperti berikut:

<table cellpadding="0" cellspacing="3" class="contoh2"><tbody>

<tr>
<td class="tajuk" colspan="5">T A J U K T A B L E</td>
</tr>

<tr>
<td class="kolom">1.</td>
<td class="kolom">Sel dua</td>
<td class="kolom">Sel tiga</td>
<td class="kolom">Sel empat</td>
<td class="kolom">Sel lima</td>
</tr>

<tr>
<td class="kolom">2.</td>
<td class="kolom">Sel dua</td>
<td class="kolom">Sel tiga</td>
<td class="kolom">Sel empat</td>
<td class="kolom">Sel lima</td>
</tr>

<tr>
<td class="kolom">3.</td>
<td class="kolom">Sel dua</td>
<td class="kolom">Sel tiga</td>
<td class="kolom">Sel empat</td>
<td class="kolom">Sel lima</td>
</tr>

<tr>
<td class="kolom">4.</td>
<td class="kolom">Sel dua</td>
<td class="kolom">Sel tiga</td>
<td class="kolom">Sel empat</td>
<td class="kolom">Sel lima</td>
</tr>

<tr>
<td class="kolom">5.</td>
<td class="kolom">Sel dua</td>
<td class="kolom">Sel tiga</td>
<td class="kolom">Sel empat</td>
<td class="kolom">Sel lima</td>
</tr>

</tbody></table>

<span style="font-size: 10px; font-weight: bold; padding-left: 15px;">Contoh Table 2</span>

2.3 Jika sekiranya kod CSS seperti contoh di atas tidak berfungsi dalam pos blog, kita terpaksa masukkan semua kod atau tag dalam CSS ini terus ke dalam kod table seperti berikut:

<table cellpadding="0" cellspacing="3" style="width: 500px; border: 1px #000000 solid; margin-left: 15px; font-size: 12px; font-weight: bold; border-style: inset;"><tbody>

<tr>
<td colspan="5" style="border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: small; font-weight: bold; text-align: center; padding: 8px; border-style: inset;">T A J U K    T A B L E</td>
</tr>

<tr>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">1.</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel dua</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel tiga</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel empat</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel lima</td>
</tr>

<tr>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">2.</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel dua</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel tiga</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel empat</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel lima</td>
</tr>

<tr>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">3.</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel dua</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel tiga</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel empat</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel lima</td>
</tr>

<tr>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">4.</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel dua</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel tiga</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel empat</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel lima</td>
</tr>

<tr>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">5.</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel dua</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel tiga</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel empat</td>
<td style="width: 20%; border: 1px #000000 solid; font-family: Trebuchet MS, Verdana; font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-style: inset;">Sel lima</td>
</tr>

</tbody></table>

2.4 Dengan contoh yang diberi diharap anda dapat menyediakan satu table dengan kandungan isinya yang sesuai dengan keperluan sendiri.


Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

Posted by Calipso at 10:17 PM

1 comments:

Mama3Q said... [Balas komen ini]

SALAM,saya mengambil contoh kod utk table 2, dan di situ ada 5 kolum, bagaimana mahu menambah kolum dan baris bawah supaya sesuai dengan keperluan saya..terima kasih atas tunjuk ajar..

October 23, 2011

Post a Comment

Subscribe to: Post Comments (Atom)