Tuesday, January 12, 2016

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 Biologi PPKN Bahasa Indonesia Ketrampilan Komputer Geografi Ekonomi Sejarah Geologi
1 Nita 80 88 79 87 77 86 87 79 90 86 85 85
2 Alisa 90 75 79 87 77 78 87 79 90 86 88 85
3 Lois 82 75 79 87 77 88 87 79 90 86 88 85
4 Puspa 80 85 79 70 77 88 87 79 90 86 88 85


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: 150px;">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>
    <th>Sejarah</th>
    <th>Geologi</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>
    <td>85</td>
    <td>85</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>
    <td>88</td>
    <td>85</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>
    <td>88</td>
    <td>85</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>
    <td>88</td>
    <td>85</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 :

No comments:

Post a Comment