Cara membuat Tabel menggunakan HTML

pada kesempatan pembelajaran kali ini kreasifathan ingin berbagi ilmu kepada sahabat-sahabat kreasifathan . mengenai tips-tips dalam penggunaan dalam HTML. kali ini kreasifathan akan mengambil salah satu contohnya dalam membuat tabel didalam HTML. Sebenarnya tidak terlalu sulit cara membuat table dalam HTML,  Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. fungsi pembuatan table sebenarnya banyak sekali mulai dari memberi batas dan jarak, untuk memperindah tampilan, membuat Frame  dan masih banyak yang lainya.

Untuk menampilkan dalam bentuk tabel pada HTML, digunakan tag

<table> … </table>.
Elemen tabel berisi properti <tr>…</tr> untuk menentukan baris (table row) yang didalamnya terdapat properti <td>…</td> untuk menampilkan data pada setiap sel tabel (table data) Struktur lengkap dari elemen tabel adalah sebagai berikut:


-Atribut Elemen Table

width               = panjang ( lebar tabel, pixel atau persen )
height              = panjang ( tinggi tabel, pixel atau persen)
border             = pixel ( tebal garis tepi )
cellspacing     = pixel ( spasi antar sel )
cellpadding     = pixel ( spasi di dalam )
align                = [ left | center | right ] ( perataan tabel)
bgcolor           = warna ( warna latar belakang tabel)


-Atribut Table Row

align              = [ left | center | right ] (perataan sebaris sel secara horizontal)
valign            = [ top | middle | bottom ] (perataan sebaris sel secara vertical)
bgcolor         = warna ( warna latar belakang baris)


-Atribut Table Data

rowspan    = angka (baris yang di span oleh sel)
colspan     = angka (kolom yang di span oleh sel)
align          = [ left | center | right ] ( perataan horizontal)
valign        = [top | middle | bottom ] (perataan vertical)
width         = pixel ( lebar sel, pixel atau persen )
height        = panjang ( tinggi sel, pixel atau persen)
bgcolor     = warna ( warna latar belakang sel)

 Contoh pembuatan tabel dan tatak letaknya

Code:

<table width="294" border="1">

<tr>

<td width="81" height="33">atas kiri</td>

<td width="87">atas tengah </td>

<td width="104">atas kanan </td>

</tr>

<tr>

<td height="35">tengah kiri </td>

<td>tengah tengah </td>

<td>tengah kanan </td>

</tr>

<tr>

<td height="35">bawah kiri </td>

<td>bawah tengah </td>

<td>kiri bawah</td>

</tr>

</table>

 hasilnya akan seperti ini:

atas kiri	atas tengah	atas kanan
tengah kiri	tengah tengah	tengah kanan
bawah kiri	bawah tengah	kiri bawah

semoga bermanfaat :)

thank's for visiting

sisipkanlah komentar serta kritikan kawan-kawan, demi kelancaran blog ini...