HTML Table

HTML Tabel

Dalam kesempatan kali ini untuk membuat table dalam HTML kita akan menggunakan aplikasi bawaan Adobe, yaitu Dreamweaver, aplikai ini dapan mempermudah anda untuk membuat HTML dengan cepat dan mudah. Kali ini saya menggunkaan Dreamweave CS 6.

·         Pertama buka Aplikasi Dreamweaver,

·         Pilih menu HTML untuk mulai membuat html.

Kemudian akan tampak lebar baru HTMl, pilih menu tampilan split untuk melihat code html dan hasil jadinya sekaligus.

·         Untuk membuat Table ada beberapa cara dalam dreamweaver. Tentu saja cara yang pertama memasukan sintagnya dalam code html. Untuk sintag table sendiri adalah:
<table>……………..</table>

Dalam table ada yang diistilahkan dengan baris dan kolom. Dalam penulisan html juga berprinsip sama. Kolom diistilahkan dengan <td>..</td> dan kolom diistilahkan dengan <tr>….</tr>. Namun perlu diketahui bahwa dalam menuliskan kolom, dan baris di HTML, kolom adatu <td>  harus berada dalam baris <tr>.
Sehingga untuk membuat 3 kolom dan 2 baris sintagnya:

<table width="348" border="1"> <tr> <td width="106">kolom 1 baris 1</td> <td width="106">kolom2 baris 1</td> <td width="107">kolom3 baris 1</td> </tr> <tr> <td>kolom 1 baris 2</td> <td><p>kolom 2 baris 2</p></td> <td>kolom 3 baris 2</td> </tr> </table>

Maka hasilnya

·         Yang kedua menggunakan menu yang telah disediakan Dreamweaver

Untuk memnuat table pilih menu Insert  -> Table, atau menggunakan tobol shortcut Ctrl+Alt+T

Kemuadaian akan mucul jendel menu table,

menu table tersebut mewakili atribut dasar  yang ada dalam table. Menu  Rows untuk jumlah baris. Ditulis dengan tag <tr>

Menu colome  untuk Jumlah kolom. Ditulis dengan tag <td>

Border untuk untuk mengatur tebal bingkai table.  Ditulis dengan tag border=”1”

Table width untuk mengatur lebar table. Ditulis dengan tag width="200"

Cell spacing untuk mengatur lebar tiap cell. Ditulis dengan tag  cellspacing="3"

Cell padding untuk mengatur jarak antara cell. Ditulis dengan tag  cellpadding="2"

Dalam Dreamweaver akan tampak seperti:

Tips dalam Coding

Anda tidak bisa yakin bagaimana HTML akan ditampilkan. Jendela besar atau kecil layar, dan ukurannya akan menciptakan hasil yang berbeda. Dengan HTML, Anda tidak dapat mengubah output dengan menambahkan spasi ekstra atau baris tambahan dalam kode HTML Anda. Browser akan menghapus spasi ekstra dan garis ekstra saat halaman ditampilkan. Setiap jumlah baris dihitung sebagai satu baris, dan sejumlah ruang dihitung sebagai satu spasi.