Social Icons

Kamis, 13 Desember 2012


Cara Membuat Tabel di Blogspot


Membuat tabel di KOMPUTER adalah hal yang tidak begitu sulit karena sudah tersedia banyak program pembuat tabel di komputer seperti excel, calc, dan lain-lain. Lalu bagaimana untuk membuat tabel  khususnya blogspot? yah walaupun sampai saat ini belum ada di blogspot tapi kita bisa buat tabel sendiri kok di blogspot.

Untuk lebih jelasnya. Silahkan ikuti petunjuk dibawah ini:
bagi yang belum paham.
 cara memasang =  masuk halaman entri terus klik html

1. Untuk membuat tabel 1x2 (1 baris 2 kolom) maka kode yang digunakan adalah:

<table border="1">
<tr>
<td></td> <td></td> 
</tr>

</table>
Keterangan:
<table> merupakan perintah untuk membuat tabel
<tr> merupakan perintah untuk membuat baris
<td> merupakan perintah untuk membuat kolom
border merupakan perintah untuk mengatur ketebalan garis pinggir. Silahkan ganti nilainya sesuai keinginan

Sebagai contoh jika anda memasukkan kode seperti ini.

<table border="1">
<tr>
<td>Konten 1</td> <td>Konten 2</td>
</tr>
</table>
Maka hasilnya akan menjadi seperti ini:

Konten 1Konten 2
Catatan:
Tulisan yang dicetak tebal pada kode diatas merupakan isi dari tabel. Anda bisa menggantinya dengan teks, link, atau gambar.

Jika anda ingin menambah baris baru maka tambahkan kode yang berwarna merah diatas </table>. Contoh:

2. Membuat tabel 2x2 (2 baris 2 kolom) dengan konten teks dan gambar


<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<blockquote style="background-color: #f6f6f6; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; margin: 0px 30px 20px; padding: 5px 5px 5px 10px;">
<table border="1" style="font-family: 'Times New Roman';"><tbody>
<tr><td>Gambar 1</td><td>Gambar 2</td></tr>
<tr><td><div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPyOjuRAJ2X2kv5dRILpiCnZ3O1odY2p1sS7cdquHsAqcr5mCA7Ao9ZRykcaluJEgR4dKT0pbjEhm-yOMGqeWjUQ-LIAcHBDklNOnLAbtYyNqfy7NPjY3hjdM9hAOvpg3IwQq3nw-lTJt/s1600/80745.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPyOjuRAJ2X2kv5dRILpiCnZ3O1odY2p1sS7cdquHsAqcr5mCA7Ao9ZRykcaluJEgR4dKT0pbjEhm-yOMGqeWjUQ-LIAcHBDklNOnLAbtYyNqfy7NPjY3hjdM9hAOvpg3IwQq3nw-lTJt/s1600/80745.gif" /></a></div>
</td><td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPyOjuRAJ2X2kv5dRILpiCnZ3O1odY2p1sS7cdquHsAqcr5mCA7Ao9ZRykcaluJEgR4dKT0pbjEhm-yOMGqeWjUQ-LIAcHBDklNOnLAbtYyNqfy7NPjY3hjdM9hAOvpg3IwQq3nw-lTJt/s1600/80745.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPyOjuRAJ2X2kv5dRILpiCnZ3O1odY2p1sS7cdquHsAqcr5mCA7Ao9ZRykcaluJEgR4dKT0pbjEhm-yOMGqeWjUQ-LIAcHBDklNOnLAbtYyNqfy7NPjY3hjdM9hAOvpg3IwQq3nw-lTJt/s1600/80745.gif" /></a></div>
</td></tr>
</tbody></table>
</blockquote>
</div>



Maka hasilnya seperti ini:

Gambar 1Gambar 2

Ok saya rasa itu saja tutorialnya. Selamat mencoba...

dan terima kasih telah berkunjung di blog saya

Tidak ada komentar:

Posting Komentar

 

Sample Text

Cari Blog Ini

CEREDED BLOG.