Tampilkan postingan dengan label tabel blog. Tampilkan semua postingan

Cara Membuat Tabel dengan Gambar

Jumat, 25 Januari 2013
Posted by Unknown
0 Comments
Tag : , , , , , , , , , ,
+
Cara Membuat Tabel dengan Gambar adalah cara yang sama ketika anda membuat tabel yang telah anda lakukan sebelumnya yang telah saya bahas di artikel cara membuat tabel vertikal namun lebih mudah dan pada artikel ini, Cara membuat tabel dengan gambar hanya ditambahkan satu kolom yang digunakan untuk memasukkan gambar kedalam tabel. Dan untuk menerapkan cara membuat tabel dengan gambar ini cukup menyalin kode yang telah saya buat untuk anda

Contoh Cara Membuat Tabel dengan Gambar
Cara Membuat Tabel dengan Gambar

Demo Cara Membuat Tabel dengan Gambar
Tabel 1.0 Daftar Blogger Sahabat
No. Judul Blog Alamat Link Logo Blog
1. Panduan Template Blog http://panduantemplateblog.blogspot.comcara membuat tabel
2. Panduan Template http://panduantemplateblog.blogspot.comcara membuat tabel
3. Panduan Blog http://panduantemplateblog.blogspot.comcara membuat tabel

Klik tombol berikut untuk melihat kode

<table border="1" style="width: 400px;"><tbody> </tbody><caption align="top"><b>Tabel 1.0 Daftar Blogger Sahabat</b></caption> <tbody>
<tr align="center"><th>No.</th> <th>Judul Blog</th> <th>Alamat Link</th> <th>Logo Blog</th></tr>
<tr align="center"><td>1.</td> <td>Panduan Template Blog</td> <td>http://panduantemplateblog.blogspot.com</td><td><img alt="cara membuat tabel" border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_DcA_t6cuKCKlhaQSWhLNd02HYoB0rmFz_HjaZxCODlIrKhAqmbgpqMfrNz32eRIQErQFN5r4IWMjHuAgCh3g9oQz8-NlBtGqrgB4Sxos8Oh25vd1UNVpc9L4bJm1ADr8yLWrecLSBNc/s1600/membuat+tabel.png" title="cara membuat tabel" width="50" /></td></tr>
<tr align="center"><td>2.</td> <td>Panduan Template</td> <td>http://panduantemplateblog.blogspot.com</td><td><img alt="cara membuat tabel" border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_DcA_t6cuKCKlhaQSWhLNd02HYoB0rmFz_HjaZxCODlIrKhAqmbgpqMfrNz32eRIQErQFN5r4IWMjHuAgCh3g9oQz8-NlBtGqrgB4Sxos8Oh25vd1UNVpc9L4bJm1ADr8yLWrecLSBNc/s1600/membuat+tabel.png" title="cara membuat tabel" width="50" /></td></tr>
<tr align="center"><td>3.</td> <td>Panduan Blog</td> <td>http://panduantemplateblog.blogspot.com</td><td><img alt="cara membuat tabel" border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_DcA_t6cuKCKlhaQSWhLNd02HYoB0rmFz_HjaZxCODlIrKhAqmbgpqMfrNz32eRIQErQFN5r4IWMjHuAgCh3g9oQz8-NlBtGqrgB4Sxos8Oh25vd1UNVpc9L4bJm1ADr8yLWrecLSBNc/s1600/membuat+tabel.png" title="cara membuat tabel" width="50" /></td></tr>
</tbody></table>


Fungsi: memberikan keterangan yang lebih lengkap terhadap isi tabel.
Ingat! Saat menuliskan kode diatas kedalam artikel, jangan lupa untuk memilih mode Html terlebih dahulu. Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini, cara membuat tabel dengan gambar
Description: Cara Membuat Tabel dengan Gambar
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Tabel dengan Gambar

Cara Membuat Tabel Sub Tabel Vertikal

Posted by Unknown
0 Comments
Tag : , , , , , , , , , ,
+
Cara Membuat Tabel Sub Tabel Vertikal tidak sama dengan membuat tabel dengan sub tabel horizontal yang telah saya tulis pada artikel sebelumnya. Membuat tabel sub tabel vertikal menampilkan daftar isi secara vertikal dalam sebuah tabel. Dengan adanya sub tabel vertikal ini, anda akan lebih mudah mengelompokkan data-data yang dimasukkan kedalam tabel seperti yang terlihat pada gambar berikut ini

Cara Membuat Tabel Sub Tabel Vertikal

Oya, sebenarnya nama tabel dengan sub tabel vertikal ini adalah columnHover yang saya modif dari sebuah plugin untuk wordpress. Awalnya saya tidak tahu namanya, setelah main-main di beberapa plugin tabel wp, akhirnya saya temukan namanya dan saya buatkan artikel Cara Membuat Tabel Sub Tabel Vertikal ini untuk anda :)

Berikut Cara Membuat Tabel Sub Tabel Vertikal
Demo:
TahunJumlah KelompokJumlah KelompokJumlah KelompokJumlah Kelompok
A1A2B1B2C1C2D1D2
Jumlah114982214
20132319242015211728
2014X-XX----
2015X-X-----
2016--X-XX-X
2017X-XX---X
2018X-XX---X
2019XX-X-X-X
2020XX-X----

Klik tombol berikut untuk melihat kode

<table border="1" style="width: 550px;"><thead>
<tr bgcolor="blue"><th rowspan="1"><span style="color: white;">Tahun</span></th><th colspan="2"><span style="color: white;">Jumlah Kelompok</span></th><th colspan="2"><span style="color: white;">Jumlah Kelompok</span></th><th colspan="2"><span style="color: white;">Jumlah Kelompok</span></th><th colspan="2"><span style="color: white;">Jumlah Kelompok</span></th></tr>
<tr><th></th><th bgcolor="red">A1</th><th bgcolor="red">A2</th><th bgcolor="yellow">B1</th><th bgcolor="yellow">B2</th><th bgcolor="green">C1</th><th bgcolor="green">C2</th><th bgcolor="pink">D1</th><th bgcolor="pink">D2</th></tr></thead> <tfoot><tr><td bgcolor="red"><span style="color: white;"><b>Jumlah</b></span></td><td>11</td><td>4</td><td>9</td><td>8</td><td>2</td><td>2</td><td>1</td><td>4</td></tr></tfoot><tbody>
<tr><td>2013</td><td>23</td><td>19</td><td>24</td><td>20</td><td>15</td><td>21</td><td>17</td><td>28</td></tr><tr><td>2014</td><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>2015</td><td>X</td><td>-</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>2016</td><td>-</td><td>-</td><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>X</td></tr>
<tr><td>2017</td><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>X</td></tr>
<tr><td>2018</td><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>X</td></tr>
<tr><td>2019</td><td>X</td><td>X</td><td>-</td><td>X</td><td>-</td><td>X</td><td>-</td><td>X</td></tr>
<tr><td>2020</td><td>X</td><td>X</td><td>-</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody></table>


Sekian, terimakasih telah membaca cara membuat tabel dengan sub tabel vertikal. Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini, cara membuat tabel dengan sub tabel vertikal
Description: Cara Membuat Tabel Sub Tabel Vertikal
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Tabel Sub Tabel Vertikal

Cara Membuat Tabel dengan Sub Tabel Horizontal

Posted by Unknown
0 Comments
Tag : , , , , , , , , , ,
+
Cara Membuat Tabel dengan Sub Tabel Horizontal ini adalah kita akan membuat tabel dengan beberapa kolom yang mana salah satu kolom adalah kolom utama yang mewakili beberapa kolom yang ada dan menyesuaikan dengan kriteria isi dari kolom utama yang berada dalam satu garis horizontal. ....hmmm penjelasannya terlalu rumit nich.. Okey, untuk lebih jelasnya mengenai cara membuat tabel dengan sub tabel horizontal ini seperti yang terlihat pada gambar berikut ini

Cara Membuat Tabel dengan Sub Tabel Horizontal

Selanjutnya untuk menerapkan cara membuat tabel dengan sub tabel horizontal, silahkan anda salin kode berikut ini kedalam artikel blog anda dan pastikan saat menyalin kode ini, ganti mode penulisan ke bentuk Html

Tabel 1.1 Daftar Perusahaan Ponsel Lokal
Perusahaan Merek Ponsel Kode Ponsel Tahun Rilis Harga Ketersedian Foto
Nexian Cappuccino NX-G869 2011 Rp.650.000 Tersedia -
Snap G857 2011 Rp.400.000 Tersedia -
SoundBox G509 2010 Rp.275.000 Tersedia -
Magic A893 2012 Rp.1.500.000 Tersedia -
CSL Blueberry i8100 2011 Rp.400.000 Tersedia -
Blueberry i5800 2011 Rp.400.000 Tersedia -
Blueberry i6400 2011 Rp.300.000 Tersedia -
Maxtron MG 218 2011 Rp.300.000 Tersedia -

Klik tombol berikut untuk melihat kode

<table border="1" style="width: 550px;"><tbody> </tbody><caption align="top"><b>Tabel 1.1 Daftar Perusahaan Ponsel Lokal</b></caption> <tbody>
<tr align="center" bgcolor="deepskyblue"> <td><b>Perusahaan</b></td> <td><b>Merek Ponsel</b></td> <td><b>Kode Ponsel</b></td> <td><b>Tahun Rilis</b></td> <td><b>Harga</b></td> <td><b>Ketersedian</b></td> <td><b>Foto</b></td></tr>
</tbody><tbody>
<tr> <td align="center" rowspan="4"><span style="color: #cc0000;"><b>Nexian</b></span></td> <td><span style="color: #0b5394;"><b>Cappuccino</b></span></td> <td>NX-G869</td> <td>2011</td> <td>Rp.650.000</td> <td>Tersedia</td> <td>- </td></tr>
<tr><td><span style="color: #0b5394;"><b>Snap</b></span></td> <td>G857</td> <td>2011</td> <td>Rp.400.000</td> <td>Tersedia</td> <td>- </td></tr>
<tr><td><span style="color: #0b5394;"><b>SoundBox</b></span></td> <td>G509</td> <td>2010</td> <td>Rp.275.000</td> <td>Tersedia</td> <td>- </td></tr>
<tr><td><span style="color: #0b5394;"><b>Magic</b></span></td> <td>A893</td> <td>2012</td> <td>Rp.1.500.000</td> <td>Tersedia</td> <td>- </td></tr>
<tr> <td align="center" rowspan="3"><span style="color: #cc0000;"><b>CSL</b></span></td> <td><span style="color: #0b5394;"><b>Blueberry</b></span></td> <td>i8100</td> <td>2011</td> <td>Rp.400.000</td> <td>Tersedia</td> <td>- </td></tr>
<tr><td><span style="color: #0b5394;"><b>Blueberry</b></span></td> <td>i5800</td> <td>2011</td> <td>Rp.400.000</td> <td>Tersedia</td> <td>- </td></tr>
<tr><td><span style="color: #0b5394;"><b>Blueberry</b></span></td> <td>i6400</td> <td>2011</td> <td>Rp.300.000</td> <td>Tersedia</td> <td>- </td></tr>
<tr> <td align="center" rowspan="3"><span style="color: #cc0000;"><b>Maxtron</b></span></td> <td><span style="color: #0b5394;"><b>MG</b></span></td> <td>218</td> <td>2011</td> <td>Rp.300.000</td> <td>Tersedia</td> <td>- </td></tr>
</tbody></table>

Membuat tabel dengan sub tabel horizontal ini memiliki fungsi menampilkan beberapa kategori atau spesifikasi dari sebuah benda. Dan sangat cocok dipasang di blog yang memiliki topik elektronik seperti yang ada di Tabloid Pulsa.

Sekian, terimakasih telah membaca cara membuat tabel dengan sub tabel horizontal. Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini, cara membuat tabel dengan sub tabel horizontal
Description: Cara Membuat Tabel dengan Sub Tabel Horizontal
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Tabel dengan Sub Tabel Horizontal
Welcome to My Blog

Popular Post

Labels

Followers

- Copyright © 2013 shad0w-share | Designed by Johanes Djogan -