Dalam menulis artikel, tidak jarang kita menjumpai artikel yang di dalamnya memuat data-data yang tersaji pada sebuah tabel. Hal itu dilakukan dengan tujuan agar dapat memberikan informasi yang menarik dan memberi pemahaman kepada pembaca dengan lebih detail. Tabel yang digunakan dalam sebuah artikel biasanya dibuat dengan sederhana agar pembaca dapat memahami informasi data di dalamnya dengan mudah. Nah, ngomong-ngomong soal tabel, pada kesempatan kali ini saya akan memberikan tutorial mengenai cara memasang tabel responsive di artikel blog. Bagi kamu yang mungkin sedang memiliki keinginan untuk menyajikan data pada artikel blog dengan menggunakan tabel, tutorial berikut ini saya yakin akan dapat membantu kamu dalam mewujudkan keinginanmu tersebut (hehehe...). Oke, tanpa perlu basa-basi lagi, mari simak tutorialnya berikut ini.

Langkah pertama yang harus kamu lakukan adalah kamu buka terlebih dahulu "Edit HTML Template" blogmu. Kalau kamu sudah berada pada tampilan Edit HTML Template tersebut, kamu copy kode di bawah ini dan letakkan sebelum kode ]]></b:skin> atau </style>.
/* Table Post */
.post-body table {
    width: 100%;
    max-width: 100%;
    border-radius: 3px;
    overflow: hidden;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.post-body table th {
    background: #2196f3;
    color: #fff;
    border: 0;
    padding: 10px 15px;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
}
.post-body table tr th:hover{background:#1983d4}
.post-body td, .post-body th {
    vertical-align: top;
    t
    ext-align: left;
    font-size: 13px;
    padding: 3px 5px;
    border: 0;
}
.post-body table tr th:nth-of-type(2n) {
    border-left: 1px solid rgba(255,255,255,0.03);
}
.post-body table tr:nth-of-type(2n) td {
    background-color: #f6f8f9;
}
.post-body table td:first-child {
    border-right: 0;
}
.post-body table td, .post-body table caption {
    border: 0;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: 0px;
    padding: 10px 15px;
    text-align: left;
    vertical-align: top;
    color: #57606f;
    font-size: .9rem;
}
.post-body table tr td:nth-of-type(2n) {
    border-left: 1px solid rgba(0,0,0,0.03);
}
.post-body table tr:nth-of-type(2n+1) td {
    background-color: #ecf0f1;
}

Setelah itu, kamu klik tombol simpan.
Tutorial apa udah selesai, Min?
Belum, masih ada satu langkah lagi untuk dapat menampilkan tabel di artikel blog, yaitu dengan cara mengcopy kode di bawah ini dan meletakkannya di artikel blogmu. Kamu dapat meletakkanya dalam mode “Edit HTML” yang tersedia di fitur “Entri” blog.
<table><tbody>
<tr><th>Display Type</th><th>OLED</th></tr>
<tr class="even"><td>screen to body ratio calculated</td><td>80.93 %</td></tr>
<tr><td>screen size</td><td>5.8 inches (14.73 cm)</td></tr>
    <tr><td>screen resolution</td><td>1125 x 2436 pixels</td></tr>
    <tr><td>touch screen</td><td>Yes 3D Touch Touchscreen, Multi-touch</td></tr>
</tbody></table>

Jika sudah kamu lakukan langkah-langkah di atas, kamu baru dapat melihat hasilnya.

Oke, sekiranya itu tutorial singkat dari saya kali ini. Seperti biasa, kalau ada pertanyaan atau saran yang ingin kamu sampaikan kepada saya, kamu dapat menuliskannya di kolom komentar disqus yang terletak di bawah artikel ini. Semoga bermanfaat, ya! 😊

NgeShare - Memasang Tabel Responsive di Artikel Blog

Dalam menulis artikel, tidak jarang kita menjumpai artikel yang di dalamnya memuat data-data yang tersaji pada sebuah tabel. Hal itu dilakukan dengan tujuan agar dapat memberikan informasi yang menarik dan memberi pemahaman kepada pembaca dengan lebih detail. Tabel yang digunakan dalam sebuah artikel biasanya dibuat dengan sederhana agar pembaca dapat memahami informasi data di dalamnya dengan mudah. Nah, ngomong-ngomong soal tabel, pada kesempatan kali ini saya akan memberikan tutorial mengenai cara memasang tabel responsive di artikel blog. Bagi kamu yang mungkin sedang memiliki keinginan untuk menyajikan data pada artikel blog dengan menggunakan tabel, tutorial berikut ini saya yakin akan dapat membantu kamu dalam mewujudkan keinginanmu tersebut (hehehe...). Oke, tanpa perlu basa-basi lagi, mari simak tutorialnya berikut ini.

Langkah pertama yang harus kamu lakukan adalah kamu buka terlebih dahulu "Edit HTML Template" blogmu. Kalau kamu sudah berada pada tampilan Edit HTML Template tersebut, kamu copy kode di bawah ini dan letakkan sebelum kode ]]></b:skin> atau </style>.
/* Table Post */
.post-body table {
    width: 100%;
    max-width: 100%;
    border-radius: 3px;
    overflow: hidden;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.post-body table th {
    background: #2196f3;
    color: #fff;
    border: 0;
    padding: 10px 15px;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
}
.post-body table tr th:hover{background:#1983d4}
.post-body td, .post-body th {
    vertical-align: top;
    t
    ext-align: left;
    font-size: 13px;
    padding: 3px 5px;
    border: 0;
}
.post-body table tr th:nth-of-type(2n) {
    border-left: 1px solid rgba(255,255,255,0.03);
}
.post-body table tr:nth-of-type(2n) td {
    background-color: #f6f8f9;
}
.post-body table td:first-child {
    border-right: 0;
}
.post-body table td, .post-body table caption {
    border: 0;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: 0px;
    padding: 10px 15px;
    text-align: left;
    vertical-align: top;
    color: #57606f;
    font-size: .9rem;
}
.post-body table tr td:nth-of-type(2n) {
    border-left: 1px solid rgba(0,0,0,0.03);
}
.post-body table tr:nth-of-type(2n+1) td {
    background-color: #ecf0f1;
}

Setelah itu, kamu klik tombol simpan.
Tutorial apa udah selesai, Min?
Belum, masih ada satu langkah lagi untuk dapat menampilkan tabel di artikel blog, yaitu dengan cara mengcopy kode di bawah ini dan meletakkannya di artikel blogmu. Kamu dapat meletakkanya dalam mode “Edit HTML” yang tersedia di fitur “Entri” blog.
<table><tbody>
<tr><th>Display Type</th><th>OLED</th></tr>
<tr class="even"><td>screen to body ratio calculated</td><td>80.93 %</td></tr>
<tr><td>screen size</td><td>5.8 inches (14.73 cm)</td></tr>
    <tr><td>screen resolution</td><td>1125 x 2436 pixels</td></tr>
    <tr><td>touch screen</td><td>Yes 3D Touch Touchscreen, Multi-touch</td></tr>
</tbody></table>

Jika sudah kamu lakukan langkah-langkah di atas, kamu baru dapat melihat hasilnya.

Oke, sekiranya itu tutorial singkat dari saya kali ini. Seperti biasa, kalau ada pertanyaan atau saran yang ingin kamu sampaikan kepada saya, kamu dapat menuliskannya di kolom komentar disqus yang terletak di bawah artikel ini. Semoga bermanfaat, ya! 😊
Load comments

No comments