Cara Membuat Tabel Di Dalam Postingan Blog Dengan Mudah

Selamat datang kembali di Blog hery-pc Tutorial Blogspot. Tutorial Blog dari Master Chef kali ini hanya sekedar menyampaikan Tips dan Trik Blog sederhana mengenai Cara Membuat Tabel Pada Postingan Blog. Pastinya sobat blogger semua sudah tau apa yang dimaksut dengan tabel jadi Master Chef tidak perlu lagi untuk menjelaskannya. Untuk contoh tabel yang akan kita bahas dalam kesempatan kali ini seperti yang terlihat dibawah ini.

NoTutorial BlogLabel
1Cara Membuat BlogTutorial Blog
2Inconia Pc Tablet Dengan Windows 8SEO

Nah jika kamu ingin mencobanya, Master Chef akan memberikan resepnya. Langsung saja, Berikut Cara Membuat Tabel Di Dalam Postingan Blog Dengan Mudah.
  1. Silahkan Sobat masing-masing login ke akun blogger
  2. Jika sudah login buat Entri Baru/Postingan Baru
  3. Ada dua mode pada halaman Entri Baru Blog Kamu yaitu Compose dan HTML, Kamu Pilih Mode HTML
  4. Jika sudah Copy kode Dibawah ini dan Paster pada Mode HTML Tersebut
    5. <table border="1" style="width: 400px;">
    <tbody>
    <tr>
    <td align="center">No</td>
    <td align="center">Tutorial Blog</td>
    <td align="center">Label</td>
    </tr>
    </tbody></table>
  5. Untuk melihat tampilan tabel setelah kode yang kamu letakan di mode HTML, langsung beralih kemode Compose. Kode Diatas Hanya akan Menampilkan 1 baris dan 3 kolom tabel seperti dibawah ini.

    6. No Tutorial Blog Label

  6. Jika kamu ingin menambah tabel menjadi 2 baris , kamu tinggal duplikat kode diatas mulai dari <tr> sampai </tr> menjadi seperti ini.
    7. <table border="1" style="width: 400px;">
    <tbody>
    <tr>
    <td align="center">No</td>
    <td align="center">Tutorial Blog</td>
    <td align="center">Label</td>
    </tr>

    <tr>
    <td align="center">No</td>
    <td align="center">Tutorial Blog</td>
    <td align="center">Label</td>
    </tr>
    </tbody></table>
  7. Maka hasilnya akan menjadi seperti dibawah ini.

    8. No Tutorial Blog Label
    No Tutorial Blog Label

  8. Sekarang bagaimana jika ingin menambahkan kolomnya supaya lebih dari 3 kolom. gampang, kamu cukup tambahkan kode diatas kode </tr>. disini kode yang Master Chef duplikat adalah <td align="center">Label</td> seperti ini.
    9. <table border="1" style="width: 400px;">
    <tbody>
    <tr>
    <td align="center">No</td>
    <td align="center">Tutorial Blog</td>
    <td align="center">Label</td>
    <td align="center">Label</td>
    </tr>

    <tr>
    <td align="center">No</td>
    <td align="center">Tutorial Blog</td>
    <td align="center">Label</td>
    <td align="center">Label</td>
    </tr>
    </tbody></table>
  9. Kode warna kuning tersebut adalah kode yang Master Chef duplikat tadi maka hasilnya akan menjadi seperti ini.

    10. No Tutorial Blog Label Label
    No Tutorial Blog Label Label

  10. Sampai disitu Master Chef harap sobat bisa mengerti dan memahaminya.
Demikian Tutorial Blog dari Master Chef soal Cara Membuat Tabel Di Dalam Postingan Blog Dengan Mudah kali ini. semoga bisa memberikan banyak manfaat. Terimakasih!

 Baca Juga Yang Dibawah ini


Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara untuk membuat tabel dalam postingan pada blogspot.

Cara Membuat Tabel Di Blog Blogger

Untuk membuat tabel di blogger kita hanya perlu beberapa kode html saja, yang nantinya akan kita gunakan dalam pembuatan tabel, berikut kode-kode html tersebut:

<table> dan </table>
<tr> dan </tr>
<td> dan </td> 


Beneran cuma itu saja kode yang di perlukan untuk membuat tabel?...

YA... cukup dengan 3 atau 6 kode tersebut saja kita bisa membuat tabel. tapi ada sedikit kode tambahan sih...

Mari kita mulai praktek. Silahkan sambil di fahami ya, soalnya kalau terlalu detail nanti artikelnya kepanjangan.

  • Membuat Tabel 2 Kolom kesamping dan 1 kolom kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table> 


Dan Hasilnya akan terlihat seperti ini:
Kolom 1 Kolom 2

Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 kolom kebawah anda cukup menambahkan kode <td>Kolom Tambahan atau Kolom 3</td> saja sebelum kode </table> dan hasilnya akan terlihat seperti ini :

Kolom 1 Kolom 2 Kolom 3

  • Membuat Tabel 2 Kolom kesamping dan 2 kolom kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
</tr>
</table> 

Hasilnya Seperti ini:
Kolom 1 A Kolom 1 B
Kolom 2 A Kolom 2 B

Jika ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah anda cukup menambahkan kode <td>Kolom Tambahan 1 atau 2 </td> di antara <tr> dan </tr> pertama dan kedua
Contoh:
<table width="500" border="1">
<tr>
<td>Kolom 1 A</td>
<td>Kolom 2 A</td>
<td>Kolom Tambahan 1</td>
</tr>
<tr>
<td>Kolom 1 B</td>
<td>Kolom 2 B</td>
<td>Kolom Tambahan 2 </td>
</tr>
</table>

Maka hasilya seperti ini :
Kolom 1 A Kolom 2 A Kolom Tambahan 1
Kolom 1 B Kolom 2 B Kolom Tambahan 2

  • Membuat Tabel 3 Kolom kesamping dan 3 kolom kebawah. jika ingin membuat tabel 3 kolom kesamping dan kebawah maka anda cukup menambahkan kode ini sebelum kode </table>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>

Hasil kode htmlnya akan seperti ini :
<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
<td>Kolom 1 C </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
<td>Kolom 2 C </td>
</tr>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
</table>

Dan hasil tabelnya akan terlihat seperti ini :
Kolom 1 A Kolom 1 B Kolom 1 C
Kolom 2 A Kolom 2 B Kolom 2 C
Kolom 3 A Kolom 3 B Kolom 3 C

Keterangan :
  • Pada tulisan yang saya tulis kolom 1, kolom 1A, kolom 2, dst adalah tempat untuk memasukkan tulisan, link, atau gambar anda. Silahkan ganti sesuai keperluan. 
  • Sedangkan kode ini.
<table width="500" border="1">
  • Kode yang saya beri warna biru "500" adalah lebar tabel tersebut, anda bisa merubahnya menjadi 700px, 400px, dsb. Jika anda ingin membuat tabel selebar 700px maka anda cukup menulisnya 700 saja.
Mau Coba Praktek?...

Jika ingin mencoba bikin tabel di blog anda silahkan kopi paste saja kode yang sudah saya tuliskan di atas, terserah mau pakai yang mana.

Namun jika setelah kode tersebut anda pasang dan hasilnya tidak sama dengan contoh tabel di blog ini anda jangan heran, itu permasalahannya cuma di CSS nya saja, karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.

Solusinya yaitu dengan menambahkan kode CSS sendiri di template blog anda, anda bisa memakai kode CSS ini :
th, td {margin:0;padding: 5px; border:1px solid #ccc; text-align:center;}

Jika anda sudah faham CSS silahkan bikin kode CSS tabel sesuai selera anda.

Wah saya ga tau gimana dan di mana meletakkan CSSnya.

Untuk menambahkan CSS yang saya tuliskan di atas silahkan ke Design terus ke Edit Html, disana lah tempat persemayaman CSS blog blogger anda (Untuk bagian Edit Html ini nanti akan saya bahas secara tersendiri)


Semoga bermanfaat dan semoga berhasil.
 Terima Kasih ^_^

Komentar

Posting Komentar

Tulis komentar anda disini.....

Postingan populer dari blog ini

Gambar
Biodata idola cilik 2 November 28, 2010 at 2:44 am ( Idola Cilik ) ( abner idola cilik 2 ,  agni idola cilik 2 ,  bastian idola cilik 2 , biodata idola cilik 2 ,  cahya idola cilik 2 ,  cakka idola cilik 2 ,  Debo idola cilik 2 ,  gita idola cilik 2 ,  irsyad idola cilik 2 ,  obiet idola cilik 2 ,  oik idola cilik 2 ,  olin idola cilik 2 ,  ourel idola cilik 2 ,  patton idola cilik 2 ,  rahmi idola cilik 2 ) Nama lengkap : Debo Andryos Aryanto Nama panggilan : Debo TTL : Sukabumi, 31 Januari 1997 Prestasi : Juara lomba mengambar kaligrafi Hobi : Menyanyi, main badminton Koleksi : Ikan Warna fav : Merah Makanan fav : Nasi goring Film fav : Tom & Jerry Musik fav : Pop  Nama Lengkap : Patton Otlivio Latupeirissa Nama panggilan : Patton TTL : Makassar, 29 Oktober 1998 Cita-cita : Penyanyi, pembuat robot tercanggih Prestasi : juara 1 lomba menyanyi lagu daerah se-Makassar tahun 2007 Hobi : Main games dan bola Makanan fav : Mie ayam Nama Le
Baca selengkapnya

Cara Membuat Form PHP menggunakan Adobe Dreamweaver CS5

Gambar
Bagaimana Cara Membuat Form PHP menggunakan Adobe Dreamweaver CS5? Seringkali saya mendengar kalimat tersebut ketika disekolah. Sebenarnya dalam membuat script PHP yang kita butuhkan adalah ketelitian kita dan bagaimana cara menyiasatinya. Kebanyakan temen-temen masih belum benar dalam menentukan name dari sebuah nama form dan juga masih terpaku pada hafalan bukan pada pemahaman. Ibarat Nabi dan Rasul, Nabi belum tentu Rasul namun Rasul sudah barang tentu Nabi. Sama seperti kita dalam membuat script PHP, hafal belum tentu paham namun paham walaupun tidak hafal tetep saja kita bisa membuat script PHP dengan mudah. Iya bukan? Dengan bantuan Software Adobe Dreamweaver, kita bisa membuat form ini kurang dari 30 menit. Buat temen-temen yang membutuhkan script PHP Form Input data langsung aja ikutin caranya dimari. Baca dengan teliti ya? jangan terburu-buru takutnya kencing dicelana. hehe Pertama-tama temen-temen harus punya software Adobe Dreamweaver terserah versi berapa dan
Baca selengkapnya

Cara Membuat Halaman Statis di Blog Blogspot

Gambar
Halaman Statis (Static Page) pada blog merupakan suatu halaman yang bersifat mandiri dan dapat diberi aturan tersendiri sesuai keinginan user atau pengelola blog tersebut. Berbeda dengan Halaman Posting, halaman statis pada blog ini tidak terikat oleh waktu. Maksudnya halaman statis ini tidak muncul di dalam halaman depan atau home berurutan seperti layaknya halaman posting yang mana jika di halaman posting, setiap kita posting artikel terbaru maka artikel tersebut akan tergeser ke bawah begitu seterusnya.  Pada penerapannya, Halaman statis ini lebih tepat atau lebih cocok digunakan untuk memuat informasi seperti About Me, Contact Us, Daftar Isi atau Sitemap, Jasa Pemilik Blog dan informasi lainnya yang berhubungan dengan blog tersebut. Dan berikut saya berikan tutorial tentang Cara Pembuatan Halaman Statis di Blog Blogspot : Pertama masuk dahulu ke dalam akun Blogger anda. Masuk lah ke Control Panel Blogspot anda Kemudian Pilih Menu Page . Klik New Page dan Pilih
Baca selengkapnya