Sastracode

Blogger Net Triks
Macam-macam Tabel Blogger Responsive

Macam-macam Tabel Blogger Responsive

Sastracode | | Tidak ada komentar
Tabel Blogger Responsive, HTML, CSS, Responsive
Macam-macam Tabel Blogger Responsive - Banyak macam membuat tabel dengan CSS dan HTML tinggal bagaimana berkresi dengan HTML sebagai pemanggilnya dan di mana meletakanya dan kita juga bisa memanfaatkan sesuai keperluan kita.

Berikut adalah berbagai macam macam model table yang bisa di pasang di blogger dan anda juga bisa memodifikasi sendiri melalui CSS dan HTML.

Silahkan di perhatikan cara membuat tabel di postingan blog di bawah ini membuat table blogger.
Pasang CSS berikut ini di atas </style> atau ]]></b:skin> 
/* ------ CSS TABEL SASTRACODE ------ */
.table-sastracode-responsive{line-height:1.5em;overflow-x:auto;font-size:15px}
.table{width:100%;border-collapse:collapse;border-spacing:0}
.table td,.table th{;border:1px solid #999;color:#333;font-family:sans-serif;font-size:100%;padding:5px;vertical-align:top}
.table tr:nth-child(even) td{background-color:transparent}
.table th{background-color:#089;color:#FFF;font-size:110%;font-weight: 700;text-align: center;border: 1px solid goldenrod;} 
.table tr.even:hover td,.table tr:hover td{color:#FFFFFF;background-color:#daa520}
@media screen and (max-width:768px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:414px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:411px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:360px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:320px){.table-responsive{width:100%;font-size:11px;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}

Setelah pemasangan Css di atas tadi jangan lupa anda save template, kemudian anda kembali ke postingan atau di halaman terserah anda ingin menggunakan untuk membuat tabel apa.
Untuk pemanggilnya bermacam di bawah ini :

Contoh Tabel 1


<center><h1>Susunan Kepala Rw/Rt di RW 06 Tahun 2020 </h1></center>
<div class="table-sastracode-responsive">
<table class="table">
  <tr>
    <th>Nama</th>
    <th>Jabatan</th>
    <th>Masa Kerja</th>
  </tr>
  <tr>
    <td>Bpk. Didik Subondet</td>
    <td>Ketua RW 06</td>
    <td>2020 s/d 2024</td>
  </tr>
  <tr>
    <td>Bpk. Muali</td>
    <td>Ketua Rt 01</td>
    <td>2020 s/d 2024</td>
  </tr>
  <tr>
    <td>Bpk. Yudi</td>
    <td>Ketua Rt 02</td>
    <td>2020 s/d 2024</td>
  </tr>
  <tr>
    <td>Bpk. Pornomo</td>
    <td>Ketua Rt 03</td>
    <td>2020 s/d 2024</td>
  </tr>
  <tr>
    <td>Bpk. Yono</td>
    <td>Ketua Rt 04</td>
    <td>2020 s/d 2024</td>
  </tr>
  <tr>
    <td>Bpk. Saiful</td>
    <td>Ketua Rt 05</td>
    <td>2020 s/d 2024</td>
  </tr>
  <tr>
    <td>Bpk. Harianto</td>
    <td>Ketua Rt 06</td>
    <td>2020 s/d 2024</td>
  </tr>
</table>
</div>


DEMO

Susunan Kepala Rw/Rt di RW 06 Tahun 2020

Nama Jabatan Masa Kerja
Bpk. Didik Subondet Ketua RW 06 2020 s/d 2024
Bpk. Muali Ketua Rt 01 2020 s/d 2024
Bpk. Yudi Ketua Rt 02 2020 s/d 2024
Bpk. Pornomo Ketua Rt 03 2020 s/d 2024
Bpk. Yono Ketua Rt 04 2020 s/d 2024
Bpk. Saiful Ketua Rt 05 2020 s/d 2024
Bpk. Harianto Ketua Rt 06 2020 s/d 2024



Contoh Tabel 2



<center><h1>Warga Rt. 02 Rw 06</h1></center>
<div class="table-sastracode-responsive">
<table class="table">
<tr>
<th>Nama Depan</th>
<th>Status</th> 
<th>Usia</th>
</tr>
<tr>
<td>Wawan Setyaka</td>
<td>Kepala Ruamah Tangga</td>
<td>42 tahun</td>
</tr>
<tr>
<td>Ida Idul</td>
<td>Ibu Rumah Tangga</td>
<td>42 tahun</td>
</tr>
<tr>
<td>Arsy</td>
<td>Anak</td>
<td>21 tahun</td>
</tr>
<tr>
<td>Arsya</td>
<td>Anak</td>
<td>15 tahun</td>
</tr>
</table>
</div>


DEMO

Warga Rt. 02 Rw 06

Nama Depan Status Usia
Wawan Setyaka Kepala Ruamah Tangga 42 tahun
Ida Idul Ibu Rumah Tangga 42 tahun
Arsy Anak 21 tahun
Arsya Anak 15 tahun



Contoh Tabel 3



<center><h1>Jadwal Ronda dan Penarikan Omplongan Rt. 05 Rw 06</h1></center>
<div class="table-sastracode-responsive">
<table class="table">
<tr>
<th>Hari</th>
<th>Ketua</th>
<th>Kehadiran</th>
<th>Penyetor</th>
<th>Uang Masuk</th>
</tr>
</thead>
<tbody>
<tr>
<td>Senin</td>
<td>Oma</td>
<td>4 Orang</td>
<td>Bagus</td>
<td>45.000</td>
</tr>
<tr>
<td>Selasa</td>
<td>Samsul</td>
<td>5 Orang</td>
<td>Amirin</td>
<td>45.000</td>
</tr>
<tr>
<td>Rabu</td>
<td>Zainuri</td>
<td>5 Orang</td>
<td>Hakim</td>
<td>45.000</td>
</tr>
<tr>
<td>Kamis</td>
<td>Andrianto</td>
<td>4 Orang</td>
<td>Wakidi</td>
<td>45.000</td>
</tr>
<tr>
<td>Jumat</td>
<td>H. Barokah</td>
<td>5 Orang</td>
<td>Mundir</td>
<td>45.000</td>
</tr>
<tr>
<td>Sabtu</td>
<td>Sutarno</td>
<td>4. Orang</td>
<td>Mansur</td>
<td>45.000</td>
</tr>
<tr>
<td>Minggu</td>
<td>Mujahidin</td>
<td>5.Orang</td>
<td>Rofini</td>
<td>45.000</td>
</tr>
<tr>
<th colspan="4">Total Akhir Mingguan</th>
<th rowspan="1">Rp 315.000</th>
</tr>
</table>
</div>

HASILNYA


Jadwal Ronda dan Penarikan Omplongan Rt. 05 Rw 06

Hari Ketua Kehadiran Penyetor Uang Masuk

Senin
Oma
4 Orang
Bagus
45.000
Selasa
Samsul
5 Orang
Amirin
45.000
Rabu
Zainuri
5 Orang
Hakim
45.000
Kamis
Andrianto
4 Orang
Wakidi
45.000
Jumat
H. Barokah
5 Orang
Mundir
45.000
Sabtu
Sutarno
4. Orang
Mansur
45.000
Minggu
Mujahidin
5.Orang
Rofini
45.000
Total Akhir Mingguan
Rp 315.000


Contoh Tabel 4



<center><h1>Hasil Omplongan Selama Tahun 2020 Rt. 05 Rw 06</h1></center>
<div class="table-sastracode-responsive">
<table class="table">
<tr>
<th rowspan="2">Bulan</th>
<th colspan="4">Minggu</th>
<th rowspan="2">Jumlah</th>
</tr>
<tr>
<th>I</th>
<th>II</th>
<th>III</th>
<th>IV</th>
</tr>
<tr>
<td>Januari</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>Februari</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>Maret</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>April</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>Mei</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>Juni</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>Juli</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>Agustus</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>September</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>Oktober</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>November</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<td>Desember</td>
<td>Rp 300.000</td>
<td>Rp 295.000</td>
<td>Rp 325.000</td>
<td>Rp 315.000</td>
<td>Rp 1.235.000</td>
</tr>
<tr>
<th colspan="5">Total Akhir Tahun</th>
<th rowspan="1">Rp 14.820.000</th>
</tr>
</table>
</div>


DEMO

Hasil Omplongan Selama Tahun 2020 Rt. 05 Rw 06

Bln Minggu Jum
I II III IV
Jan 10.000 10.000 10.000 10.000 40.000
Feb 10.000 10.000 10.000 10.000 40.000
Mar 10.000 10.000 10.000 10.000 40.000
Apr 10.000 10.000 10.000 10.000 40.000
Mei 10.000 10.000 10.000 10.000 40.000
Jun 10.000 10.000 10.000 10.000 40.000
Jul 10.000 10.000 10.000 10.000 40.000
Agu 10.000 10.000 10.000 10.000 40.000
Sept 10.000 10.000 10.000 10.000 40.000
Okt 10.000 10.000 10.000 10.000 40.000
Nov 10.000 10.000 10.000 10.000 40.000
Des 10.000 10.000 10.000 10.000 40.000
Total Akhir Tahun 480.000



Sekian dahulu semoga membantu dan bermanfaat
Macam-macam Tabel Blogger Responsive
Item Reviewed: Macam-macam Tabel Blogger Responsive 9 out of 10 based on 10 ratings. 9 user reviews.

0 Post a Comment

Terimakasih kunjungan anda Sastracode

Komentar Terbaru

Just load it!