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 table 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> |
Hasil:
| atas kiri | atas tengah | atas kanan |
| tengah kiri | tengah tengah | tengah kanan |
| bawah kiri | bawah tengah | kiri bawah |
Penggunaan Table dengan atribut tambahan.
| <html> <head> <title>Membuat table</title> </head> <body> <table width="500" border="1"> <tr><td> baris 1 kolom 1 dimerger gengan baris 1 kolom 2</td> <td>baris 1 kolom 3</td> </tr> <td>baris 2 kolom 1</td> <td>baris 2 kolom 2 </td> </tr> <tr> <td>baris 3 kolom 1</td> <td colospan="2">merger juga</td> </tr> </table> </body> </html> |
Hsilnya akan seperti berikut:
| baris 1 kolom 1 dimerger gengan baris 1 kolom 2 | baris 1 kolom 3 |
| baris 2 kolom 1 | baris 2 kolom 2 |
| baris 3 kolom 1 | merger juga |
Terimakasih sudah mengunjungi blog ini... :D
Blog ini saya buat, untuk berbagi informasi kepada teman - teman, dan sebagai rangkuman untuk diri saya sendiri. ( Semoga gak bosen Dengan Blog Saya... :D )
13 komentar:
yes I know
manteb deh boz... makasih y...
thanks Sob atas infonya..kebetulan saya baru belajar soal ginian (CSS)
Makasi infonya gan, btw kok kalau bikin table di blogspot selalu turun maksudnya ada spasi yang lebar banget antara text postingan.
lumayan nih tambah lagi dech pengetahuan tentang HTML..
izin copas yachh siapa tahu ntar dibutuhin...
makasih yahhh
bagus juga nih gan, makasih yach udah share ilmunya,,
Kalau dikasih warna yang berbeda bagaimana mas...
hanks Sob atas infonya
terima kasih sudah berbagi ilmunya. izin copy scripnya ya sob..
artikel2nya sangat bermanfaat sekali....ane tunggu artikel lainnya gan....salam sukses
IDR303merupakan JUDI BOLA ONLINE Terpercaya
mantap info nya sangat menarik gan
saya sangat terkesan gan
izin share ya gan
terima kasih
PROMO NEW MEMBER
JUDI BOLA ONLINE
AGEN BOLA SBO
AGEN BOLA IBC
AGEN CASINO
BANDAR BOLA
belajar html itu mudah. yang penting sering latihan saja, pasti lama-lama sintaks HTML bisa diingat di luar kepala
Posting Komentar