Cara Membuat Table Sederhana dengan Pure CSS

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasanya ya teman-teman, semoga masih diberikan medis dan kebahagiaan agar dapat kembali semangat pada mencari informasi atau ingin mengupgrade skill didunia blog.

Di Kesempatan kali ini saya akan membahas mengenai Cara Merancang Table Sederhana dengan Pure CSS. sesungguhnya membangun table sederhana ini tidaklah susah, apalagi disini saya menggunakan Framework CSS yaitu Pure CSS jadi akan sangat-sangat gampang sekali. Konsepnya sih hampir sama dengan framework css yang lainnya, Cuma disini saya ingin iseng aja mencoba dengan menggunakan framework pure css dan teman-teman pun dapat lihat dipembahasan saya yang sebelumnya di :

– https://www.kursuswebsite.org/cara-membuat-disable-button-dengan-pure-css/

Oke bagi kini kita coba Cara Merancang Table Sederhana dengan Pure CSS. langkah pertama-tama silahkan jalankan/run text-editor yang teman-teman gunakan kemudian ketiklah script table htmlnya seperti dibawah ini :

 <table class=pure-table>
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Tempat tinggal</th>
                <th>Tahun</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Murihat</td>
                <td>Jakarta</td>
                <td>2006</td>
            </tr>

            <tr>
                <td>2</td>
                <td>Rizal</td>
                <td>Bogor</td>
                <td>2008</td>
            </tr>
        </tbody>
    </table>

Kalau telah, coba teman-teman perhatikan di table ada class pure-table nah seperti itulah sebuah class bawaan dari library framework pure css itu sendiri. Kalau dibilang Cuma beda nama saja dengan framework yang lainnya. Oke langkah berikutnya teman-teman masukan link CDN dari pure css framework seperti dibawah ini :

<link rel=stylesheet href=https://unpkg.com/purecss@0.6.2/build/pure-min.css>

Kalau telah seperti diatas, langkah berikutnya teman-teman dapat simpan dan jalankan dibrowser yang teman-teman gunakan, apabila benar karenanya hasilnya akan terlihat seperti di gambar dibawah ini :

Nah, bagaimana ? lumayan gampang ya teman-teman. Dan teman-teman dapat lihat diwebsite resminya di https://purecss.io/ apabila ingin mempelajari framework pure css lebih pada lagi. Hehe

Oke kalau seperti itu lumayan sekianlah pembahasan kali ini mengenai Cara Merancang Table Sederhana dengan Pure CSS. semoga bermanfaat dan hingga bertemu dipembahasan berikutnya.

Terimakasih

Sumber https://kursuswebsite.org