Mempercantik Tabel Dengan Css

Tanggal : 29 Dec 2018, Category : Belajar CSS, Create By : admin

<#\G I A/#>

Mempercantik Tabel Dengan Css

Gudang Ilmu Aplikasi

Selamat datang di gudang ilmu aplikasi, tabel dalam pembuatan aplikasi berbasis wesbite pasti akan sering sekali di gunakan untuk menampilkan data atau dalam membuat laporan, akan tetapi jika kita hanya membuat tabel tanpa di lengkapi dengan css maka hasil tampilkan tabel tersebut terkesan monoton atau kurang sedap di pandang, dengan kita mengguanakn bantuan bahasa pemprograman css maka tabel yang kita buat akan lebih cantik dan enak di pandang.

Sesuai dengan fungsi dari css adalah mempercantik tampilan dari bahasa pemprograman HTML, dari mulai warna, border dan lainnya, gudang ilmu aplikasi akan memberikan contoh script tabel beserta contoh cssnya, berikut contohnya.

Membuat Tabel HTML

<table border="1">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>AAAAA</td>
<td>Jl. AAAAA Raya</td>
</tr>
<tr>
<td>2.</td>
<td>BBBBB</td>
<td>Jl. BBBBB Raya</td>
</tr>
</table>

output :

Secara default pembuatan tabel html seperti contoh di atas, akan tetapi kita bisa mempercantik tabel tersebut, seperti dibawah ini

Mempercantik Tabel Dengan Css

<style>
table {
border-collapse: collapse;
}   table, th, td {
    border: 1px solid black;
  }
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>

<table border="1" style="">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>AAAAA</td>
<td>Jl. AAAAA Raya</td>
</tr>
<tr>
<td>2.</td>
<td>BBBBB</td>
<td>Jl. BBBBB Raya</td>
</tr>
</table>

Dengan menambahkan style css di atas tabel maka hasil output sebagai berikut

css di atas memberi efek memberi warna yang berbeda pada angka ganjil dan genap, disitu nomer urut 1 akan di beri background abu - abu dan nomer 2 background putih dan border solid.


Keyword:
  • Mempercantik Tabel Dengan Css
  • Membuat Tabel HTML
  • css tabel
  • tabel css

Artikel Lain

Menambah Repositori Centos 7

Date : 08 Oct 2018, Category : Server, Create By : admin

Repositori dalam Linux adalah kumpulan dari beberapa paket - paket sistem operasi linux yang di gunakan untuk  menunjang dan membantu kinerja dari sebuah aplikasi atau program yang telah di instal .....

Membuat Format Tanggal Indonesia Php

Date : 30 Aug 2018, Category : Tutorial, Create By : admin

Setalah materi sebelumya kita membahas mengenai membuat format tanggal dimana hanya menampilkan nama hari dan bulan berbahasa Inggris, kali ini kita akan merubah format hari dan bulan menjadi format indonesia. oke .....

Belajar Dan Mengenal Perulangan ( Looping ) For Di Php

Date : 27 Jul 2018, Category : Tutorial, Create By : admin

Selamat datang di website gudangilmuaplikasi.com, dalam belajar pemprograman apapun pasti seorang programmer akan menemukan dan menggunakan perulangan atau looping dalam membuat aplikasinya, entah perulangan untuk menampilkan data dari database maupun perulangan .....