-->

Halo !!! Saya Kang Ismet, ini adalah blog tentang AMP HTML dan cara penerapannya

Cara membuat Table HTML

Table HTML icon

TABEL HTML

Table digunakan untuk menyajikan data dalam bentuk kolom dan baris.umumnya setiap kolom menunjukkan data yang sejenis,dan setiap baris yang terdiri atas kolom2 menunjukkan kelompok data dalam satu kesatuan.
Sebuah table mempunyai judul tempat anda menjelaskan kolom/baris yang di libatkan,baris untuk informasi dan sel untuk setiap itemnya,setiap baris menjelaskan sebuah tag table HTML, dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi TAG 

Elemen Elemen di dalam table :

<table> </table> : mendefinisikan sebuah table dalam HTML jika attribute border dituliskan maka browser akan menampilkan table dengan border.
<caption> </caption> mendifinisikan tulisan untuk judul table 
<tr> </tr> menspesifikasikan sebuah baris table dalam table. 
<th> </th> mendefinisikan sel header dalam table 
<td> </td> menspesifikasikan sebuah sel data table 

Attribute di dalam table :

<align”left|center|right”> : aligment horizontal dalam table 
<valign=”top|middle|bottom” >: defenisi aligment vertical dalam sel 
<colspan=”#” > : jumlah # kolom sel di perlebar 
<Rowspan=”#”> : jumlah # baris sel di perlebar 
<nowrap> : matikan wrapping dalam sel 


  • Contoh latihan 1 membuat table : 
<body> 
<table border="1"> 
<tr> 
<td> kolom pertama baris pertama </td> 
<td> kolom kedua baris pertama </td> 
</tr> 
<tr> 
<td> kolom kedua baris pertama </td> 
<td> kolom kedua baris kedua </td> 
</table> 
</body> 

HasiL 1:
Table HTML







  • Contoh latihan ke dua menggunakan border : 
<body> 
<table border="5"> 
<tr> 
<td> kolom pertama baris pertama </td> 
<td> kolom kedua baris pertama </td> 
</tr> 
<tr> 
<td> kolom kedua baris pertama </td> 
<td> kolom kedua baris kedua </td> 
</table> 
</body> 

Hasil 2:
Table HTML







  • Contoh latihan 3 tabel dengan menggunakan caption : 
<body> 
<table border="3"> 
<caption> JUDUL DARI TABLE </caption> 
<tr> 
<td> kolom pertama baris pertama </td> 
<td> kolom kedua baris pertama </td> 
</tr> 
<tr> 
<td> kolom kedua baris pertama </td> 
<td> kolom kedua baris kedua </td> 
</table> 
</body> 

Hasil 3 :
Table HTML







  • Contoh ke 4 dengan menggunakan colspan : 
<body> 
<table border="3"> 
<tr> 
<td colspan="2" align="center"> kolom pertama menggunakan colspan </td> 
</tr> 
<tr> 
<td> kolom kedua baris pertama </td> 
<td> kolom kedua baris kedua </td> 
</tr> 
<tr> 
<td> kolom ketiga baris pertama </td> 
<td> kolom ketiga baris kedua </td> 
</tr> 
<tr> 
<td colspan="2" align="center"> kolom pertama menggunakan colspan </td> 
</tr> 
</table> 
</body> 

Hasil 4:
Table HTML









  • Contoh ke 5 dengan menggunakan Rowspan : 
<body> 
<table border="1"> 
<tr> 
<td rowspan="5"> kolom rowspan </td> 
<td> kolom pertama </td> 
</tr> 
<tr> 
<td> kolom dua </td> 
</tr> 
<tr> 
<td> kolom dua </td> 
</tr> 
<tr> 
<td> kolom dua </td> 
</tr> 
<tr> 
<td> kolom dua </td> 
</tr> 
</table> 
</body> 

Hasil 5 :
Table HTML












Contoh dengan menggunakan cellpadding & cellspacing 
Cellpadding merupakan cara untuk membuat spasi lebih dari antara sel dan bordernya sedangkan 
Cellspacing merupakan cara untuk menamabh jarak antara sel 

  • Contoh cellpadding dengan value=9 dan cellspacing dengan value=5 
<body> 
<table border="1" cellspacing="9" cellpadding="5"> 
<tr> 
<td> kolom pertama baris pertama </td> 
<td> kolom kedua baris pertama </td> 
</tr> 
<tr> 
<td> kolom kedua baris pertama </td> 
<td> kolom kedua baris kedua </td> 
</table> 
</body> 

Hasil 6:
Table HTML









  • Contoh membuat warna background dalam table dengan menggunakan bgcolor & background 
<body> 
<table border="1"> 
<tr> 
<td rowspan="5" background="http://3.bp.blogspot.com/-KXo1Q6lrFFk/UOnFz80kWUI/AAAAAAAAAG4/PAq9kPzc_Ac/s1600/11111111.png"> kolom rowspan </td>
<td bgcolor="red">nama kolom </td> 
</tr> 
<tr> 
<td bgcolor="yellow">nama kolom </td> 
</tr> 
<tr> 
<td>nama kolom </td> 
</tr> 
<tr> 
<td>nama kolom </td> 
</tr> 
<tr> 
<td bgcolor="green">nama kolom </td> 
</tr> 
</table> 
</body> 

Hasil 7:
Table HTML












  • Cara mengatur tinggi dan lebar table dengan width dan height : 
<body> 
<table border="1" width="500" height="150"> 
<tr> 
<td> isi kolom </td> 
<td> isi kolom </td> 
</tr> 
<tr> 
<td> isi kolom </td> 
<td> isi kolom </td> 
</table> 
</body>

Hasil 8 :
Table HTML






Untuk Lebih jelasnya tentag tag2 didalam table beserta defenisinya,Silahkan Baca Disini 

3 komentar: