Sabtu, 09 Januari 2016

Tutorial Cara Pembuatan Tabel Bersarang

Pertama saya ucapkan selamat datang di blog saya,mungkin kalian sudah tau apa itu tabel bersarang?nah di sini saya akan menjelaskan sedikit tentang "Apa itu tabel bersarang",ya langsung saja tabel bersarang adalah tabel dalam website yang banyak digunakan untuk menyajikan informasi yang terdiri dari baris dan kolom agar tampak lebih rapi dan mudah dipahami yang melalui Notepad ataupun Notepad++.


Berikut adalah contoh kode membuat table sederhana dalam html :

<html>
<head>
</head>
<body>
    <table border="1" cellpadding="5">
    <caption>Online Order</caption>
    <tr>
        <th>Description</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Email Account Note</th>
    </tr>
   
   
    <tr>
        <td>Email Account</td>
        <td>10</td>
        <td>$9.90</td>
        <td rowspan="5">
            <table border="1">
                <tr><td>Mailbox</td><td>10GB</td></tr>
                <tr><td>Webmail</td><td>Yes</td></tr>
                <tr><td>POP3</td><td>Yes</td></tr>
                <tr><td>IMAP</td><td>Yes</td></tr>
                <tr><td>Anti-spam</td><td>Yes</td></tr>
            </table>
        </td>
    </tr>
   
    <tr>
        <td>FYIcenter.com ad</td>
        <td align="right">1</td>
        <td align="right">$99.00</td>
    </tr>
   
    <tr>
        <td>1-years Acces</td>
        <td align="right">1</td>
        <td align="right">$199.00</td>
    </tr>
   
    <tr>
        <td colspan="2">Shipping</td>
        <td>$3.99</td>
    </tr>
   
    <tr>
        <td colspan="2">Tax</td>
        <td>$15.99</td>
    </tr>
    </table>
</body>
</html>


Contoh gambar dalam pembuatan code di dalam Notepad++ :

      Gambar 1.
    





     Gambar 2.                                                                        




      Gambar Hasil dari coding di atas.                                                                                  

Tidak ada komentar:

Posting Komentar