Jumat, 25 Januari 2013

Cara Membuat Tabel Sub Tabel Vertikal

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

Cara Membuat Tabel Sub Tabel Vertikal Rating: 4.5 Diposkan Oleh: ana sriwahyuni

0 komentar:

Poskan Komentar

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia