Cataloged AutobiographyBERKENAAN 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


MEMBINA TABLE
April 14, 2008
Posted by: Fauzie
Dalam rencana ini kita akan berlajar bagaimana hendak membina table di dalam Blog Posts dan juga di bahagian sidebar. Sebagai permulaan, sila lihat contoh table yang telah dibina ini.
Tinggi:2m
Berat:180 kg

Contoh table di atas menggunakan kod-kod Html berikut.

<table width="470" border="1"cellspacing="2" cellpadding="2"><tbody>
<tr><td>Tinggi:</td>
<td>2 m</td>
</tr>
<tr>
<td>Berat:</td>
<td>180 kg</td>
</tr>
</tbody></table>


Jika anda hendak memasukkan table di bahagian sidebar, klik
Layout->Add a Page Element dan klik "HTML/JavaScript. Kemudian
copy/paste kod-kod di atas dan klik Save Template.

Membina Table Mempunyai Tajuk

No.BarangQty
1.Pinggan50
2.Cawan22
3.Mangkok30

Table di atas telah dibina dengan memasukkan kod-kod Html berikut:

<table border="1" cellpadding="1" cellspacing="0"width="200"><tbody>
<tr>
<th>No.</th>
<th>Barang</th>
<th>Qty</th>
</tr>
<tr>
<td>1.</td>
<td>Pinggan</td>
<td>50</td>
</tr>
<tr>
<td>2.</td>
<td>Cawan</td>
<td>22</td>
</tr>
<tr>
<td>3.</td>
<td>Mangkok</td>
<td>30</td>
</tr>
</tbody>
<table>


Membina Table Mempunyai Berbilang Row dan Column
    MENU
    Hidangan 1SaladRM 1.00
    SupRM 2.00
    Hidangan 2IkanRM 3.00
    AyamRM 4.00
    KambingRM 5.00

    Kod-kod Untuk Table di atas adalah seperti berikut:

    <table border="1" cellpadding="0"
    cellspacing='0" width="300">><tbody>
    <tr>
    <td colspan="3">MENU</td>
    </tr>
    <tr>
    <td rowspan="2">Hidangan 1</td>
    <td>Salad</td>
    <td>RM 1.00</td>
    </tr>
    <tr>
    <td>Sup</td>
    <td>RM 2.00</td>
    </tr>
    <tr>
    <td rowspan="3">Hidangan 2</td>
    <td>Ikan</td>
    <td>RM 3.00</td>
    </tr>
    <tr>
    <td>Ayam</td>
    <td>RM 4.00</td>
    </tr>
    <tr>
    <td>Kambing</td>
    <td>RM 5.00</td>
    </tr>
    </tbody>
    </table>


    Nota:

    Row atas sekali adalah cantuman 3 column. Pada tag <td> kita telah masukkan
    colspan="3"yang menunjukkan perkataan MENU merangkumi 3 column.

    Pada row kedua di mana kita meletakkan perkataan Hidangan 1, kita masukkan
    rowspan="2" yang bermaksud perkataan ini merangkumi 2 row.

    Perkataan Hidangan 2 merangkumi 3 row. Di sini kita masukkan rowspan="3" dalam
    tag <td>.


    Mewarnakan Border dan Latarbelakang Table

    Garisan border dan latarbelakang table boleh diwarnakan dengan memasukkan kod-kod yang sesuai. Sila lihat contoh di bawah table yang diwarnakan dan juga kod-kod yang dimasukkan:

    Tinggi:2 m
    Berat:180 kg:


    <table width="200" border="1"bordercolor="#ff0000"
    cellspacing="2" cellpadding="2"><tbody>
    <tr>
    <td bgcolor="#52f3ff">Tinggi:</td>
    <td bgcolor="#b5eaaa">2 m</td>
    </tr>
    <tr>
    <td bgcolor="#c3fdb8">Berat:</td>
    <td bgcolor="#bdedff">180 kg</td>
    </tr>
    </tbody>
    </table>



    Kembali ke Arkib
    Box 1
    Klik Icon