Friday, April 3, 2015

Dasar HTML Membuat Tabel

9:53:00 PM

Kesempatan kali ini blog membahas yaitu cara membuat tabel di HTML, kegunaanya tentu sangat penting seperti contoh ingin membuat Form, tampilan sebuah database, atau untuk data data perbandingan, dll. Biasanya untuk penggunaan dalam membuat tabel akan lebih dipermudah jika menggunakan Aplikasi Dreamweaver (Adobe/ Macromedia) yaitu langsung dari tahap desainnya.

Namun perlu diketahui bahwa untuk awal, kamu juga harus perlu mengetahui dasar membuat tabel sederhana dengan menggunakan tool biasa (NOTEPAD).
Hal ini ditujukan agar dapat paham konteks, bentuk Tag yang dipakai dalam membuat tabel.

NB. Maka dalam pembahasan kali ini pun kita tetap menggunakan Notepad.
Tentu dalam tabel dalam tabel ada "baris" dan "kolom".

Berikut Tag membuat Tabel adalah <table> </table>
Penulisan Tag tabel berada di antara <body> seperti ini
<body>
                 <table>

                 </table>
 </body>
Namun Bentuk diatas belumlah cukup, yang mana tag <table> masih hanya membuat garis kosong.

Sedangkan Tag membuat Baris adalah <tr> </tr>
Penulisan Tag Baris berada diantara tag <table>

<table>
                    <tr>
                    </tr>
</table>
 Dan Tag membuat Kolom adalah <td> </td>
Penulisan Tag Kolom berada di dalam antara tag baris <tr>
Contoh Kolom 1.
<table>
                    <tr>                                        
                         <td>ISI KOLOM</td>
                    </tr>
</table>
Sehingga secara otomatis jika kita ingin membuat tabel berisi 2 kolom akan seperti ini

            Contoh Kolom 2
<table>
                    <tr>                                        
                         <td>ISI KOLOM</td>
                                <td>ISI KOLOM</td>

                    </tr>
</table>
Kode diatas adalah sebuah tabel yang berisi dua kolom seperti gambar dibawah ini

Jika ingin menambahkan baris kebawah berarti kita harus duplikasi tag <tr> tersebut seperti ini ;
 
<table>
                    <tr>                                        
                       <td>ISI KOLOM</td>
                                <td>ISI KOLOM</td>

                    </tr>
                         <tr>                                        
                                <td>ISI KOLOM</td>
                                <td>ISI KOLOM</td>

                    </tr>

</table>

Sehingga menghasilkan seperti ini ;

Demikian selanjutnya jika ingin menambah baris dan kolom misalknya 8 Baris 2 kolom,
lakukan duplikat tag <tr> baris sebanyak 8 kali, 
dan setiap 1 tag <tr> berisi 2 duplikat tag kolom <td>
Bagaimana sobat kira kira paham kan.. (hehe)


Attribut Attribut Dalam Tag Tabel Dalam tabel penggunaan Attribut berfungsi disaat seperti colntoh kita ingin memperlebar ukuran Kolom, mengganti latar tabel. Berikut attribut nya ;

Untuk mengatur lebar kolom colspan = " "
Untuk mengatur jarang antar cell cellspacing =""
Mengatur jarak pinggiran Bingkai dengan isi cellpadding =""
Mengatur latar Tabel Background =""


Sehingga Penulisan dalam Html demikian ;
 <html>
<head>
   <title>Untitled Document</title>
</head>

        <body>
           <table width="200" border="1">
                <tr>
                      <td colspan="50">ISI</td>
                       <td>ISI</td>
                </tr>
                <tr>
                      <td cellspacing="30">ISI</td>
                       <td>ISI</td>
                </tr>
           </table>
        </body>
</html>
Penjelasannya demikian :
1. Attribut yang ada pada kode tag <table> yaitu
     width="200"  berfungsi untuk menambah lebar bingkai tabel
     border="1"  berfungsi untuk menambah ketebalan Garis Bingkai agar lebih terlihat jelas

2. Attribut yang ada pada kode tag <td> (kolom) yaitu
   colspand="50" berfungsi untuk mengatur lebar pada kolom
   cellspacing="30" berfungsi mengatur jarak antar cell

demikian selanjutnya sehingga menghasilkan tabel seperti dibawah

 


Sekian mengenai cara Membuat Tabel dengan Tools sederhana, untuk postingan pembahasan selanjutnya akan segera ditambahkan di kotak komentar, atau klik Halaman Kategori DESAIN WEB diatas. Semoga Bermanfaat, dan dapat menambah refrensi kamu sobat, Terima kasih telah berkunjung.

Salam BLogger.


Klik Like atau bagikan ke teman yang ingin belajar HTML. Silahkan tinggalkan komentar jika ada yang sulit dipahami.

Ditulis oleh

Flamingo Solution | Media Informasi Seputar Teknologi dan Seni Visual

1 komentar:

  1. Makasi tambahan infonya gan...

    Bagi agan yang berminat belajar membuat web bisa dilihat di situs berikut ini Kursus Web di Denpasar

    ReplyDelete

Mari Saling Berbagi, Membangun dengan memberi kritik, saran jika ada yang kurang jelas, dan tentunya Komentar yang tidak mengandung hal NEGATIF, SARA, BERBAU PORNO GRAFI.
Salam BLOGGER

 

© 2013-2019 Flamingo Solution. All rights resevered. Designed by Templateism

Back To Top