Tuesday, March 19, 2019

Percantik Tampilan Table dan Form Dengan CSS Agar Lebih Menarik


Kali ini kita membahas mengenai tutorial css yaitu mempercantik Tampilan tabel dengan css di html. Sebenarnya kita bisa mempercantik tabel dengan memberikan warna Table, border, dan attribute lainnya yang ada didalam tabel. Namun pasti akan lebih bagus Tampilan tabel yang di design dengan css agar kelihatan hidup dan tidak kaku ketika dilihat Sehingga Tabel Data atau Form Lebih Menarik dengan menggunakan CSS

Memperbaiki tabel dengan css dan Mempercantik Form Dengan Css atau Tampilan yang lainnya tentu akan membawa kita kedalam pembelajaran css secara tidak langsung, namun bagi kamu yang belum paham css tidak masalah, karena membuat tabel dengan css sebenarnya sangat mudah, tutorial bertebaran sana-sini.

Kamu harus tahu bahwa memberi warna tabel dengan css bisa, mengatur lebar tabel dengan css, kemudian mengatur margin tabel dengan css, memberi background tabel dengan css, mengatur padding tabel dengan css, mengatur posisi tabel dengan css dan masih banyak lagi yang bisa dilakukan dengan css untuk mempercantik tabel dan membuat tabel bagus dengan css

Seperti yang kita ketahui bahwa css identik dengan “STYLE” atau “Gaya” itu berarti dengan memberikan css ke sebuah tabel bisa memberikan gaya yang menarik mata pengguna untuk betah dan tidak bosa dalam melihat tabel atau form yang menggunakan css. 

Pada tutorial ini, kita akan mencoba mempercantik  tampilan  sebuah tabel dengan bantuan css yang langsung didalam html dimana tabel atau form berada, namun nanti bisa anda kembangkan dengan out-css atau css yang di kaitkan ke halaman yang anda inginkan.

Membuat Tampilan Tabel Data dan Form Tanpa CSS


<html>
<head>
 <title>Mempercantik Tampilan Tabel Dengan CSS</title>
</head>
<body>
<table>
 <tr>
  <th>No.</th>
  <th>Nama</th>
  <th>Detail</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
</table>
</body>
</html>

Diatas kita coba membuat tabel sebagai contohnya, dan belum ada tambahan css sama sekali sehingga tampilan tabelnya juga tidak bagus, seperti gambar berikut ini

Membuat tabel berwarna dengan css agar menarik dan bagus
Gambar Tabel Tanpa CSS (Warna, dll)

Bisa kamu perhatikan masih sangat polos ketika tabel tidak ada dimasukkan atau ditambahkan dengan styel yaitu css, mari kita buat tabel dengan css sebagai berikut.

Mewarnai Tabel Dengan CSS


<html>
<head>
 <title>Mempercantik Tampilan Tabel Dengan CSS</title>
 <style type="text/css">
  .anakit table{
   width: 300px;
   border-collapse: collapse;

  }
  .anakit th{
   background: #1CCBD4;
   color: #FFFFFF;
   padding: 10px;
   text-align: center;
   text-transform: uppercase;
   font-family: inherit;
  }
  .anakit td{
   border-bottom: 1px solid #eee;
   padding: 5px;
   text-align: center;
  }
 </style>
</head>
<body>
 <div class="anakit">
<table>
 <tr>
  <th>No.</th>
  <th>Nama</th>
  <th>Detail</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
</table>
</div>
</body>
</html>

Diatas kita menambahkan class “anakit” untuk membatasi tabel mana yang ingin menggunakan css tersebut adalah yang menggunakan class css yaitu “anakit”. Mari kita hasil dari mempercantik tampilan tabel dan berupa seperti form dengan css seperti gambar berikut ini.

Tabel Cantik Dengan css dan mewarnai tabel dengan css
Gambar Tabel di Warnai Dengan CSS


Diatas sebagai contoh awal dalam merubah warna tabel dengan css dan membuat tabel bagus dengan css tersebut, tidak monoton tampilannya, oia jika anda ingin menggunakan styel css untuk tabel atau form tersebut untuk mempercantik form dan tabel secara global biar semua tabel ngikut dengan css yang sudah dibuat, hilangkan saja div class “ anakit” dan pada css “.anakit” dihapus saja. Kalau bingung biar saya hapuskan saja deh.. hehehe.. jadi sebagai berikut


<html>
<head>
 <title>Mempercantik Tampilan Tabel Dengan CSS</title>
 <style type="text/css">
  table{
   width: 300px;
   border-collapse: collapse;

  }
  th{
   background: #1CCBD4;
   color: #FFFFFF;
   padding: 10px;
   text-align: center;
   text-transform: uppercase;
   font-family: inherit;
  }
  td{
   border-bottom: 1px solid #eee;
   padding: 5px;
   text-align: center;
  }
 </style>
</head>
<body>
<table>
 <tr>
  <th>No.</th>
  <th>Nama</th>
  <th>Detail</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Anakit</td>
  <td>Tabel Dengan Css</td>
 </tr>
</table>
</body>
</html>

Kita lanjutkan saja ya, anggap saja kita membuat css tersebut yang penggunaanya secara gelobal untuk semua tabel atau form tabel yang ingin dirubah tampilannya agar menarik dan bagus, biar kamu tidak bingung nantinya, oia jika kamu ingin membuat style.css file tersendiri juga bisa saja.

Baik pada css tersebut kita tambah agar barisnya memiliki warna yang bervariasi, namun warnanya cukup 2 warna namun berseling-seling. Sebagai contohnya sebagai berikut ini.

Membuat tampilan Form Tabel berwarna dengan CSS Agar Terlihat Menarik dan bagus
Gambar Mempercantik Warna dan Tampilan Tabel dengan CSS

Bisa anda perhatikan bahwa sudah ada perbedaan dengan yang sebelumnya, warna tabel dengan css yang saya berikan hanya sebagai contoh, anda bisa rubah dengan selera anda, code cssnya untuk merubah tampilan tabel dan form tersebut sebagai berikut 


 <style type="text/css">
  table{
   width: 300px;
   border-collapse: collapse;
   border-radius: 5px;

  }
  th{
   background: #008990;
   color: #FFFFFF;
   padding: 10px;
   text-align: center;
   text-transform: uppercase;
   font-family: inherit;
  }
  td{
   border-bottom: 1px solid #eee;
   padding: 5px;
   text-align: center;
  }
  tr:nth-child(even){
   background: #fff;
   border-radius: 5px;
  }
  tr:nth-child(odd){
   background: #1CCBD4;
  }
 </style>

Selanjutnya kita mempercantik tampilan form tabel data dengan css yaitu dengan “Hover” yang berguna ketika kursor mengarah kesitu (yang kita beri hover), maka kita bisa member efek pergantian warna pada tabel dengan atribute css "hover". Contohnya sebagai berikut ini.


 <style type="text/css">
  table{
   width: 300px;
   border-collapse: collapse;
   border-radius: 5px;

  }
  th{
   background: #008990;
   color: #FFFFFF;
   padding: 10px;
   text-align: center;
   text-transform: uppercase;
   font-family: inherit;
  }
  td{
   border-bottom: 1px solid #eee;
   padding: 5px;
   text-align: center;
   font-family: inherit;
   color: #1CBBC0;
  }
  tr:nth-child(even){
   background: #fff;
   border-radius: 5px;
  }
  tr:nth-child(odd){
   background: black;
  }
  tr:nth-child(odd):hover {
   background: #fff;
  }
 </style>

Maka hasil dari mempercantik tampilan tersebut adalah sebagai berikut ini

Membuat tabel menarik dengan warna css agar tampilan form cantik dan bagus
Gambar Tabel Berwarna dengan CSS dan Efect CSS 

Perhatikan yang nomor dua, bahwa pada dasarnya berwarna hitam sama seperti yang bernomor 4, namun ketika kursor mengarah ke nomor dua, maka akan berubah warnanya sesuai yang kita inginkan dari salah satu baris tabel.

Mungkin untuk saat ini cukup sekian yang bisa saya sampai dalam mempercantik tabel dengan css atau mempercantik tampilan sebuah form dengan css di html. Semoga artikel ini bisa membantu anda dalam memperbaiki tampilan tabel agar lebih bagus dengan css. Sehingga tampilan tabel yang dibuat tidak membosankan melainkan tabel yang menarik.

Apa Selanjutnya?
Setelah anda tau mewarnai tabel dengan css dan mewarnai sebuah Form Table dengan css, Perlu juga Tabel dibuat Responsif agar pada tampilan desktop rapi tetapi di tampilan mobile/smartphone/hp tidak berantakan. Untuk itu, perlu kita membuat Tabel Responsif Terhadap Semua Perangkat yang akan menampilkan tabel tersebut.

Buat Tabel Anda Responsive Dengan CSS Agar Tidak Berantakan


EmoticonEmoticon