468x60 Ads

Senin, 09 April 2012

Membuat Tabel dengan Html

untuk membuat tampilan seperti gambar di atas, berikut listing code nya:

<html>
    <head><title> Tabel </title></head>
    <body>
        <table border="1" width="80%">
            <caption> Data Masyarakat </caption>
            <tr>
                <td colspan="3"> I. Data Masyarakat </td>
                <td colspan="3" align="center"> Diisi oleh Petugas </td>
            </tr>
            <tr>
                <td width="20%"> Nomor Responden </td>
                <td colspan="2">&nbsp</td>
                <td align="center"> 01 </td>
                <td align="center"> 02 </td>
                <td align="center"> 03 </td>
            </tr>
            <tr>
                <td width="20%"> Umur </td>
                <td colspan="2"> &nbsp </td>
                <td colspan="3">
                <table border="1" width="100%">
            <tr>
                <td width="50%" align="center">2</td>
                <td width="50%" align="center">7</td>
            </tr>
        </table>
            <tr>
                <td width="20%"> Jenis Kelamin</td>
                <td width="20%">
                    <ol>
                        <li>Laki-laki</li>
                    </ol>
                </td>
                <td width="20%">
                    <ol >
                        <li>Perempuan</li>
                    </ol>
                </td>
                <td colspan="3" align="center"> 1 </td>
            </tr>
            <tr>
                <td width="20%">Pendidikan Terakhir</td>
                <td width="20%">
                    <ol>
                        <li>SD ke Bawah</li>
                        <li>SLTP</li>
                        <li>SLTA</li>
                    </ol>
                </td>
                <td width="20%">
                    <ol >
                        <li>D1-D2-D3-D4</li>
                        <li>S-1</li>
                        <li>S-2 keatas</li>
                    </ol>
                </td>
                <td colspan="3" align="center">3</td>
            </tr>
            <tr>
                <td width="20%">Pekerjaan Utama</td>
                <td width="20%">
                    <ol>
                        <li>PNS/TNI/POLRI</li>
                        <li>Pegawai Swasta</li>
                        <li>Wirausaha/Usahawan</li>
                    </ol>
                </td>
                <td width="20%">
                    <ol>
                        <li>Pelajar/Mahasiswa</li>
                        <li>Lainnya</li>
                    </ol>
                </td>
                <td colspan="3" align="center">1</td>
            </tr>
            <tr>
                <td colspan="6" width="80%">Ket : Lingkari kode angka sesuai jabatan masyarakat</td>
            </tr>
            <tr>
                <td colspan="6" width="80%">II. Data Pencacah/Pengumpul Data</td>
            </tr>
            <tr>
            <td colspan="6">
            </tr>
        <table border="1" width="80%">
            <tr>
                <td width="50%">Nama</td>
                <td width="50%">Imron Hamzah</td>
            </tr>
        </table>
            <tr>
                <td colspan="6">
            </tr>
        <table border="1" width="80%">
            <tr>
                <td width="50%">Nim</td>
                <td width="50%">09.240.0036</td>
            </tr>
    </body>
</html>

Silahkan bisa diganti isiannya.
Selamat mencoba

0 komentar:

Posting Komentar