Rabu, 20 Juni 2012

Membuat tabel pada html

<html>
                <head>
                                <title>Struktur Table</title>
                </head>
                <body>
<table border=”1”>
                                <tr>
                                                <td>data baris 1 kolom 1</td>
                                                <td>data baris 1 kolom 2</td>
                                </tr>

                                <tr>
                                                <td>data baris 2 kolom 1</td>
                                                <td>data baris 2 kolom 2</td>
                                </tr>
                                <tr>
                                                <td>data baris 3 kolom 1</td>
                                                <td>data baris 3 kolom 2</td>
                                </tr>
                </table>
</body>
</html>

Maka akan terlihat seperti ini strukturnya :

Sekarang saya akan menjelaskan atribut yang terdapat dalam tag <table>.
Atribut elemen table :
Width                    = Lebar tabel
Height                   = tinggi table
Border                  = tebal garis table
Cellspacing          = spasi antar sel
Cellpadding        = spasi di dalam sel
Align                      = [left | center | right] perataan table
Bgcolor                 = warna latar belakang table
Atribut table row
Align                      = [left | center | right] perataan sebaris sel secara horizontal
Valign                    = [top | middle | bottom] perataan sebaris sel secara vertical
Bgcolor                 = warna latar belakang baris
Atribut table data :
Rowspan             = menggabungkan baris
Colspan                                = menggabungkan kolom
Align                      = [left | center | right] perataan horizontal
Valign                    = [top | middle | bottom] perataan horizontal
Width                    = lebar sel
Height                   = tinggi sel
Bgcolor                 = warna latar belakang sel
Ketikan script HTML berikut pada note pad lalu simpan dengan ekstensi .HTML lalu jalankan untuk mencobanya.
<html>
                <head>
                                <title>Tabel</title>
                </head>
                <body>
                Berikut ini contoh table dengan rowspan dan colspan
                          <table width=80% border=2 cellspacing=0 cellpading=0>
                                 <tr>
                                                <td>baris 1 kolom 1</td>
                                                <td>baris 1 kolom 2</td>
                                 </tr>
                                 <tr>
                                                <td colspan=2>baris 2 kolom 1</td>
                                 </tr>
                                 <tr>
                                                <td rowspan=2>baris 3 kolom 1</td>
                                                <td>baris 3 kolom 2</td>
                                 </tr>
                                 <tr>
                                                <td>baris 4 kolom 2</td>
                                 </tr>
                         </table>
            </body>
</html>

Tidak ada komentar:

Posting Komentar