Pages

Kamis, 20 Januari 2011

Cara Membuat Tabel Pada Html Menggunakan Ukuran

Contoh-contoh tabel pada HTML dengan berbagai macam ukuran...

ini contoh script..

<font face="kristen ITC" color="#FF00FF" size="4">Latihan !<br /><br />
<br />

no 1
<table border="1" width="400px" height="300px">
    <tr>
        <td width="50px" colspan="2" align="center">
        - - :) - -</td>
    </tr>
   

    <tr>
        <td width="50px" height="250px" align="center">
        - - :) - -</td>
        <td align="center">- - :) - -</td>
    </tr>
</table><br /><br />

no 2
<table border="1" width="100%" height="100%">
    <tr>
        <td width="20%" height="100%" rowspan="2" align="center">- - :) - -</td>
        <td width="80%" height="20%" align="center">- - :) - -</td>
    </tr>
   
    <tr>
        <td height="80%" align="center">- - :) - -</td>
    </tr>
</table><br /><br />

no 3
<table border="1"  width="100%" height="300">
    <tr>
        <td colspan="3" width="100%" height="50" align="center">- - :) - -</td>
    </tr>
    <tr>
        <td width="200" height="35%" align="center">- - :) - -</td>
        <td width="60%" height="35%" align="center">- - :) - -</td>
        <td width="20%" height="35%" align="center">- - :) - -</td>
    </tr>
    <tr>
        <td colspan="3" width="100%" height="50" align="center">- - :) - -</td>
    </tr>
</table><br /><br />


no 4
<table border="1" width="100%" height="400">
    <tr>
        <td colspan="2" width="100%" height="20%" align="center">- - :) - -</td>
        <td rowspan="2" width="30%" height="200" align="center">- - :) - -</td>
    </tr>
    <tr>
        <td rowspan="2" width="35%" height="80%" align="center">- - :) - -</td>
        <td width="35%" height="40%" align="center">- - :) - -</td>
    </tr>
    <tr>
        <td width="35%" height="200" align="center">- - :) - -</td>
        <td width="30%" height="200" align="center">- - :) - -</td>
    </tr>
</table>

ini hasil tabel nya...


Latihan !





no 1

- - :) - -

- - :) - -
- - :) - -




no 2
- - :) - - - - :) - -
- - :) - -




no 3
- - :) - -
- - :) - - - - :) - - - - :) - -
- - :) - -





no 4
- - :) - - - - :) - -
- - :) - - - - :) - -
- - :) - - - - :) - -