Tingkatkan Tampilan Tabel di Halaman Blogmu Menjadi Menarik dan Responsive

Cakfadil    April 06, 2019    Blogger , Tips    Comment   

Kali ini Admin akan membagikan Cara Membuat Tampilan Table di Halaman Blog Kalian Menjadi Menarik.

Manfaat dari cara ini adalah sebagai berikut:
1. Tampilan menjadi menarik.
2. Tampilan table kalian menjadi responsive.
3. Tampilan halaman kalian menjadi rapi.
4. Terdapat inovasi warna yang membuat mata menjadi nyaman.
5. Tampilan menjadi nyaman dilihat.

Simak langkah berikut ini:
1. Login blogger kalian.
2. Masuk menu edit html pada template kalian.
3. copas (copy - paste) code di bawah ini tepat di atas code </head>.

<style>
#tbl {
  border-collapse: collapse;
  width: 100%;
}

#tbl td, #tbl th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tbl tr:nth-child(even){background-color: #f2f2f2;}

#tbl tr:hover {background-color: #ddd;}

#tbl th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #1E824C;
  color: white;
}
</style>

• tbl merupakan code pemanggil dari style atau css dari table.
• th merupakan code pemanggil dari style atau css dari judul table.
• td merupakan code pemanggil dari style atau css dari isi table.

Note: untuk ukuran, warna, dll silahkan untuk di kreasikan sesuai keinginan kalian.
4. Cara menampilkan code diatas, silahkan tinggal memanggilnya dengan class, seperti contoh code di bawah ini.

<table id="tbl">
  <tr>
    <th>Name</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Gary C. Harper</td>
    <td>573-461-2148</td>
    <td>United State</td>
  </tr>
  <tr>
    <td>Kimberly B. Thornton</td>
    <td>040 231 7605</td>
    <td>Finland</td>
  </tr>
  <tr>
    <td>Jeffrey H. Betancourt</td>
    <td>61-18-54-07</td>
    <td>Denmark</td>
  </tr>
  <tr>
    <td>Geraldine J. Washburn</td>
    <td>0492 30 82 49</td>
    <td>Belgium</td>
  </tr>
  <tr>
    <td>Paul G. Jones</td>
    <td>(62) 2415-4785</td>
    <td>Brazil</td>
  </tr>
  <tr>
    <td>David E. Ainsworth</td>
    <td>678 0694</td>
    <td>Estonia</td>
  </tr>
  <tr>
    <td>Łucja Sokołowska</td>
    <td>21 243 424 5000</td>
    <td>Portugal</td>
  </tr>
  <tr>
    <td>Gary C. Fox</td>
    <td>31 57 73</td>
    <td>Greenland</td>
  </tr>
  <tr>
    <td>Ragnheiður Gunnlaugsdóttir</td>
    <td>474 2017</td>
    <td>Iceland</td>
  </tr>
  <tr>
    <td>Caroline Mercier</td>
    <td>02.70.10.61.51</td>
    <td>France</td>
  </tr>
</table>

Note: code di atas harus di letakan di mode html ketika ingin mempostingan suatu artikel atau apapun yang ingin dipost di halaman blog maupun website kalian.
Demikian Meningkatkan Tampilan Tabel di Halaman Blogmu Menjadi Menarik dan Responsive. Semoga bermanfaat, semoga berhasil dan semoga tambah rejekinnya Amin.
Demo silahakn cek di bawah ini

Name	Contact	Country
Gary C. Harper	573-461-2148	United State
Kimberly B. Thornton	040 231 7605	Finland
Jeffrey H. Betancourt	61-18-54-07	Denmark
Geraldine J. Washburn	0492 30 82 49	Belgium
Paul G. Jones	(62) 2415-4785	Brazil
David E. Ainsworth	678 0694	Estonia
Łucja Sokołowska	21 243 424 5000	Portugal
Gary C. Fox	31 57 73	Greenland
Ragnheiður Gunnlaugsdóttir	474 2017	Iceland
Caroline Mercier	02.70.10.61.51	France

Pencarian Terkait:...

• Tingkatkan Tampilan Tabel di Halaman Blogmu Menjadi Menarik dan Responsive
• Membuat Tabel Responsive Dengan CSS
• Cara Membuat Tabel Responsive di Postingan Blog - Cara Manual
• Membuat Tabel Menjadi Menarik di HTML - seputarti.com
• Cara Membuat Blog yang Menarik, Keren dan Banyak Pengunjung ~ Nol...
• Eroni Artikel: Membuat Tabel HTML Responsive dengan CSS di Blog
• Cara Membuat Tabel Keren Responsive Seperti Jalan Tikus Di Blog
• Cara Membuat Tabel Responsive Dengan CSS dan HTML – Jurnal Web
• Cara Membuat Tabel di WordPress dengan TablePress - Niagahoster...

BACA SELENGKAPNYA