Breaking News
Loading...

Wednesday, August 28, 2013

MEMBUAT TABEL DENGAN HTML BLOG POST

Nama Tanggal Lahir
EVA AROMA F 05/061987
berikut diatas adalah contoh dasar penulisan tabel dengan menggunakan 2 kolom 1 2 isian untuk mencontoh klik show dibawah kemudian copy paste script ke halaman html dan lihat hasilnya

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Tanggal Lahir</th>
  </tr>
  <tr>
    <td>Ahmad Ridwan</td>
    <td>21-03-2013</td>
  </tr>
</table>

kemudian untuk membuat tabel dengan warna warni dikolom seperti ini :
Rowspan 3 Nama Alamat Telp. Colspan 2
Ayanti Jl. Ijo 113242232
Ulum yanti Jl. Rencong 232343232

copy paste kode dibawah dan liat hasilnya
<table border="1" cellpadding="3" cellspacing="0" style="width: 510px;">
<tbody>
<tr>
<th bgcolor="#00CCCC" rowspan="3" width="58">Rowspan 3</th>
<th bgcolor="#00CCCC" height="41" width="79">Nama</th>
<th bgcolor="#33FF33" width="83">Alamat</th>
<th bgcolor="#FF9900" width="92">Telp.</th>
<th bgcolor="#FF9900" colspan="2">Colspan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">Ayanti</td>
<td align="center" bgcolor="#99CC66">Jl. Ijo</td>
<td bgcolor="#9966FF">113242232</td>
<td bgcolor="#9966FF" width="92"></td>
<td bgcolor="#9966FF" width="92"></td>
</tr>
<tr>
<td bgcolor="#FFFF00">Ulum yanti</td>
<td align="center" bgcolor="#FFFF00">Jl. Rencong</td>
<td bgcolor="#FFFF00">232343232</td>
<td bgcolor="#FFFF00"></td>
<td bgcolor="#FFFF00"></td>
</tr>
</tbody></table>

kode pendukung untuk tabel diatas :
  • 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

No comments:

Post a Comment

masukkan komentar anda selamat berbagi ilmu dan terimakasi atas kunjungannya