Untuk membuat Tabel di Blog atau Web, kita memerlukan kode <table> sebagai pembuka dan kode </table> sebagai penutup. didalam kode Table tersebut terdapat dua bagian yaitu <tr></tr> (Table Rows) untuk membuat banyaknya baris kemudian di dalam Table Rows ada kode <td></td> (Table Data) Untuk tempat pengisian data dan menentukan banyaknya kolom pada masing-masing baris (Table Rows).
Contoh Kode Table:
<TABLE>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Hallie Curry</TD> <TD>8372</TD> </TR>
<TR> <TD>Shari Silberglitt</TD> <TD>4827</TD> </TR>
</TABLE>
Hasil:
Raha Mutisya | 1493 | |
Shalom Buraka | 3829 | |
Hallie Curry | 8372 | |
Shari Silberglitt | 4827 |
Penjelasan: Untuk Membuat Tabel, Pertama Buta Baris dengan menggunakan tag <tr> kemudian isi dengan banyaknya kolom tag<td>dan tutup kode sesuai dengan kode asing masing
<tr><td> kolom ke 1 Baris Pertama </td><td> Kolom ke 2 baris pertama </td><td>Kolom Berikutnya</td></tr>
Itu artinya pada Baris Pertama diisi dengan 3 kolom dan untuk menambahkannya cukup menggunakan tag <td> isi </td>
Parameter Pendukung Table:
Untuk mempercanti Table, ada banyak parameter mulai dari Background, Border, Jarak antar Sel dan lainnya: berikut penjelasannya:
Border: Untuk memberikan Garis Tepi pada tabel. coba lihat dan bandingkan dengan tabel pertama. Penulisannya di dalam tag <table> yaitu <table border="5"> dimana angka lima merupakan besarnya garis tepi dalam pixel.
CellSpacing: Untuk Menentukan jarak Antara garis (border Table dengan garis atau border text (terlihat jarak antar garis terlihat berjauhan) Penulisan kodenya diletakan pada tag <table> yaitu <table cellspacing="10"> dimana angka 10 merupakan besarnya jarak antar sel.
CellPadding: Untuk Menentukan jarak text dengan Garis dalam ( telihat garis dalam dan luar berdekatan dan ada jarak teks dengan garis dalam). Pnulisannya :<table cellpadding="10"> dengan jarak 10 pixel.
Terkadang dalam Membuat tabel, kita menggabungkan beberapa kolom atau baris menjadi satu. untuk itu digunakan kode ColsSpan dan RowSpan
Kode:
<table border="2">
<tr>
<th bgcolor="#99ccff" rowspan="3">Production</th>
<td bgcolor="#ccccff" colspan="2">Name and Code</td>
</tr>
<tr>
<td>Shalom Buraka</td> <td>3829</td>
</tr>
<tr>
<td>Brandy Davis</td> <td>0283</td>
</tr>
<tr>
<th bgcolor="#cccccc" rowspan="2">Sales</th>
<td>Claire Horne</td> <td>4827</td>
</tr>
<tr>
<td>Bruce Eckel</td> <td>7246</td>
</tr>
<tr>
<td>Office</td><td>Danny Zeman</td> <td>5689</td>
</tr>
<tr>
<td colspan="3"><a href="http://www.duniague.net/">http://dunia-blogger.blogspot.com</a></td>
</tr>
</table>
Production | Name and Code | |
Shalom Buraka | 3829 | |
Brandy Davis | 0283 | |
Sales | Claire Horne | 4827 |
Bruce Eckel | 7246 | |
Office | Danny Zeman | 5689 |
Penjelasan:
- Diberikan Warna pada kode di atas, menunjukan banyaknya baris disini ada baris silahkan cek pada tabel.
- Tag <th> (tabel header) penggati tag <td> biasanya untuk menebalkan bagian Umum Suatu Tabel misalnya, No, Keterangan, Jumlah dan lainnya.
- Contoh untuk Rowspan adalah bagian"Production dan Sales" sedangkan untuk Colspan adalah bagian "Name and Code" dan "http://dunia-blogger.blogspot.com" untuk memahaminya silahkan perhatikan pada kodenya :)
Lebih Lanjut: http://www.htmlcodetutorial.com/tables/ silahkan pelajari lebih banyak di sana.
Description: HTML untuk Membuat Tabel Rating: 4.5 Reviewer: Unknown - ItemReviewed: HTML untuk Membuat Tabel Hot News!!! "Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda"
0 komentar :
Posting Komentar
Mau tukeran link? silakan buka Link sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...
Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.
Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.