Cara Membuat Tabel Pada Postingan atau Artikel Responsive di Blogger

Membuat Tabel 

Cara Membuat Tabel Pada Postingan atau Artikel Responsif  di Blogger  - Tabel adalah Sebuah media untuk menampilkan informasi dalam bentuk matriks atau susunan data yang disajikan dalam bentuk baris dan kolom.

Dengan menampilkan informasi dalam bentuk tabel maka informasi yang disampaikan akan tampak lebih spesifik dan dapat memberikan kemudahan bagi para pembaca, tabel biasanya digunakan dalam membuat sebuah analisis data, penelitian ataupun dalam sebuah jurnal dan lain sebagainya.

Cara Membuat Tabel Responsive Pada Postingan Blog 

Ada beberapa cara yang saya ketahui untuk membuat tabel pada postingan blog diantaranya adalah; 

• Membuat tabel dengan menggunakan Microsoft word
• Membuat tabel dengan menggunakan Microsoft Exel
• Membuat tabel dengan menggunakan kode HTML, dan lain sebagainya.

Cara Membuat Tabel Pada Postingan Blog Dengan Microsof word 

Pasti anda juga sudah tau tentang Microsoft word, selain digunakan untuk mengetik, microsoft word juga dapat digunakan untuk membuat tabel pada pembuatan analisis data, dalam membuat jurnal, dan dapat juga kita manfaatkan untuk membuat tabel pada postingan di blogger.

Cara membuat tabel pada postingan Blogger dengan Microsoft Word,

cara ini sangat mudah digunakan dan mudah dipahami, Langkah-langkahnya adalah sebagai berikut ;

• Buka Microsoft word pada perangkat komputer anda
• Pilih Blank document
• Selanjutnya anda pilih Tab menu Insert
• Langkah selanjutnya silahkan anda pilih Table
• Tentukan jumlah baris dan kolom sesuai yang anda kehendaki
• Anda dapat mengatur lebar atau tinggi kolom pada microsoft word ataupun setelah anda copy paste pada postingan artikel yang sedang anda buat.
• Setalah itu anda dapat mengisi secara langsung kolom-kolom tersebut atau anda dapat mengisinya nanti setelah anda copy paste pada postingan Blogger
• Copy dan pastekan kolom yang telah anda buat pada postingan blogger yang sedang anda buat
• Contoh Tabel ;

• Kolom 1	Kolom 2	Kolom 3	Kolom 4
  Baris 1
  Baris 2

• Bentuk kolom tersebut merupakan bentuk kolom sederhana, dan anda dapat mengapresiasikan sendiri bentuk kolom yang sesuai dengan kebutuhan anda.

Cara Membuat Tabel Pada Postingan Blogger Dengan Microsoft Exel,

Cara ini juga tergolong cukup mudah, caranya hampir sama dengan microsoft word, anda hanya tinggal menentukan jumlah baris dan kolom lalu di copy dan pastekan pada Postingan artikel yang sedang anda buat.( Pada saat membuat Postingan atau Artikel)

Langkah-langkahnya adalah sebagai berikut;

• Silahkan anda buka terlebih dahulu Microsoft Exel pada perangkat komputer anda. 
• Pilih Blank Work book
• Langkah selanjutnya Tentukan jumlah baris dan kolom yang anda butuhkan
• isi tabel baris dan kolom sesuai kebutuhan anda
• Copy dan pastekan tabel yang telah anda buat pada microsoft exel tadi di http://tableizer.journalistopia.com
• Pastekan tabel microsoft exel anda tadi pada tempat yang telah disediakan lalu tekan tombol "Load"
• Setelah tampil default tabel style,Langkah selanjutnya tekan tombol "Generate"
• Copy code HTML yang telah anda dapatkan dari Generator tadi dan pstekan pada postingan blog yang sedang anda buat. (pastekan kode pada mode HTML)
• Tabel telah selesai dibuat dengan microsoft exel.

Membuat Tabel Yang Responsive Pada Postingan Blogger Dengan Kode HTML

Menurut saya Cara membuat tabel dengan kode HTML juga tidak sulit, dalam metode ini hanya membutuhkan tiga tag dasar diantaranya yaitu <table>, <tr>, <td> dan disertai dengan tag penutup.
Contohnya adalah sebagai berikut:

CONTOH TABEL
Kolom 1	Kolom 2	Kolom 3
Baris 1
Baris 2
Baris 3

Untuk membuat tabel seperti contoh diatas langkah-langkahnya adalah sebagai berikut :

• Langkah yang pertama silahkan anda buka Dashboard Blogger anda
• Lalu pilih Tema tekan tombol edit HTML
• Langkah selanjutnya silahkan anda copas kode css tabel dibawah ini dan letakkan di atas kode ]]></b:skin>
  

  /* Css Post Table */
  .post-body table {width:100%;}
  .post-body table td,.post-body table caption{background:#f1f9c4;border:1 px;padding:10px;text-align:left;vertical-align:top}
  .post-body table th{background:#8ef8ec;border:1 px;padding:10px;text-align:left;vertical-align:top}
  .post-body table.tr-caption-container {border:0;margin:0;}
  .post-body th{font-weight:420;}
  .post-body table caption{border:none;font-style:italic;}
  .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #97b28e;}
  .post-body th{}
  .post-body td a{color:#444;}
  .post-body td a:hover{color:#cf4d35;}
  .post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#000;}
  .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
  .post-body li {list-style-type:square;}
  .post-body td.tr-caption{font-size:85%;padding:10px!important}
  .sr {visibility:hidden;width:0;height:0;}
  .clear{clear:both}
  html {-webkit-font-smoothing:antialiased;}
  ::selection {background:#2eb0ec;color:#fff;text-shadow:none;}
  .post-body ::selection {background:#2eb0ec;color:#fff;}

• Setelah selesai memasang kode HTML tersebut anda save templatenya, setelah itu copy kode tabel dibawah ini dan pastekan pada postingan yang akan anda beri tabel. (pastekan dalam format HTML)
  

  <table cellspacing="1"><tbody>
  <tr><th colspan="3">CONTOH TABEL</th></tr>
  <tr><td>Kolom 1</td><td>Kolom 2</td><td>Kolom 3</td></tr>
  <tr><td>Baris 1</td><td> </td><td> </td></tr>
  <tr><td>Baris 2</td><td> </td><td> </td></tr>
  <tr><td>Baris 3</td><td> </td><td> </td></tr>
  </tbody></table>

  Lihat hasilnya, apakah anda berhasil membuat tabel yang sesuai dengan yang anda inginkan?
  

Contoh tabel diatas merupakan bentuk tabel sederhana, dan anda dapat merubah atau menambahkan kolom dan baris pada tabel tersebut sesuai dengan yang anda inginkan.

anda dapat menggabungkan kolom dengan cara menambahkan colspan, colspan merupakan sebuah perintah untuk menggabungkan kolom, jika anda ingin menggabungkan 2 kolom maka anda tambahkan kode colspan="2" dan seterusnya.
contoh penggabungan 3 kolom ;

<tr><td colspan="3">Contoh Penggabungan 3 Kolom</td></tr>

Maka hasilnya akan seperti dibawah ini;

CONTOH TABEL
Contoh Penggabungan 3 Kolom
Baris 1
Baris 2
Baris 3

Untuk menggabungkan baris anda cukup menambahkan kode perintah rowspan="..."
jika anda ingin menggabungkan 2 baris maka tulis kode perintahnya menjadi

<tr><td rowspan="2">Contoh Penggabungan 3 Kolom</td></tr>

Maka hasilnya akan seperti dibawah ini;

CONTOH TABEL
Penggabungan 2 Baris	Baris 1
	Baris 2

Baris 3

Demikian Tips tentang Cara Membuat Tabel Pada Postingan atau Artikel Responsive  di Blogger, semoga bermanfaat.

Bagikan Artikel ini