setelah sebelumnya saya memposting bagaimana membuat tabel berwana secara selang seling menggunakan css di url artikel http://gapurapangarti.blogspot.com/2011/11/mewarnai-tabel-secara-selang-seling.html nah sekarang saya akan mencoba berbagi kembali, sebuah trik yang baru saya dapatkan mengenai membuat tabel dengan CSS3, sebelumnya data database yang ditampilkan adalah database yang sama seperti di url artikel diatas, disini hanya bagaimana cara menampilkan data berbentuk dengan CSS3, screenshotnya seperti di bawah ini,
*double klik untuk memperbesar gambar,
*double klik untuk memperbesar gambar,
berikut kode sederhana yang saya coba susun dengan beberapa penyesuaian, simpanlah dengan nama file belajar.php :
<style type="text/css">
table.table1{
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse:separate;
}
.table1 thead th{
padding:15px;
color:#fff;
text-shadow:1px 1px 1px #568F23;
border:1px solid #93CE37;
border-bottom:3px solid #9ED929;
background-color:#9DD929;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(123,192,67)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(158,217,41))
);
background: -moz-linear-gradient(
center bottom,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.table1 thead th:empty{
background:transparent;
border:none;
}
.table1 tbody td{
padding:10px;
text-align:center;
background-color:#DEF3CA;
border: 2px solid #E7EFE0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#666;
text-shadow:1px 1px 1px #fff;
}
</style>
<?php
echo "<body bgcolor='#E1F5A9'>";
echo"<center>";
echo "<table class='table1'><thead><tr><th scope='col' abbr='Nomor'>Nomor</th>
<th scope='col' abbr='NIM'>NIM</th><th scope='col' abbr='Nama'>Nama Mahasiswa</th>
<th scope='col' abbr='Email'>Email</th>
<th scope='col' abbr='Prodi'>Jurusan / Prodi</th></thead></tr>";
mysql_connect("localhost","root","");
mysql_select_db("dbelajar");
$tampil="SELECT * FROM mahasiswa";
$hasil=mysql_query($tampil);
$no=1;
while ($data=mysql_fetch_array($hasil)){
echo "<tbody><tr>
<td>$no</td>
<td>$data[NIM]</td>
<td>$data[nama]</td>
<td>$data[email]</td>
<td>$data[prodi]</td></tr></tbody>";
$no++;
}
echo "</table>";
echo "</center>";
echo "</body>";
?>
selamat mencoba dan berkreasi,
thank's to Mary Lou @http://tympanus.net for your article its my reference for this view,
Tidak ada komentar:
Posting Komentar