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;
}