Cara Menggabungkan Kolom Dan Baris Pada Tabel Di Blog, Pola 5

Berikut ini ialah cara menggabungkan kolom dan baris pada tabel. Beberapa arahan yang tidak dijelaskan disini, sanggup dilihat pada Contoh tabel 1 hingga dengan 4.

Pada teladan kali ini, menciptakan 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 dipakai untuk menciptakan 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 dipakai sanggup dilihat pada klarifikasi teladan 1 s/d 4. Sebagai perhiasan disini ialah :

• 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.