Pages

Membuat Tabel pada Blog

Membuat Tabel pada Blog - Tabel pada blog berfungsi sebagai tempat untuk mengumpulkan widget, tulisan, gambar, banner sahabat  dan lain sebagainya agar terlihat indah dan tersusun rapi. Bagi pengguna komputer yang sering mengoperasikan microsoft office seperti ms word dan ms excel, membuat tabel sangatlah mudah dengan menu-menu yang telah disediakan. Tetapi untuk menampilkan tabel pada blog, kita harus menggunakan kode HTML dengan perintah <table>...........<table> agar tabel bisa tampil pada blog.


Perintah dasar tag HTML untuk membuat tabel :
Kode HTML
Keterangan
<table>...</table>
Perintah untuk membuat tabel
<tr>...</tr>
Perintah untuk membuat baris
<td>...</td>
Perintah untuk membuat kolom
border, width, align, bgcolor
Kode tambahan untuk pengaturan tebal garis
border, lebar tabel, perataan teks dan warna background

Untuk membuat tabel 1x3 (1 baris 3 kolom), maka penulisannya seperti ini :
<table border="1">
<tr>
<td>Konten 1</td>
<td>Konten 2</td>
<td>Konten 3</td>
</tr>
</table>
Maka hasil tampilannya menjadi seperti ini :

Konten 1
Konten 2
Konten 3

Selanjutnya kita coba mengubah kode dasar di atas tadi untuk mempercantik tampilan dengan perataan teks dan ukuran lebar tabel kita tentukan misalnya 450px, maka penulisannya menjadi seperti ini :
<table border="1" width="450">
<tr bgcolor="#F2F2F2">
<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>
</tr>
</table>
Maka hasil tampilannya menjadi seperti ini :

Konten 1
Konten 2
Konten 3

Untuk membuat tabel yang lebih banyak misalnya 2x3 (2 baris 3 kolom), penulisannya adalah:
<table border="1" width="450">
<tr bgcolor="#F2F2F2">
<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>
</tr>
<tr>
<td align="left">Tuliskan teks disini</td>
<td align="left">Masukkan script gambar dengan format seperti ini &lt;img border=&#039;0&#039; src=&#039; http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif&#039;/&gt;</td>
<td align="center"> Maka hasilnya akan seperti ini
<img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/></td>
</tr>
</table>
Maka hasil tampilannya menjadi seperti ini :


Konten 1
Konten 2
Konten 3
Tuliskan teks disini
Masukkan script gambar dengan format seperti ini <img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/>
Maka hasilnya akan seperti ini

Sekian, selamat mencoba...
Untuk berlangganan artikel, masukan email anda disini:



0 Comment :

Posting Komentar

Bahasa dapat mencerminkan kepribadian seseorang.
Bagi yang ingin promosi web, blog dan atau mendapatkan backlink dari blog ini, telah disediakan tempat khusus. Klik DISINI

 

Info Olahraga

Info Komputer

Info Blackberry