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
  • mengatur tabel dengan css
  • tag html membuat tabel menggunakan css
  • cara membuat tabel di css
  • style pada tabel
  • css untuk tabel
  • membuat tabel dengan css dan php
  • cara buat table dengan css
  • cara membuat tabel css
  • cara membuat tabel pada css




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 *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]