Cara membuat tabel keren dengan HTML dan CSS

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. Lihat contoh lainnya, bagaimana cara membuat tabel dengan Bootstrap 4

#tutorial php
#tutorial javascript
#tutorial bootstrap
#tutorial html
#tutorial css

9 comments

  1. Terimakasih sudah mau kunjungi situs ini :)

    ReplyDelete
  2. wah, artikel anda sangat keren dan mudah untuk dipahami apalagi untuk saya yang baru belajar tentang Cara MembuatTabel di HTML. Terimakasih banyak ya smoga artikel ini juga sangat membantu teman yang laiinnya juga, terus berkarya lagi, ditunggu untuk artikel selanjutnya, Perkenalkan Saya Mutia Amirah Rahim Silanhkan Kunjungi Website Kampus Saya https: https://mahasiswa.atmaluhur.ac.id/

    ReplyDelete
  3. Artikel ini sangat bgus sekali, untuk mahasiswa pmula seperti saya dengan adanya artikel ini saya lebih mudah mempelajari HTML tabel dan pnerapan CSS trimksih telah membuat artikel ini. Perknalkan nama saya GITA LESTARI. kunjungi wabsite kmpus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  4. Terimakasih admin untuk artikelnya. Artikel ini sangat mudah dimengerti apalagi untuk saya yang masih pemula. Saya menjadi tau bagaimana cara membuat tabel dengan HTML dan CSS. Saya harap kedepannya Admin membuat artikel artikel lainnya tentang html. Oh ya, perkenalkan nama saya Sri Rezeki. Kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  5. Terimakasih min artikelnya , sangat membantu saya dalam mempelajari dan memahami cara membuat tabel di html. Sukses terus min .
    Perkenalkan nama saya Nia zulianti
    Kunjungi website kampus kami https://www.atmaluhur.ac.id/

    ReplyDelete
  6. perkenalkan nama saya reza pahlevi dari stmik atma luhur pangkalpinang. script atau coding tentang membuat tabel yang kakak berikan sangat bermanfaat dan mudah dipahami oleh pemula seperti saya. semoga blog kakak ini semakin maju kedepanya, terima kasih kak. oh iya kunjugi juga website kampus kami di https://www.atmaluhur.ac.id/

    ReplyDelete
  7. Terimakasih kak telah menjelaskan tentang html dengan css,scrip atau coding tentang pembuatan yang kakak jelaskan sangat bermanfaat khususnya untuk saya pemula dalam mempelajari HTML dengan css,semoga kkak selalu update untuk memberi wawasan luas bagi bagi orang banyak.
    Perkenalkan nama saya RINTO ZUMARIS AKBAR dan jangan lupa kunjungi web kampus saya
    https://www.atmaluhur.ac.id/

    ReplyDelete
  8. Terimakasih atas artikel yang anda buaat ini sangat bagus dan sangat membantu saya untuk belajar mudah di pahami dan mudah untuk di pelajari tetap membuat artikel yang bermanfaat untuk orang banyak terimakasih perkenalkan nama saya edo renaldi kls si2j nim 1922500004
    Websait kampus https://www.atmaluhur.ac.id/

    ReplyDelete
  9. Selamat siang kak, terimakasih sudah membuat blog ini. Karna ini sangat membantu saya dalam pembelajaran saya di kampus, dan juga tulisan kakak mudah dimengerti. Oh iya kak perkenalkan nama saya Tri Utami, Nim 1922500071 saya dari kelompok si2j , Semangat trus kak untuk membuat blog . Terus berkarya kak . Terimakasih . Web kampus : https//www.atmaluhur.ac.id

    ReplyDelete

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