Posted by : Unknown Jumat, 25 Januari 2013

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

Leave a Reply

Monggo Tinggalkan Jejak Kaks :)

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Popular Post

Labels

Arsip Blog

Followers

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