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
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:
Tahun | Jumlah Kelompok | Jumlah Kelompok | Jumlah Kelompok | Jumlah Kelompok | ||||
---|---|---|---|---|---|---|---|---|
A1 | A2 | B1 | B2 | C1 | C2 | D1 | D2 | |
Jumlah | 11 | 4 | 9 | 8 | 2 | 2 | 1 | 4 |
2013 | 23 | 19 | 24 | 20 | 15 | 21 | 17 | 28 |
2014 | X | - | X | X | - | - | - | - |
2015 | X | - | X | - | - | - | - | - |
2016 | - | - | X | - | X | X | - | X |
2017 | X | - | X | X | - | - | - | X |
2018 | X | - | X | X | - | - | - | X |
2019 | X | X | - | X | - | X | - | X |
2020 | X | X | - | 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
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Tabel Sub Tabel Vertikal
Related Posts :
- Back to Home »
- cara , cara membuat tabel , membuat tabel , panduan blog , tabel , tabel artikel , tabel berwarna , tabel blog , tabel gambar , tabel horizontal , tabel vertikal »
- Cara Membuat Tabel Sub Tabel Vertikal