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 2Row 1 Cell 3
Row 2 Cell 2Row 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 2Row 1 Cell 3
Row 2 Cell 2Row 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 :
This is the caption
row 1, column 1row 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 :
Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000
  • This is another cell
  • Using list inside this cell
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.
Atribut pendukung Table : 
  • 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
Berikut ini adalah contoh dari tabel dengan beberapa kode warna dengan atribut : 


<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">&nbsp;</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFF00"></td>
<td align="center" bgcolor="#FFFF00"></td>
<td bgcolor="#FFFF00"></td>
<td bgcolor="#FFFF00">&nbsp;</td>
<td bgcolor="#FFFF00">&nbsp;</td>
</tr>
</table>

  • Nich hasilnya Agan :
Rowspan Nama Alamat Telp. Colspan
The-Bhuz.Com Palu,Sausu 0852-4256-8801

Tabel memang sangat banyak digunakan mulai dari Microsoft Excell, Microsoft Word, Microsoft Powerpoint, Adobe Dreamweaver dan lainnya. Demikian tutorial dan dasar cara membuat table html

Semoga dapat membantu

Terimakasih sudah Berkunjung, jangan Lupa Meninggalkan komentar

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="http://the-bhuz.blogspot.com/2013/06/cara-membuat-tabel-di-blog.html" target="_blank">Cara Membuat tabel Di Blog

Related Post :


Comments
0 Comments

0 komentar: