Data yang di muat pada tabel biasanya berupa data yang spesifik yang terstrukur rapih, ibarat misalnya daftar harga handphone, daftar fitur template, dan masih banyak lagi. Dan jikalau data itu di tulis dengan manual akan awut-awutan maka dikala itu diharapkan Tabel.
Untuk memenuhi kebutuhan itu mamang akan mencoba membagikan tutorial bagaimana Cara Praktis Membuat Tabel pada postingan atau artikel yang akan anda buat se-responsive mungkin sehingga pengguna seluler sanggup melihat data itu dengan baik dan jelas. Simak eksklusif tutorialnya berikut ini :
Cara Praktis Membuat Tabel Responsive di Artikel :
1. Masuk ke blogger.com dan pilih hidangan Template >> Edit HTML
2. Copy instruksi CSS berikut ini sempurna di atas instruksi ]]></b:skin> ATAU </style>
body { font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui"; } /* Table By Mangotep.com */ table { margin: auto; font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui"; font-size: 12px; } .demo-table { border-collapse: collapse; font-size: 13px; } .demo-table th, .demo-table td { border-bottom: 1px solid #e1edff; border-left: 1px solid #e1edff; padding: 7px 17px; } .demo-table th, .demo-table td:last-child { border-right: 1px solid #e1edff; } .demo-table td:first-child { border-top: 1px solid #e1edff; } .demo-table td:last-child{ border-bottom: 0; } caption { caption-side: top; margin-bottom: 10px; } /* Table Header By Mangotep.com */ .demo-table thead th { background-color: #dd3030; color: #FFFFFF; border-color: #e5a5a5 !important; text-transform: uppercase; } /* Table Body By Mangotep.com */ .demo-table tbody td { color: #353535; } .demo-table tbody tr:nth-child(odd) td { background-color: #f4fbff; } .demo-table tbody tr:hover th, .demo-table tbody tr:hover td { background-color: #ffffa2; border-color: #ffff0f; transition: all .2s; } @media screen and (max-width: 520px) { table.responsive { width: 100%; } thead { display: none; } td { display: block; text-align: right; border-right: 1px solid #e1edff; } td::before { float: left; text-transform: uppercase; font-weight: bold; content: attr(data-header); } 3. Siapkan data yang akan kalian input ke dalam tabel.
4. Saat menciptakan artikel, copas instruksi HTML di dibawah ini :
<table class="demo-table responsive" > <caption class="title">Tabel Daftar Pengguna Adsense</caption> <thead> <tr> <th scope="col">Nama</th> <th scope="col">Alamat</th> <th scope="col">Telp</th> <th scope="col">Email</th> </tr> </thead> <tbody> <tr> <td data-header="Nama" class="title">Anton</td> <td data-header="Alamat" >Jakarta</td> <td data-header="Telp" >08562136x</td> <td data-header="Email" >anton@email.com</td> </tr> <tr> <td data-header="Nama" class="title">Bryan</td> <td data-header="Alamat" >Surabaya</td> <td data-header="Telp" >08581234x</td> <td data-header="Email" >bryan@email.com</td> </tr> <tr> <td data-header="Nama" class="title">Cherly</td> <td data-header="Alamat" >Semarang</td> <td data-header="Telp" >08121234x</td> <td data-header="Email" >cherly@email.com</td> </tr> <tr> <td data-header="Nama" class="title">Dean</td> <td data-header="Alamat" >Makassar</td> <td data-header="Telp" >08111234x</td> <td data-header="Email" >dean@email.com</td> </tr> <tr> <td data-header="Nama" class="title">Esryl</td> <td data-header="Alamat" >Medan</td> <td data-header="Telp" >08131234x</td> <td data-header="Email" >esryl@email.com</td> </tr> </tbody> </table> Demikianlah kira - kira Cara Praktis Membuat Tabel Responsive di Artikel dari , biar bermanfaat untuk anda. Jika menyukai artikel ini anda sanggup share, and subscribe blog ini untuk mendapat artikel terbaru eksklusif dari email anda.
Sumber https://www.mangotep.com/
Click to see the code!