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

Program Mencari Bilangan Prima Dengan Vb 6.0

Gambar
Bilangan prima adalah bilangan yang hanya bisa dibagi oleh 1 dan bilangan itu sendiri selain itu dianggap bukan prima. Khusus untuk angka 1 disebut bilangan bukan prima dan 2 disebut bilangan prima. Contoh bilangan prima : 2, 3, 5, 7, 11,…```````````````````````````````````````````````````````````````````````````````` Secara manual kita mencari bilangan itu prima atau tidak dengan cara : Contoh masukan angka adalah 5, maka proses penghitungannya adalah sebagai berikut : 1) 5 Mod 5 = 0 2) 5 Mod 4 = 1 3) 5 Mod 3 = 2 4) 5 Mod 2 = 1 5) 5 Mod 1 = 0 Perhatikan pada sub penghitungan 2-4 tidak ada angka 0 dalam rangkaian penghitungan tersebut membuktikan bahwa angka 5 tidak habis dibagi oleh angka-angka selain 1 dan 5 (bilangan itu sendiri), lain halnya jika yang bukan prima (coba kita masukkan angka 6 misalnya) 1) 6 Mod 6 = 0 2) 6 Mod 5 = 1 3) 6 Mod 4 = 2 4) 6 Mod 3 = 0 5) 6 Mod 2 = 0 6) 6 Mod 1 = 6 Perhatikan pada sub penghitungan 2-4 ternyata angka 0 dalam rangkaian p...
Baca selengkapnya
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 2...
Baca selengkapnya

Tutorial Membuat Kalender Menggunakan Publisher 2007

Gambar
Microsoft Publisher adalah salah satu dari sekian produk unggulan raksasa software Microsoft, aplikasi ini mempunyai banyak kemampuan dan fitur, selain digunakan untuk untuk keperluan kegiatan kantor, aplikasi ini juga banyak digunakan oleh pebisnis kecil sebagai tool mendesain brosur, template newsletter, kartupos kalender. Meskipun tidak memiliki fitur desain selengkap Corel Draw, namun cukup untuk menciptakan sebuah kalender cantik nan sederhana.   Tutorial kali ini akan memberikan panduan singkat membuat kalender sederhana menggunakan Microsoft Publisher 2007, tidak ada salahnya kita membahas aplikasi yang satu ini, mengingat belum sekalipun saya mengulas tutorial yang melibatkan Microsoft Publisher. Oke, langsung saja, jalankah aplikasi Microsoft Publisher di komputer Anda. Pada tampilan depan aplikasi Anda akan disambut dengan teks Getting Started with Microsoft Office Publisher 2007 . Di bawah teks tersebut terdapat beberapa pilihan template yang dapat And...
Baca selengkapnya