Dengan SEGALA HORMAT ,Kami mohon dukungan dan Partisipasinya dalam membebaskan Indonesia dari reputasi BURUK oleh Search Engine Google,Yahoo & Bing sebagai Negara Penghasil SPAM dan SPAMMER terbanyak ke-3 (tiga) didunia, Kami minta waktu anda sejenak untuk bergabung pada komunitas SEO Indonesia tanpa SPAM dan SPAMMER,terima kasih atas partisipasinya. |
|---|
tabel dibawah ini adalaah bagaimana cara membuat tabel dengan kode HTML,mulai tabel sederhana sampai tabel chart harga dan apa yang saya bagikan dibawah ini untuk cara membuat tabel di postingan hanya dasarnya saja,untuk merubahnya ke berbagai bentuk dan warna itu semua bisa anda lakukan sendiri,karena untuk merubahnya relative mudah.
1. Pola dasar
| abc | def | ghi |
| jkl | mno | pqr |
| stu | vwx | yz |
berikut kode HTML-nya
<table width="200" border="1">
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>jkl</td>
<td>mno</td>
<td>pqr</td>
</tr>
<tr>
<td>stu</td>
<td>vwx</td>
<td>yz</td>
</tr>
</table>
2. Pola Tabel dengan link,tanpa border namun punya background dan header
| Ngawur | |
| Lobak | Soto |
| Istri | Ampela |
| Dolar | Tahu |
berikut kode HTML-nya
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr bgcolor="#000000">
<td colspan="2"><font color="#CCCCCC">Lorem</font></td>
</tr>
<tr bgcolor="#CCCCCC">
<td width="50%"><a href="#">Lorem</a></td>
<td width="50%"><a href="#">Sit</a></td>
</tr>
<tr bgcolor="#CCCCCC">
<td><a href="#">Ipsum</a></td>
<td><a href="#">Amit</a></td>
</tr>
<tr bgcolor="#CCCCCC">
<td><a href="#">Dolor</a></td>
<td><a href="#">Tempor</a></td>
</tr>
</table>
3. Pola Tabel daftar harga dengan header tanpa border tanpa link
|
|||
| Jengkol | Rp.1000 | ||
| Pete | Rp.1000 | ||
| Terasi | Rp.1000 | ||
| Petis | Rp.1000 | ||
| Ikan Asin | Rp.1000 | ||
Berikut kode HTML-nya
<table border="0" cellpadding="4" cellspacing="0" style="width: 200px;">
<tbody>
<tr>
<td bgcolor="#000000" colspan="2"><table border="0" cellpadding="4" cellspacing="0" style="width: 200px;">
<tbody>
<tr>
<td bgcolor="#FFFFFF"> <b>!</b> </td>
<td width="200%"><span style="color: #cccccc;"> Daftar Harga</span></td>
</tr>
</tbody></table>
</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Jengkol</td>
<td align="right">Rp.1000</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Pete</td>
<td align="right">Rp.1000</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Terasi</td>
<td align="right">Rp.1000</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Petis</td>
<td align="right">Rp.1000</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Ikan Asin</td>
<td align="right">Rp.1000</td>
</tr>
</tbody></table>
4. Tabel Daftar Belanja dengan header
| Lorem | |
| 1. | Kangkung |
| 2. | Lobak |
| 3. | garam |
| 4. | Merica Bubuk |
| 5. | Dinamit |
| 6. | Pistol |
| 7. | Cabe |
| 8. | Mie |
| 9. | Pastel |
| 10. | kalung |
Berikut kode HTML-nya
<table width="300" border="0" cellspacing="0" cellpadding="4">
<tr bgcolor="#000000">
<td colspan="2"><font color="#CCCCCC">Lorem</font></td>
</tr>
<tr bgcolor="#CCCCCC">
<td width="1%" align="right">1. </td>
<td width="99%">Kangkung</td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="right">2. </td>
<td>Lobak</td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="right">3. </td>
<td>garam</td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="right">4. </td>
<td>Merica Bubuk </td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="right">5. </td>
<td>Dinamit</td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="right">6. </td>
<td>Pistol</td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="right">7. </td>
<td>Cabe</td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="right">8. </td>
<td>Mie</td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="right">9. </td>
<td>Pastel</td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="right">10. </td>
<td>kalung</td>
</tr>
</table>
5. Pola Teks dengan header
|
|||
| saat ini dijalan raya banyak sekali terjadi perampokan terhadap nenek-nenek yang terlihat agak berkantong tebal,sang perampok kemungkinan besar mengindap penyakit kelainan mental,atau berlatar belakang kurang menyenangkan karena ditinggal mati sang kakek. | |||
Berikut kode HTML-nya
<table border="0" cellpadding="4" cellspacing="0" style="width: 500px;">
<tbody>
<tr>
<td bgcolor="#000000" colspan="2"><table border="0" cellpadding="4" cellspacing="0" style="width: 500px;">
<tbody>
<tr>
<td bgcolor="#FFFFFF"> <b>!</b> </td>
<td width="100%px"><span style="color: #cccccc;"> Lorem</span></td>
</tr>
</tbody></table>
</td>
</tr>
<tr bgcolor="#CCCCCC">
<td width="100%px">saat ini dijalan raya banyak sekali terjadi perampokan terhadap nenek-nenek yang terlihat agak berkantong tebal,sang perampok kemungkinan besar mengindap penyakit kelainan mental,atau berlatar belakang kurang menyenangkan karena ditinggal mati sang kakek.</td>
</tr>
</tbody></table>
6. Tabel daftar harga dengan digit nomor
| Daftar harga | ||
| 1 | celana | Rp.10000 |
| 2 | baju | Rp.10000 |
| 3 | kaos | Rp.10000 |
| 4 | BH | Rp.10000 |
| 5 | Kemeja | Rp.10000 |
berikut kode HTML-nya
<table border="1px" cellpadding="4" cellspacing="0" style="width: 500px;">
<tbody>
<tr bgcolor="#000000">
<td colspan="3"><span style="color: #cccccc;">Daftar harga</span></td>
</tr>
<tr bgcolor="#FFFF00">
<td align="right">1</td>
<td width="100%"><span style="color: #990000;"><b>celana</b></span></td>
<td align="right">Rp.10000</td>
</tr>
<tr bgcolor="#FFFF00">
<td align="right">2</td>
<td><span style="color: blue;"><b>baju</b></span></td>
<td align="right">Rp.10000</td>
</tr>
<tr bgcolor="#FFFF00">
<td align="right">3</td>
<td><span style="color: lime;"><b>kaos</b></span></td>
<td align="right">Rp.10000</td>
</tr>
<tr bgcolor="#FFFF00">
<td align="right">4</td>
<td><span style="color: purple;"><b>BH</b></span></td>
<td align="right">Rp.10000</td>
</tr>
<tr bgcolor="#FFFF00">
<td align="right">5</td>
<td><span style="color: cyan;"><b>Kemeja</b></span></td>
<td align="right">Rp.10000</td>
</tr>
</tbody></table>
7. Tabel Registrasi
|
||
| email password |
||
berikut kode HTML-nya
<table width="300px" border="0" cellspacing="0" cellpadding="4">
<tr>
<td bgcolor="#000000"> <table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td bgcolor="#FFFFFF"> <b>!</b> </td>
<td width="100%"><font color="#CCCCCC"> Masukkan Identitas Anda </font></td>
</tr>
</table></td>
</tr>
<tr>
<form name="n">
<td width="400px" bgcolor="#CCCCCC" colspan="2"> <p>email<br>
<input name="textfield" type="text" value="email@anda.com">
</p>
<p>password<br>
<input name="textfield2" type="password" value="Password">
</p>
<p>
<input type="submit" name="Submit" value="Daftar">
</p>
<p> </p></td>
</form>
</tr>
</table>
Demikian Cara Membuat Tabel di postingan agar list yang anda jelaskan kepada audien anda bisa menjadi jelas,jika masih terasa kurang apa yang saya sampaikan silahkan anda bisa menambahkannya melalui kolom komentar.
semoga sukses selalu
Jika Video Dapat Gangguan Klik Button >> |
|
|---|
Tidak ada komentar :
Posting Komentar
Yuk ! Kita budayakan relevansi berkomentar dan tidak membuat SPAM