Perhatian

Hadis Nabi Muhammad s.a.w :

"Satu umrah ke satu umrah menghapuskan dosa di antara keduanya, dan haji yang mabrur tiada balasan baginya melainkan syurga."
Blogger TIDAK menyediakan atau menganjurkan apa-apa pakej UMRAH mahupun pakej pelancungan bentuk lain. Sebarang maklumat yang di paparkan di sini adalah sekadar pandangan serta panduan mengikut pendapat admin dan pembaca jika ada pengunjung yang mengalami apa-apa kerugian akibat membaca blog ini adalah menjadi tanggungjawab pembaca itu sendiri. Sebarang komen dalam hal berkaitan umrah back packer adalah di alu-alukan bagi membantu rakan taulan melaksanakan UMRAH secara termurah, bagaimanapun janganlah komen yang boleh menyinggung perasaan mana-mana pihak. Terima kasih dan berkunjunglah selalu ke blog ini.

Malaysian Ringgit Calculator

Carian

Ahad, September 22, 2013

Bagaimana Hendak Membuat Jadual Dalam Blogger

Bahagian tutorial Blogger  ( Blogspot tutorial ) Blog UMRAHsertaZIARAH ini menerangkan bagaimana meletakkan jadual (table) ke post Blogger.
Anda akan mempelajari bagaimana untuk mencipta jadual dalam Blogger dari jadual yang mudah kepada jadual lebih kompleks dengan seli-warna.

Kami akan bermula dengan sebuah jadual asas dan secara beransur-ansur menambah gaya CSS ke jadual untuk memperbaiki rupa dan fungsi sehingga kita dapat membina jadual di gambarkan secara langsung di bawah. Tutorial Blogger ini sesuai untuk pemula blog.Tiada pengetahuan tentang CSS dan HTML di perlukan.

A Blogger Table Caption
Tajuk Jadual
Tajuk Jadual
tajuk Jadual
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell


Jadual adalah cara yang berguna untuk memaparkan maklumat terutamanya maklumat direkodkan. Jadual baik apabila anda mahu untuk menyelaraskan maklumat supaya ia adalah mudah untuk dibaca dan difahami. Anda boleh menambah teks, hyperlink dan juga imej-imej kepada jadual yang menjadikan ianya sangat berguna untuk menyampaikan maklumat.

Tiada cara mudah untuk menambah jadual dalam Blogger. Malah jika anda menggunakan editor baru yang anda akan ambil perhatian bahawa tidak ada butang jadual disediakan. Mujurlah ia adalah cukup mudah untuk menggunakan sedikit gaya CSS untuk merapikan jadual dan masukkan ini secara manual ke dalam post Blogger.


Bagaimana untuk Tambah Jadual kepada Posts Blogger 

Pertama, anda akan belajar bagaimana untuk menambah jadual yang mudah untuk Blogger. Kami akan bermula dengan sebuah jadual dengan 3 kalum dan 4 baris termasuk baris pengepala . Kemudian saya akan menunjukkan kepada anda langkah demi langkah bagaimana untuk menambah ciri-ciri yang berbeza untuk jadual termasuk bagaimana untuk menambah baris tambahan, warna latar belakang kepala, sempadan, kapsyen, menukar saiz jadual , pusat menyelaraskan jadual dan banyak lagi.


Jadual Jadual Header Header Jadual Tandukan

Pengepala TajukPengepala TajukPengepala Tajuk
Petak JadualPetak JadualPetak Jadual
Petak JadualPetak JadualPetak Jadual
Petak JadualPetak JadualPetak Jadual



  1. Dalam Blogger terbuka sama ada jawatan baru atau pos yang sedia ada yang anda ingin menambah jadual untuk
  2. Klik pada tab Edit HTML pada editor Blogger anda
  3. Salin kod berikut ke dalam post Blogger anda yang akan menghasilkan jadual asas seperti yang ditunjukkan di atas:
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><tr>
<th>Pengepala Tajuk</th>
<th>Pengepala Tajuk</th>
<th>Pengepala Tajuk</th>
</tr>
<tr>
<td>Petak Jadual</td>
<td>Petak Jaduall</td>
<td>Petak Jadual</td>
</tr>
<tr>
<td>Petak Jadual</td>
<td>Petak Jadual</td>
<td>Petak Jadual</td>
</tr>
<tr">

<td>Petak Jadual</td>
<td>Petak Jadual</td>
<td>Petak Jadual</td>
</tr>
</table>








4.    Membuat perubahan kepada jadual untuk disesuaikan dengan template Blogger anda sendiri jika perlu dengan perubahan berikut:Klik di sini

     

<TABLE border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">




4.1 lebar Sempadan ( biru)

4.2 Sempadan warna ( hitam)

4.3 Warna latar belakang (merah)

4.4 Jadual lebar (oren) Boleh peratusan atau lebar contohnya sebenar 500px



5. Sekarang kita akan menetapkan satu masalah yang menjengkelkan dalam Blogger yang menjadikan ruang putih yang terlalu banyak di atas jadual. Kami melakukan ini dengan menambah gaya berikut ditandakan dengan warna merah secara terus di atas tag meja dan menambah penutup </ div> di akhir kod table



<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table></div>


6.  Mari kita menambah beberapa gaya lagi kepada tajuk jadual kami untuk memperbaiki rupa meja kami sebagai ditandakan dengan warna merah. Menukar warna latar belakang dan ciri-ciri warna untuk disesuaikan dengan skim warna anda sendiri jika anda ingin

Pengepala TajukPengepala TajukPengepala Tajuk
Isi Petak Isi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak


<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>

7.      Dalam langkah ini kita akan ke pusat kandungan jadual Blogger kami. Ini boleh dilakukan dalam beberapa cara tetapi kita akan mengambil jalan pintas di sini dengan memberi gaya kepada setiap baris jadual.


Pengepala TajukPengepala TajukPengepala Tajuk
Isi Petak Isi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>

<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>

</table>

8.  Sekarang kita akan menambahbaikkan jadual Blogger kami dengan menambah seli baris berwarna untuk meningkatkan readibility dan rupa. Setakat ini cara yang paling mudah untuk melakukan ini adalah untuk menetapkan kelas.

Pengepala TajukPengepala TajukPengepala Tajuk
Isi Petak Isi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak


<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} </style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">


9.   Ia juga mudah untuk menambah kapsyen ke meja Blogger anda. Untuk keterangan di atas meja hanya menambah baris tajuk seperti yang ditunjukkan dengan warna merah. Untuk keterangan di bawah meja menambah baris kapsyen merah dan gaya seperti yang ditunjukkan dengan warna biru


Pengepala TajukPengepala TajukPengepala Tajuk
Isi Petak Isi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak
Isi PetakIsi PetakIsi Petak


<table border="2" bordercolor="#0033FF" cellpadding="3" cellspacing="3" style="background-color: #99ffff; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 13px; line-height: 18.90625px;"><tbody>
<tr style="background-color: #0033ff; color: white; padding-bottom: 4px; padding-top: 5px; text-align: center;"><th>Pengepala Tajuk</th><th>Pengepala Tajuk</th><th>Pengepala Tajuk</th></tr>
<tr style="text-align: center;"><td>Isi Petak&nbsp;</td><td>Isi Petak</td><td>Isi Petak</td></tr>
<tr style="text-align: center;"><td><span style="background-color: lime; color: black;">Isi Petak</span></td><td><span style="background-color: lime;">Isi Petak</span></td><td><span style="background-color: lime;">Isi Petak</span></td></tr>
<tr style="text-align: center;"><td>Isi Petak</td><td>Isi Petak</td><td>Isi Petak</td></tr>
<tr style="text-align: center;"><td><span style="background-color: yellow;">Isi Petak</span></td><td><span style="background-color: yellow;">Isi Petak</span></td><td><span style="background-color: yellow;">Isi Petak</span></td></tr>
</tbody></table>
</div>
<div style="text-align: left;">
<br />


10.  Satu harta yang lebih penting perlu ditangani dalam jadual Blogger baru untuk meningkatkan rupa. Kita boleh mengurangkan sempadan dua kali ke dalam satu tunggal. Cara yang paling mudah untuk melakukan ini adalah untuk mengubah cellspacing kepada sifar sebagai ditandakan dengan warna merah. Atau, sebagai alternatif kita boleh memohon harta keruntuhan sempadan ke meja kami seperti yang ditunjukkan dengan warna biru. Nota: keruntuhan Sempadan mungkin tidak disokong oleh semua pelayar terutamanya jika sifat cellspacing yang ditakrifkan juga)


Jadual Caption Blogger
Pengepala Tajuk
Pengepala Tajuk
Pengepala Tajuk
Isi Petak 
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak


<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Jadual Caption Blogger</div>
<div style="text-align: left;">
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<table border="2" bordercolor="#0033FF" cellpadding="3" cellspacing="3" style="background-color: #99ffff; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 13px; line-height: 18.90625px;"><tbody>
<tr style="background-color: #0033ff; color: white; padding-bottom: 4px; padding-top: 5px; text-align: center;"><th><div style="margin: 0px;">
Pengepala Tajuk</div>
</th><th><div style="margin: 0px;">
Pengepala Tajuk</div>
</th><th><div style="margin: 0px;">
Pengepala Tajuk</div>
</th></tr>
<tr style="text-align: center;"><td><div style="margin: 0px;">
Isi Petak&nbsp;</div>
</td><td><div style="margin: 0px;">
Isi Petak</div>
</td><td><div style="margin: 0px;">
Isi Petak</div>
</td></tr>
<tr style="text-align: center;"><td><div style="margin: 0px;">
<span style="background-color: lime; color: black;">Isi Petak</span></div>
</td><td><div style="margin: 0px;">
<span style="background-color: lime;">Isi Petak</span></div>
</td><td><div style="margin: 0px;">
<span style="background-color: lime;">Isi Petak</span></div>
</td></tr>
<tr style="text-align: center;"><td><div style="margin: 0px;">
Isi Petak</div>
</td><td><div style="margin: 0px;">
Isi Petak</div>
</td><td><div style="margin: 0px;">
Isi Petak</div>
</td></tr>
<tr style="text-align: center;"><td><div style="margin: 0px;">
<span style="background-color: yellow;">Isi Petak</span></div>
</td><td><div style="margin: 0px;">
<span style="background-color: yellow;">Isi Petak</span></div>
</td><td><div style="margin: 0px;">
<span style="background-color: yellow;">Isi Petak</span></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="text-align: left;">



11. Satu harta yang lebih penting perlu ditangani dalam jadual Blogger baru untuk meningkatkan rupa. Kita boleh mengurangkan sempadan dua kali ke dalam satu tunggal. Cara yang paling mudah untuk melakukan ini adalah untuk mengubah cellspacing kepada sifar sebagai ditandakan dengan warna merah. Atau, sebagai alternatif kita boleh memohon harta keruntuhan sempadan ke meja kami seperti yang ditunjukkan dengan warna biru. Nota: keruntuhan Sempadan mungkin tidak disokong oleh semua pelayar terutamanya jika sifat cellspacing yang ditakrifkan juga)

Pengepala Tajuk
Pengepala Tajuk
Pengepala Tajuk
Isi Petak 
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak
Isi Petak


<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="10" cellspacing="0">
<caption>A Blogger Table Caption</caption>
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>

12.   Sekarang pergi ke hadapan dan tambah data anda ke jadual Blogger baru anda. Mengisi dalam setiap contoh "Jadual Header " dan "Jadual Sel" dengan data anda sendiri. Maklumat yang anda menambah ke meja Blogger boleh teks, hyperlink atau imej

13.   Simpan perubahan anda ke meja Blogger dengan menyimpan dan menerbitkan catatan anda



Sila berasa bebas untuk menggunakan jadual Blogger ini sebagai template bila-bila masa yang anda perlukan untuk menambah meja ke jawatan Blogspot anda. Jika anda mahu untuk sentiasa menambah jadual untuk jawatan Blogger anda yang sentiasa kelihatan sama anda boleh pertimbangkan untuk menambah jadual CSS untuk gaya template Blogger anda.

Dalam Blogger tutorial ( Blogspot tutorial) saya telah menunjukkan bagaimana untuk membina sebuah jadual kompleks dalam HTML dan CSS untuk memasukkan ke dalam post Blogger. Anda telah belajar bagaimana untuk memanipulasi pelbagai ciri-ciri dan sifat-sifat jadual untuk mewujudkan satu jadual untuk Blogger yang sepadan dengan skim warna blog anda dan berfungsi dan menarik.

Artikel yang Berkaitan
Senarai Blog Tahu Bagaimana Tutorial untuk Blogger Blogs
Bagaimana Tukar Point Gaya peluru dalam Blogger ( Blogspot)
Bagaimana Buang Border Image Blogger Template Simple
Bagaimana untuk Tukar atau Padam Sempadan Imej dalam Blogger Posts
Bagaimana untuk Tambah Styling CSS untuk Blockquotes di Blogger
Bagaimana untuk Tambah , Padam atau Keluarkan Blogger Imej Sempadan
Bagaimana untuk menyelaraskan dan Jelaskan Posts dalam Blogger
Bagaimana untuk Tambah Divider Antara Blogger Posts
Bagaimana untuk Tambah atau Ubah Imej Latar belakang dalam Template Blogger


pada
Labels: , , , , ,

Tiada ulasan:

Catat Ulasan

Langgan: Catat Ulasan (Atom)

Catatan Popular



Related Posts Plugin for WordPress, Blogger...

Visitor Umrah Persendirian