Kamis, 10 Mei 2018

Cara Mudah Membuat Tabel Responsive di Artikel

Cara Mudah Membuat Tabel Responsive di Artikel

Cara Mudah Membuat Tabel Responsive di Artikel
Blog Mang Otep | Cara Mudah Membuat Tabel - Memasang Tabel Responsive di Artikel - Dalam blogging tentunya kebutuhan membuat tabel untuk menampilkan data yang berupa daftar di postingan sangatlah diperlukan, apalagi penggunaan tabel yang responsive akan membantu pengguna seluler dalam melihat isi tabel tersebut.

Data yang di muat pada tabel biasanya berupa data yang spesifik yang terstrukur rapih, seperti contohnya daftar harga handphone, daftar fitur template, dan masih banyak lagi. Dan jika data itu di tulis dengan manual akan berantakan maka saat itu diperlukan Tabel.

Untuk memenuhi kebutuhan itu mamang akan mencoba membagikan tutorial bagaimana Cara Mudah Membuat Tabel pada postingan atau artikel yang akan anda buat se-responsive mungkin sehingga pengguna seluler dapat melihat data itu dengan baik dan jelas. Simak langsung tutorialnya berikut ini :

Cara Mudah Membuat Tabel Responsive di Artikel :

1. Masuk ke blogger.com dan pilih menu Template >> Edit HTML
2. Copy kode CSS berikut ini tepat di atas kode ]]></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);
}
Setelah CSS di atas sudah di masukkan ke dalam Template anda, Sekarang ke cara penerapannya pada artikel. Perlu di ingat bahwa Tabel Class harus sesuai dengan CSS, jika tidak maka tabel responsive ini tidak akan bekerja.

3. Siapkan data yang akan kalian input ke dalam tabel.
4. Saat membuat artikel, copas kode 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>
5.  Pratinjau artikel anda, dan jika sudah pas dengan keinginan tinggal publish.


Demikianlah kira - kira Cara Mudah Membuat Tabel Responsive di Artikel dari Blog Mang Otep, semoga bermanfaat untuk anda. Jika menyukai artikel ini anda bisa share, and subscribe blog ini untuk mendapatkan artikel terbaru langsung dari email anda.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments