Sunday, February 28, 2016

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

KelasNama NilaiRata-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

No comments:

Post a Comment