- Beranda
- Komunitas
- Tech
- Programmer Forum
Membuat Tabel Keren web dengan CSS
TS
aplikasiphp
Membuat Tabel Keren web dengan CSS
agan-agan, new be mau share neh..
cara membuat table keren dengan CSS
Sumber : Tutorial Membuat Table Belang-Belang Cantik dengan CSS
Bertemu lagi dengan saya Admin AplikasiPHP.com setelah sekian lama tidak memposting artikel didalam web saya ini. Ini dikarenakan kesibukan saya sehingga waktu saya untuk menulis artikel lagi menjadi berkurang. Nah, kali ini kita akan membahas sebuah teknik untuk menampilkan table yang cantik didalam website kita.
Berbicara mengenai table dalam website, tentunya kita mengetahui bahwa HTML bisa membuat table dengan mudah. Namun yang menjadi permasalahannya adalah table tersebut tidaklah cantik dan enak untuk dilihat. Coba perhatikan gambar di bawah ini yang merupakah table yang dibentuk dengan menggunakan HTML biasa tanpa CSS.
Tabel HTML tanpa CSS
Nah dari gambar diatas kelihatan bahwa kode HTML biasa tidak mampu untuk mencetak Tabel yang cantik dan indah untuk dilihat. Nah kekurangan HTML ini bisa diatasi dengan memadukannya dengan kode style yaitu CSS. Cara memadukan kode CSS dengan HTML sangatlah mudah yaitu dengan cara memanggil langsung file CSS didalah kode HTML. Perhatikan kode di bawah ini :
<html>
<head>
<title>Aplikasi Tabel Zebra Cantik dengan CSS | AplikasiPHP.Com</title>
<link href="table.css" rel="stylesheet" type="text/css" />
</head>
Kode diatas akan memanggil file CSS yaitu Table.css, sehingga style yang sudah kita buat akan di masukkan kedalam table sehingga mempercantik tampilan table. Adapun kode CSS yang kita gunakan adalah seperti kode di bawah ini :
/* Tabel Properti */
#mytable {
padding: 0;
margin: 0;
}
#mytable td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #efefefe;
color: #0066ff;
padding: 2px;
}
#mytable td.genap {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #0066ff;
background: #eeee22;
padding: 2px;
}
#mytable td.alt {
background:#0099ff;
color: #fff;
border-top: 1px solid #ccc;
text-align: center;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
}
#mytable td.spec {
border-left: 1px solid #ccc;
border-top: 0;
background: #efefefe;
padding: 2px;
}
#mytable td.spec1 {
border-left: 1px solid #ccc;
border-top: 0;
background: #eeee22;
padding: 2px;
}
#mytable td.specalt {
background: #0099ff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
padding: 2px;
}
Sedangkan file tampilannya akan kita buat seperti kode dibawah ini :
<html>
<head>
<title>Aplikasi Tabel Zebra Cantik dengan CSS | AplikasiPHP.Com</title>
<link href="table.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table id=mytable cellspacing="0" width=48%>
<tr>
<td width="5px" class=specalt ><center>No</center></td>
<td width="100px" class=alt ><center>Sender</center></td>
<td width="100px" class=alt ><center>Received Time</center></td>
<td width="200px" class=alt ><center>Message</center></td>
</tr>
<tr>
<td width="5px" class=spec>1</td>
<td>08136141xxxx</td>
<td>21 Maret 2012</td>
<td>Ini contoh pesan aja</td>
</tr>\t
<tr>
<td width="5px" class=spec1>2</td>
<td class="genap">08136141xxxx</td>
<td class="genap">21 Maret 2012</td>
<td class="genap">Ini contoh pesan aja</td>
</tr>
<tr>
<td width="5px" class=spec>3</td>
<td>08136141xxxx</td>
<td>21 Maret 2012</td>
<td>Ini contoh pesan aja</td>
</tr>
</body>
</html>
Jika kode tersebut di jalankan, maka hasilnya akan terlihat seperti gambar di bawah ini :
Tabel HTML dengan CSS
Mudah bukan? Nah jika anda ingin memperoleh file tutorial lengkapnya klik Download File Tutorial Lengkap, dan anda langsung bisa mendownloadnya secara mudah dan gratis.
Sampai disini dulu artikel saya ini, mudah-mudahan bermanfaat bagi anda. Dan jika anda tidak keberatan, silahkan di share artikel ini ke teman-teman Facebook atan Twitter anda, mana tau ada teman lain yang memerlukan artikel ini. Untuk men-share-kan artikel ini cukup mudah, anda cukup komentari artikel ini dengan ID Facebook anda atau tekan Tombol Like atau SHARE facebook di bawah ini.
Sumber : Tutorial Membuat Table Belang-Belang Cantik dengan CSS
cara membuat table keren dengan CSS
Sumber : Tutorial Membuat Table Belang-Belang Cantik dengan CSS
Bertemu lagi dengan saya Admin AplikasiPHP.com setelah sekian lama tidak memposting artikel didalam web saya ini. Ini dikarenakan kesibukan saya sehingga waktu saya untuk menulis artikel lagi menjadi berkurang. Nah, kali ini kita akan membahas sebuah teknik untuk menampilkan table yang cantik didalam website kita.
Berbicara mengenai table dalam website, tentunya kita mengetahui bahwa HTML bisa membuat table dengan mudah. Namun yang menjadi permasalahannya adalah table tersebut tidaklah cantik dan enak untuk dilihat. Coba perhatikan gambar di bawah ini yang merupakah table yang dibentuk dengan menggunakan HTML biasa tanpa CSS.
Tabel HTML tanpa CSS
Nah dari gambar diatas kelihatan bahwa kode HTML biasa tidak mampu untuk mencetak Tabel yang cantik dan indah untuk dilihat. Nah kekurangan HTML ini bisa diatasi dengan memadukannya dengan kode style yaitu CSS. Cara memadukan kode CSS dengan HTML sangatlah mudah yaitu dengan cara memanggil langsung file CSS didalah kode HTML. Perhatikan kode di bawah ini :
<html>
<head>
<title>Aplikasi Tabel Zebra Cantik dengan CSS | AplikasiPHP.Com</title>
<link href="table.css" rel="stylesheet" type="text/css" />
</head>
Kode diatas akan memanggil file CSS yaitu Table.css, sehingga style yang sudah kita buat akan di masukkan kedalam table sehingga mempercantik tampilan table. Adapun kode CSS yang kita gunakan adalah seperti kode di bawah ini :
/* Tabel Properti */
#mytable {
padding: 0;
margin: 0;
}
#mytable td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #efefefe;
color: #0066ff;
padding: 2px;
}
#mytable td.genap {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #0066ff;
background: #eeee22;
padding: 2px;
}
#mytable td.alt {
background:#0099ff;
color: #fff;
border-top: 1px solid #ccc;
text-align: center;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
}
#mytable td.spec {
border-left: 1px solid #ccc;
border-top: 0;
background: #efefefe;
padding: 2px;
}
#mytable td.spec1 {
border-left: 1px solid #ccc;
border-top: 0;
background: #eeee22;
padding: 2px;
}
#mytable td.specalt {
background: #0099ff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
padding: 2px;
}
Sedangkan file tampilannya akan kita buat seperti kode dibawah ini :
<html>
<head>
<title>Aplikasi Tabel Zebra Cantik dengan CSS | AplikasiPHP.Com</title>
<link href="table.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table id=mytable cellspacing="0" width=48%>
<tr>
<td width="5px" class=specalt ><center>No</center></td>
<td width="100px" class=alt ><center>Sender</center></td>
<td width="100px" class=alt ><center>Received Time</center></td>
<td width="200px" class=alt ><center>Message</center></td>
</tr>
<tr>
<td width="5px" class=spec>1</td>
<td>08136141xxxx</td>
<td>21 Maret 2012</td>
<td>Ini contoh pesan aja</td>
</tr>\t
<tr>
<td width="5px" class=spec1>2</td>
<td class="genap">08136141xxxx</td>
<td class="genap">21 Maret 2012</td>
<td class="genap">Ini contoh pesan aja</td>
</tr>
<tr>
<td width="5px" class=spec>3</td>
<td>08136141xxxx</td>
<td>21 Maret 2012</td>
<td>Ini contoh pesan aja</td>
</tr>
</body>
</html>
Jika kode tersebut di jalankan, maka hasilnya akan terlihat seperti gambar di bawah ini :
Tabel HTML dengan CSS
Mudah bukan? Nah jika anda ingin memperoleh file tutorial lengkapnya klik Download File Tutorial Lengkap, dan anda langsung bisa mendownloadnya secara mudah dan gratis.
Sampai disini dulu artikel saya ini, mudah-mudahan bermanfaat bagi anda. Dan jika anda tidak keberatan, silahkan di share artikel ini ke teman-teman Facebook atan Twitter anda, mana tau ada teman lain yang memerlukan artikel ini. Untuk men-share-kan artikel ini cukup mudah, anda cukup komentari artikel ini dengan ID Facebook anda atau tekan Tombol Like atau SHARE facebook di bawah ini.
Sumber : Tutorial Membuat Table Belang-Belang Cantik dengan CSS
0
6K
1
Komentar yang asik ya
Urutan
Terbaru
Terlama
Komentar yang asik ya
Komunitas Pilihan