Cara Design Table dengan CSS


Cara Design Table dengan CSS

Cara Design Table dengan CSS – Setalah mempelajari tutorial belajar HTML dasar. tentang cara membuat tabel di HTML di malasngoding.com, baca belajar html membuat tabel dengan html. pasti banyak di antara kita merasa tampilan dari tabel standar html tampilannya masih sangat kurang menarik. karena tampilan tabel standar dari HTML sendiri memiliki tampilan yang biasa saja. oleh karena itu Pada tutorial belajar CSS Design Tabel dengan CSS ini akan di jelaskan tentang bagaimana cara design sebuah tabel HTML dengan menggunakan CSS.

Cara Design Table dengan CSS

Di tutorial ini saya akan menjelaskan cara men-design table step by step. pertama kita buat kerangka table nya dulu.

dan tampilan nya masih standar dan biasa saja.

Cara design table dengan css

Cara design table dengan css

Seperti yang tampak pada gambar di atas. tampilan dari table kita masih sangat standar. sekarang kita akan langsung memulai mendesign table nya. buat sebuah file css dan langsung hubungkan dengan file html nya. baca tutorial sebelumnya tentang belajar html menghubungkan html dan css.

index.html

style.css

contoh di atas adalah membuat design table sederhana.hasilnya.

membuat design table sederhana dengan css

membuat design table sederhana dengan css

perhatikan pada gambar di atas. table kita sudah agak kelihatan lebih bersih. hehe. saya jelaskan sedikit penggunaan css nya.

pada element table kita menentukan font yang ingin kita gunakan. karena kita akan mengganti font nya. agar lebih terlihat menarik. cara mengganti font sudah saya jelaskan pada tutorial sebelumnya. silahkan teman-teman baca tutorial cara mengganti font dengan css. dan menetapkan warna font nya denga warna #232323. dan yang paling penting adalah border-collapse:collapse. ini berfungsi untuk membuat garis pada tabel menjadi sebaris.

kemudian lagi pada element table head dan table body nya kita tentukan warna table nya dengan kode warna #999. dan memberikan padding atas bawah sebesar 8px. dan kiri kanan 20px.

Contoh source code design table lainnya

index.html

style.css

Cara design table dengan css

Cara design table dengan css

Sekian dulu tutorial Cara Design Table dengan CSS. semoga bermanfaat.

Baca juga :

Incoming search terms:

  • membuat tabel dengan css
  • style pada tabel
  • cara membuat tabel di css
  • mengatur tabel dengan css
  • cara membuat tabel css
  • tabel dengan css
  • membuat tabel dengan css dan php
  • cara membuat tabel pada css
  • css untuk tabel
  • css pada tabel




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • 3 Comments

Write a Comment

Your email address will not be published. Required fields are marked *