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

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

Cara Membuat Tabel Sub Tabel Vertikal 2013-01-25T12:05:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni