Saturday, November 7, 2009

Membuat Table dengan kode HTML

Bagian 1: HTML | Bagian 2: HTML Attribute | Bagian 3: Table HTML | Bagian 4: Colspan dan Rowspan

Table dibuat dengan table tag (<tag>). Table terbuat dari baris (<tr>) dan kolom (<td>). Tr artinya table row dan td artinya table data.
  • Untuk mulai membuat table anda perlu table tag pembuka yaitu <table> dan untuk mengakhiri anda tutup dengan table tag penutup yaitu </table>.
  • Untuk memulai membuat baris table horizontal anda perlu tag pembuka <tr> dan setelah memasukkan beberapa kolom anda perlu menutupnya kembali dengan tag penutup </tr>.
  • Untuk memulai membuat kolom table, seperti biasa anda juga memerlukan tag pembuka <td> dan setelah memasukkan data- data anda perlu menutupnya kembali dengan tag penutup </td>.
  • Jika hendak membuat kolom baru lagi dalam satu baris, anda tinggal ulang langkah cara membuat kolom yang sudah dijelaskan diatas sebelum menutupnya dengan tag penutup baris yaitu </tr>.
Berikut anda bisa lihat contohnya untuk pemahaman yang lebih baik:



<table>

<tr>

<td>Kotak A</td>

<td>Kotak B</td>

</tr>

<tr>

<td>Kotak C</td>

<td>Kotak D</td>

</tr>

</table>









Kotak AKotak B
Kotak CKotak D

Anda bisa melihat susunan kode HTMLnya di sebelah kiri dan hasilnya di sebelah kanan.
Berikut cara kerjanya:

Cara membuat Table dengan kode HTML
Rows = barisan kotak horizontal.
Columns = barisan kotak vertical.

Anda juga bisa menambahkan attribute untuk menyetel lebar, warna, posisi atau ketebalan garis border pada table. Berikut adalah salah satu contoh susunan html table dengan attribute, attributenya saya highlight dengan warna merah:

<table width="513" height="166" border="3" align="center" bordercolor="yellow" bgcolor="green">

<tr>

<td align="right" valign="top"><strong>Lihat text aku sekarang..<br />
Text aku muncul diatas kanan dalam table</strong></td>

</tr>

</table>

Hasilnya akan seperti ini:

Lihat text aku sekarang,..

Text aku muncul di sudut atas kanan dalam table

“valign” adalah nama attribute yang digunakan untuk mengatur posisi vertical konten dalam table.
“Align” adalah nama attribute yang digunakan untuk mengatur posisi horizontal konten dalam table.



1 comment: