Pertama ane bingung,, Gimana sichh caranya buat tabel dipostingan blog.
ane tanya ama temen, dy juga belum tau, maklum lah ane masihh awam hehehehee
ane tanya sama mbah geogle, jeeetttt ketemu dah hehehehee
nichhh ane share sama sobat yang belum tau Tentang Trik Membuat Tabel Dipostingan Blog
Langkah - Langkah Sebagai Berikut :
- Copas nich scrip
<table border="1">
<tr>
<th>Nama</th>
<th>Tanggal Lahir</th>
</tr>
<tr>
<td>The-Bhuz.Com</td>
<td>05-07-1993</td>
</tr>
</table>
- Hasilnya Nich Agan
Nama | Tanggal Lahir |
---|---|
The-Bhuz.Com | 05-07-1993 |
- Contoh Lainnya :
<table border="1">
<tr>
<th>Tabel</th>
<th>Tabel</th>
<th>Tabel</th>
<th>Tabel</th>
</tr>
<tr>
<td>Tabel</td>
<td>Tabel</td>
<td>Tabel</td>
<td>Tabel</td>
</tr>
</table>
- Nich hasilnya Agan
Tabel | Tabel | Tabel | Tabel |
---|---|---|---|
Tabel | Tabel | Tabel | Tabel |
- Contoh lainnya :
<table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table>
- Nich hasilnya Agan
Name | The-Bhuz |
---|---|
Mertha | 5000 |
Shabbir Hussein | 7000 |
<table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table>
- Nich hasilnya agan
Column 1 | Column 2 | Column 3 |
---|---|---|
Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
Row 2 Cell 2 | Row 2 Cell 3 | |
Row 3 Cell 1 |
- Contoh lainnya :
<table border="5" bordercolor="green" bgcolor="gray"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td> <td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table>
- Nich Hasilnya Agan :
Column 1 | Column 2 | Column 3 |
---|---|---|
Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
Row 2 Cell 2 | Row 2 Cell 3 | |
Row 3 Cell 1 |
- Contoh lainnya :
<table border="1" width="400" height="150"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
- Nich Hasilnya Agan :
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
- contoh lainnya :
<table border="1"> <caption>This is the caption</caption> <tr> <td>row 1, column 1</td><td>row 1, columnn 2</td> </tr> </table>
- Nich Hasilnya Agan :
row 1, column 1 | row 1, columnn 2 |
- contoh lainnya :
<table border="1" width="100%"> <thead> <tr> <td colspan="4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody>
- Nich Hasilnya Agan :
This is the head of the table | |||
This is the foot of the table | |||
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
- contoh lainnya :
<table border="1"> <tr> <td> <table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </td> <td> <ul> <li>This is another cell</li> <li>Using list inside this cell</li> </ul> </td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
- Nich Hasilnya Agan :
|
|
||||||
Row 2, Column 1 | Row 2, Column 2 |
Keterangan :
Apabila melihat contoh susunan tabel diatas, pengertian kode HTML nya adalah sebagai berikut :
- <table> diakhiri dengan </table> : digunakan sebagai tanda awal tabel
- <tr>..</tr> : digunakan sebagai tanda awal baris, tr kependekan dari table row
- <th>..</th> : digunakan untuk membuat tampilan kolom header tabel, th kependekan dari table head
- <td>..</td> : digunakan untuk menyusun kolom data, td kependekan dari table data
- Setiap elemen dari kode HTML tersebut harus tersusun dan tertata dengan benar.
- Perhatikan tanda slash / garis miring di setiap akhir elemen, itu merupakan kode penutup untuk kode pembuka di semua jenis kode HTML.
- align : untuk mengatur posisi horizontal
- valign : untuk mengatur posisi vertikal
- width : untuk mengatur lebar
- height : untuk mengatur tinggi
- border : untuk mengatur tebal garis
- border-color : untuk memberi tebal garis dengan warna
- cellpadding : untuk mengatur jarak garis dengan objek didalamnya
- cellspacing : untuk mengatur jarak tiap cell
- bgcolor : untuk mengatur warna
- background : untuk mengatur latar gambar
- rowspan : jumlah baris yang memotong beberapa baris
- colspan : jumlah kolom yang memotong beberapa kolom
<table width="510" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="58" rowspan="3" bgcolor="#00CCCC">Rowspan</th>
<th width="79" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telp.</th>
<th colspan="2" bgcolor="#FF9900">Colspan</th>
</tr>
<tr>
<td bgcolor="#66CCFF">The-Bhuz.Com</td>
<td align="center" bgcolor="#99CC66">Palu,Sausu</td>
<td bgcolor="#9966FF">0852-4256-8801</td>
<td width="92" bgcolor="#9966FF"> </td>
<td width="92" bgcolor="#9966FF"> </td>
</tr>
<tr>
<td bgcolor="#FFFF00"></td>
<td align="center" bgcolor="#FFFF00"></td>
<td bgcolor="#FFFF00"></td>
<td bgcolor="#FFFF00"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
</table>
- Nich hasilnya Agan :
Rowspan | Nama | Alamat | Telp. | Colspan | |
---|---|---|---|---|---|
The-Bhuz.Com | Palu,Sausu | 0852-4256-8801 | |||
Posted by : The-Bhuz.Com http://visitors2cash.com/ref.php?refId=127284
Artikel Cara Membuat tabel Di Blog diposting oleh The-Bhuz.Com . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan melalui kotak komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog Sobat, hanya saja mohon sertakan link sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Selamat bersenang-senang.
a href="https://the-bhuz.blogspot.com/2013/06/cara-membuat-tabel-di-blog.html" target="_blank">Cara Membuat tabel Di Blog
0 komentar: