Membuat tabel di blogger menggunakan CSS, Contoh 4

Tampilan tabel yang diinginkan

Pada contoh 4 ini, membuat tampilan tabel responsif

No.	Nama	Matematika	Fisika	Kimia	B, Indo	PPKN	Biologi	Sejarah	Komputer	Geografi	Ekonomi
1	Nita	80	88	79	87	77	86	87	79	90	86
2	Alisa	90	75	79	87	77	78	87	79	90	86
3	Lois	82	75	79	87	77	88	87	79	90	86
4	Puspa	80	85	79	70	77	88	87	79	90	86

CSS dan HTML

Untuk membuat tampilan tabel seperti diatas, adalah sebagai berikut :

<style>
#tabel4 {
    width:100%;
    border: 3px solid #37d58c;
}

#tabel4 tr:nth-child(even) {
    background-color: #f2f2f2;
}
#tabel4 tr:nth-child(odd) {
    background-color: #99efc7;
}

#tabel4 th {
     height:25px;
     background-color: #0ab165;
     color : white;
}

#tabel4 td {
   color : #480063;
   padding:5px;
}

#tabel4 th:hover {
    background-color:#ef99ea;
}

#tabel4 td:hover {
   background-color:#ffd99d;
}

</style>


<div style="overflow-x: auto;  height: 150px ;
     "overflow-y: scroll;">
<table align="center" id="tabel4">
<tbody>
<tr>
    <th>No.</th>
    <th style="width: 70px;">Nama</th>
    <th>Matematika</th>
    <th>Fisika</th>
    <th>Kimia</th>
    <th>Biologi</th>
    <th>PPKN</th>
    <th>Bahasa Indonesia</th>
    <th>Ketrampilan</th>
    <th>Komputer</th>
    <th>Geografi</th>
    <th>Ekonomi</th>
   </tr>
<tr>
    <td>1</td>
    <td>Nita</td>
    <td>80</td>
    <td>88</td>
    <td>79</td>
    <td>87</td>
    <td>77</td>
    <td>86</td>
    <td>87</td>
    <td>79</td>
    <td>90</td>
    <td>86</td>
      </tr>
<tr>
    <td>2</td>
    <td>Alisa</td>
    <td>90</td>
    <td>75</td>
    <td>79</td>
    <td>87</td>
    <td>77</td>
    <td>78</td>
    <td>87</td>
    <td>79</td>
    <td>90</td>
    <td>86</td>
    </tr>
<tr>
    <td>3</td>
    <td>Lois</td>
    <td>82</td>
    <td>75</td>
    <td>79</td>
    <td>87</td>
    <td>77</td>
    <td>88</td>
    <td>87</td>
    <td>79</td>
    <td>90</td>
    <td>86</td>
   </tr>
<tr>
    <td>4</td>
    <td>Puspa</td>
    <td>80</td>
    <td>85</td>
    <td>79</td>
    <td>70</td>
    <td>77</td>
    <td>88</td>
    <td>87</td>
    <td>79</td>
    <td>90</td>
    <td>86</td>
     </tr>
</tbody>
</table>
</div>

Penjelasan

Kode yang digunakan untuk style CSS :

• overflow-x: auto digunakan untuk membuat tabel responsif untuk horizontal.
• overflow-y: scroll digunakan untuk membuat tabel responsif untuk vertical.
• dalam contoh ini, dibuat height : 150px, agar scroll kebawah terlihat efeknya.

Referensi
http://www.w3schools.com/css/css_table.asp

---

Artikel terkait :

• Membuat hyperlink di blogger menggunakan html
• Membuat garis pada blogger dengan kode html
• Membuat bullet dan mumbering html
• Membuat bullet dan numbering CSS
• Membuat tabel di blogger menggunakan CSS, Contoh 1
• Membuat tabel di blogger menggunakan CSS, Contoh 2
• Membuat tabel di blogger menggunakan CSS, Contoh 3
• Cara menggabungkan kolom dan baris pada tabel di blog , contoh 5 membuat tabel,
• Tabel dengan scroll dan header tetap, contoh 6 membuat tabel