Cara Membuat Table Sederhana dengan Pure CSS

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website.

Pada Kesempatan kali ini saya akan membahas tentang Cara Membuat Table Sederhana dengan Pure CSS. sebenarnya membuat table sederhana ini tidaklah susah, apalagi disini saya menggunakan Framework CSS yaitu Pure CSS jadi akan sangat-sangat mudah 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 juga bisa lihat dipembahasan saya yang sebelumnya di :

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

Oke untuk sekarang kita coba Cara Membuat Table Sederhana dengan Pure CSS. langkah pertama 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>Alamat</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>

Jika sudah, coba teman-teman perhatikan pada table ada class pure-table nah itulah sebuah class bawaan dari library framework pure css itu sendiri. Kalau dibilang Cuma beda nama saja dengan framework yang lainnya. Oke langkah selanjutnya 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">

Jika sudah seperti diatas, langkah selanjutnya teman-teman bisa simpan dan jalankan dibrowser yang teman-teman gunakan, jika benar maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Nah, bagaimana ? cukup mudah ya teman-teman. Dan teman-teman bisa lihat diwebsite resminya di https://purecss.io/ jika ingin mempelajari framework pure css lebih dalam lagi. Hehe

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Table Sederhana dengan Pure CSS. semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Cara Membuat Table Sederhana dengan Pure CSS

Kategori