MASIGNASUKAv101
4922683097822459718

Cara membuat tabel keren dengan HTML dan CSS

Cara membuat tabel keren dengan HTML dan CSS
Add Comments
10/6/19
Hallo sobat-sobat sekalian, pada kesempatan kali ini kita akan belajar tentang bagaimana Cara membuat tabel keren dengan HTML dan CSS. Dalam membuat suatu website ada kalanay kita memerlukan tabel untuk menampilkan sebuah data yang banyak maupun sediki agar lebih rapih. Untuk membuat table kita bisa menggunakan HTML saja, namum jika kita ingin membuat sebuah tabel yang lebih menarik kita bisa menggunakan CSS sebagai makeupnya. nah oleh sebab itu pada kesempatan kali ini saya sudah membuat sebuah source code tabel yang menarik, silahkan teman-teman copy.

Sebelumnya itu ada baiknya saya menjelaskan sedikit dulu tentang Struktur dari sebuah tabel, meskipun saya yakin sudah banyak dari teman-teman yang sudah tau dari sebuh struktur dari sebuah tabel, perhatika contoh di bawah ini.
Kalo kita lihat pada gambar di atas ini ada 2 buah kolom dan 2 buah baris. Kotak pertama kita sebut dengan baris 1 dan kolom 1 kemudia kotak yang paling kanan bawah kita sebut dengan baris 2 kolom 2.

Lalu jika saya punya tabel seperti gambar di bawah ini, maka kotak-kotak yang horizontal kita sebut dengan baris sedangkan kota-kotak yang Vertikal kita sebut dengan kolom
Lalu jika saya punya
Lalu kalo perpotongan antara bari dan kolom biasa di sebut dengan (cell / data ) 1 buah cell atau atau nanti di html kita sebut dengan sebuah data. seperti contoh di bawha ini
Oke teman-teman jadi itulah struktur dari sebuah tabel sederhana. nah jika teman-teman sudah paham dengan struktur dari tabel. silahkan lihat kode html dan css di bawah ini. Teman-teman bisa mengambilnya lalu pakai sesuka hati kalian.

HTML

<table class="table-line">
    <tr>
        <th>No.</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Steve Jobs</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Jack Dorsey</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Mark Zuckerberg</td>
    </tr>
</table>

CSS

<style type="text/css">
    .table-line {
        width: 100%;
        border-collapse: collapse;
    }

    .table-line th {
        background: #850785;
        color: #FFFFFF;
        padding: 1em;
        text-align: left;
        text-transform: uppercase;
    }

    .table-line td {
        border-bottom: 1px solid #DDDDDD;
        color: #666666;
        padding: 1em;
    }
        </style>


Nah jadi itulah sedikit penjelsan tentang tabel, sudah di jelaskan juga sedikit tentang strukturnya. Semoga teman-teman bisa paham ya. Untuk lihat tampilan dari source kode yang saya bagikan di atas teman-teman bisa klik demo di atas untuk melihatnya. Sekian dari artikel saya ini semoga dapat bermanfaat bagi teman-teman yang membutuhkannya. Jangan lupa untuk share ya teman-teman, teman-teman juga bisa ikuti Situs ini jika kalian mau mendapatkan kiriman artikel gratis setiap kali kami posting artikel terbaru. Kalian bisa follow by email di Widget situs ini atau bisa juga langsung follow dengan klik icon +user di bagian kanan atas samping icon Loncing. Terimakasih.
OmJuan.com

Adalah Situs berbagi Source Code gratis dan Pembahasan seputar HTML, CSS, JavaScript, PHP, Bootstrap.

Terimakasih telah mengunjungi situs ini. Silahkan berkomentar dengan bijak.Komentar spam atau berisikan link aktif tidak akan di tampilkan. Terimakasih