Membuat Tabel HTML

Hai sobat..cerita dulu ne yah. Semalam bagiku malam yang teramat panjang,,udah ujan, dingin, ada nyamuk pula yang ikut masuk kamar. Setelah semaleman tidur kurang begitu nyenyak, gara-gara nyamuk beterbangan,, ngaung nguing,,,plakk,,, plukkkk....plooookkk. Satu persatu nyamuk berjatuhan terkena jurus "sorak-sorak bergembira". Pasti sobat penasaran dengan nama jurusnya? hayooo..ngaku aja,,,hehhehe
Saya namain begitu karena tangan dipaksa bertepuk di antara nyamuk-nyamuk pembawa nyawa ( kalo ga bawa nyawa berarti mati donk,,hahaha)

Udahan ah ngelanturnya. To the point aja dah,,,cekidot gan ..

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Sebuah tabel mempunyai judul, tempat anda menjelaskan kolom/baris yang dilibatkan, baris untuk informasi, dan sel untuk setiap itemnya. Pada tabel berikut, kolom pertama berisi informasi header, setiap baris menjelaskan sebuah tag tabel HTML, dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi tag. Coba deh sobat copy paste kode dalam kotak area di bawah ini ke dalam postingan/ widget html.

sebuah tabel dimulai dengan sebuah tag table.<br /> Setiap baris dimulai dengan sebuah tag tr.<br /> Setiap data dimulai denga sebuah tag td. <br /> <h4><br /> Satu kolom</h4><br /> <table border="1"><tbody><br /> <tr> <td>SAYA</td> </tr><br /> </tbody></table><br /> <h4><br /> satu baris dan tiga kolom</h4><br /> <table border="1"><tbody><br /> <tr> <td>Nama Barang</td> <td>Jumlah</td> <td>Harga</td> </tr><br /> </tbody></table><br /> <h4><br /> Dua baris dan empat kolom</h4><br /> <table border="1"><tbody><br /> <tr> <td>Nama Barang</td> <td>Jumlah</td> <td>Harga</td> <td>Total bayar</td></tr><br /> <tr> <td>PERMEN</td> <td>300</td> <td>Rp 200</td> <td>Rp 60.000</td></tr><br /> </tbody></table>

Contoh di atas mendemontrasikan bagaimana membuat tabel dalam sebuah dokumen HTML.

 Elemen-element table

ELEMENT	PENJELASAN
<table>...</table>	Mendefinisikan sebuah table dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border
<caption>...</caption>	Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah ditengah pada bagian paling atas tabel atribut align="bottom" dapat digunakan untuk menempatkan judul pada bagian bawah tabel. Catatan: judul dapat diberi tag apa saja.
<tr>...</tr>	Menspesifikasikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan atribut untuk seluruh baris: align (left, center, right). dan valign (top, middle, bottom).
<th>...</th>	Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah.
<td>...</td>	Mendefinisikan sebuah sel tabel. Secara default teks dalam sel ini ditampilka rata kiri, dan di tengah secara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isinya.

Atribut table

ELEMENT	PENJELASAN
align={left|center|right}	Alignment horizontal untuk sel
valign={top|middle|bottom}	Definisi alignment vertikal dalam sel
colspan=n	Jumlah n kolom sel diperlebar
rowspan=n	Jumlah n baris sel diperlebar
nowrap	Matikan wrapping dalam sel

Catatan: 
Atribut yang didefinisikan dalam ... atau ... akan menggantikan alignment default yang didefinisikan dalam ...

Salah satu manfaat dari penggunaan tabel adalah untuk merapikan postingan pada blog. Demikian sekilas tentang tabel HTML.

....::::Semoga berguna & selamat mencoba::::....