Sudah berlangganan artikel blog ini via RSS Feed?

Cara Membuat Table

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

Powered by  MyPagerank.Net

13 komentar:

Web Hosting Service mengatakan...

Web design is important feature. User stays a longer bit in a website if it looks apealling to the customer or visitor. But I satable web server is also important to satify your client.


In my opinion we have to cosider different features before choose a hosting company. Web Hosting Servicesshould include backup plan,customer service, downtime and response time.

Putroweb mengatakan...

yes I know

Septian Danu S mengatakan...

manteb deh boz... makasih y...

Cupang Hias | Betta Splendens mengatakan...

thanks Sob atas infonya..kebetulan saya baru belajar soal ginian (CSS)

Facebook Blackbery mengatakan...

Makasi infonya gan, btw kok kalau bikin table di blogspot selalu turun maksudnya ada spasi yang lebar banget antara text postingan.

obat herbal stroke mengatakan...

lumayan nih tambah lagi dech pengetahuan tentang HTML..

kios herbal mengatakan...

izin copas yachh siapa tahu ntar dibutuhin...
makasih yahhh

pengobatan alami stroke mengatakan...

bagus juga nih gan, makasih yach udah share ilmunya,,

toko bunga online mengatakan...

Kalau dikasih warna yang berbeda bagaimana mas...

Grosir sprei Murah mengatakan...

hanks Sob atas infonya

klik disini mengatakan...

makasih infonya

obat tahan lama pria mengatakan...

terima kasih sudah berbagi ilmunya. izin copy scripnya ya sob..

greenworld indonesia mengatakan...

artikel2nya sangat bermanfaat sekali....ane tunggu artikel lainnya gan....salam sukses

Poskan Komentar


 

My Friends Google

My Profile

cojogja Blog ini saya buat, untuk berbagi informasi kepada teman - teman, dan sebagai rangkuman untuk diri saya sendiri. ( Semoga gak bosen Dengan Blog Saya... :D )