Cara menggabungkan Kolom dan Baris pada Tabel di Blog, contoh 5

Berikut ini adalah cara menggabungkan kolom dan baris pada tabel. Beberapa kode yang tidak dijelaskan disini, bisa dilihat pada Contoh tabel 1 sampai dengan 4.

Pada contoh kali ini, membuat tampilan tabel dengan menggabungkan kolom (colspan) dan menggabungkan baris (rowspan). Pada tabel ini juga dicontohkan, terdapat header diatas dan di sebelah kiri.



Tampilan tabel yang diinginkan

Kelas	Nama	Nilai			Rata-rata
		Fisika	Kimia	Biologi
IPA 1	Mira	75	75	75	75
	Ferdy	85	75	80	80
	Thalia	70	80	75	75
	Donny	75	75	75	75
IPA 2	Mirna	80	70	75	75
	Ali	75	85	80	80
	Dinda	75	75	75	75
	Surya	95	90	85	90
	Maria	75	75	75	75

CSS dan HTML yang digunakan untuk membuat tabel

<style>

#tabel5 {
    width:100%;
    border: 2px solid darkmagenta;
}

#tabel5 tr:nth-child(even) {
    background-color: Thistle ;
}
#tabel5 tr:nth-child(odd) {
    background-color:WhiteSmoke;
}

#tabel5 th {
     height:25px;
     background-color: DarkOrchid;
     color : white;
}

#tabel5 td {
   color : darkviolet;
   text-align : center;
}

#tabel5 tr:hover {
    background-color:MistyRose;
}

#tabel5 td:hover {
   background-color:LightPink;
}

</style>


<div>
<table align="center" id="tabel5">
<tbody>
<tr><th rowspan="2" width="40">Kelas</th><th rowspan="2" width="110">Nama</th>  
    <th colspan="3">Nilai</th><th rowspan="2">Rata-rata</th></tr>
<tr><th>Fisika</th>
    <th>Kimia</th>
    <th>Biologi</th>
</tr>
<tr>
<th rowspan="4">IPA 1</th>
<td style="padding: 5px; text-align: left;">Maria</td>
<td>75</td>
<td>75</td>
<td>75</td>
<td>75</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Ferdy</td>
<td>85</td>
<td>75</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Thalia</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>75</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Donny</td>
<td>75</td>
<td>75</td>
<td>75</td>
<td>75</td>
</tr>
<tr>
<th rowspan="5">IPA 2</th>
<td style="padding: 5px; text-align: left;">Mirna</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td>75</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Ali</td>
<td>75</td>
<td>85</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Dinda</td>
<td>75</td>
<td>75</td>
<td>75</td>
<td>75</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Surya</td>
<td>95</td>
<td>90</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Maria</td>
<td>75</td>
<td>75</td>
<td>75</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>

Penjelasan

Kode-kode CSS yang digunakan dapat dilihat pada penjelasan contoh 1 s/d 4. Sebagai tambahan disini adalah :

• rowspan="2" : menggabungkan 2 row (baris) menjadi satu baris
• colspan="3" : menggabungkan 3 column (kolom) menjadi satu kolom

Referensi

http://www.w3schools.com/

---

Artikel terkait

Cara Membuat Tabel di blogger, Contoh 1 .

Membuat tabel di blogger , Contoh 2 : highlight baris dan field yang dipilih .

Membuat tabel di blogger , Contoh 3 : banckground color

Membuat tabel di blogger , Contoh 4 : responsif / overflow.