Membuat Table Menggunakan HTML5 Dan CSS3

26 Jun 2015 12:06 • Post By

Membuat sebuah table yang menarik sangatlah mudah, apalgi dengan hadirnya CSS3 yang mendukung gradiasi, radius, & lain-lain. Table ini sebelumnya sudah saya aplikasikan dalam pembuatan Jadwal Mata Kuliah Teknik Informatika. Anda bisa lihat contohnya dihalaman tadi. Jika tertarik, mari kita lanjutkan cara pembuatan tablenya.



Pertama-tama, buatkan file dengan nama table.html, lalu ketikkan kode dibawah ini.
<!DOCTYPE html>
<html lang="id">
<head>
<title>Table HTML5 & CSS3</title>
 
<style type="text/css">
table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;    
}
.zebra td, .zebra th {
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;    
}
 
.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
}
 
.zebra th {
    text-align: left;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
    border-bottom: 1px solid #ccc;
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
    background-image:    -moz-linear-gradient(top, #f5f5f5, #eee);
    background-image:     -ms-linear-gradient(top, #f5f5f5, #eee);
    background-image:      -o-linear-gradient(top, #f5f5f5, #eee); 
    background-image:         linear-gradient(top, #f5f5f5, #eee);
}
 
.zebra th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;  
}
 
.zebra th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
 
.zebra th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
 
.zebra tfoot td {
    border-bottom: 0;
    border-top: 1px solid #fff;
    background-color: #f1f1f1;  
}
 
.zebra tfoot td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
 
.zebra tfoot td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}
 
.zebra tfoot td:only-child{
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px
    border-radius: 0 0 6px 6px
}
</style>
</head>
<body>
<table class="zebra">
<thead>
<tr>
<th>No</th>
<th>Mata Kuliah</th>
<th>Jenis MK</th>
<th>SKS</th>
</tr>
</thead>
<tfoot>
<tr>
<td>&nbsp;</td>
<td>Jumlah SKS Yang Diambil</td>
<td>&nbsp;</td>
<td>23</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Logika Matematika</td>
<td>Teori</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Aljabar &#038; Linier Matematika</td>
<td>Teori</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Sistem Informasi</td>
<td>Teori</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>Bahasa Inggris III</td>
<td>Teori</td>
<td>2</td>
</tr>
<tr>
<td>5</td>
<td>Rangkaian Digital</td>
<td>Teori</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>Struktur Data</td>
<td>Teori</td>
<td>4</td>
</tr>
<tr>
<td>7</td>
<td>Pemrograman PHP</td>
<td>Praktek</td>
<td>4</td>
</tr>
<tr>
<td>8</td>
<td>Desain Web (Dreamweaver)</td>
<td>Praktek</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>

Jika anda ingin membuat sebuah table dengan beberapa fungsi PHP, anda bisa membuatnya dengan mengetikkan kode dibawah ini.
<!DOCTYPE html>
<html lang="id">
<head>
<title>Table Data Mahasiswa</title>
 
<style type="text/css">
table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;    
}
.zebra td, .zebra th {
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;    
}
 
.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
}
 
.zebra th {
    text-align: left;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
    border-bottom: 1px solid #ccc;
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
    background-image:    -moz-linear-gradient(top, #f5f5f5, #eee);
    background-image:     -ms-linear-gradient(top, #f5f5f5, #eee);
    background-image:      -o-linear-gradient(top, #f5f5f5, #eee); 
    background-image:         linear-gradient(top, #f5f5f5, #eee);
}
 
.zebra th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;  
}
 
.zebra th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
 
.zebra th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
 
.zebra tfoot td {
    border-bottom: 0;
    border-top: 1px solid #fff;
    background-color: #f1f1f1;  
}
 
.zebra tfoot td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
 
.zebra tfoot td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}
 
.zebra tfoot td:only-child{
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px
    border-radius: 0 0 6px 6px
}
</style>
</head>
<body>
 
<?php
//Index Numeric
$nama = array('Imam','Nunu','Zay');
//Index String
$jk = array('L' => 'Laki-Laki', 'P' => 'Perempuan');
//Multi Dimensi
$mhs = array('web' => array('Nurul Imam', 'Web'),
            'mm' => array('Nunu Nufus', 'Multimedia')
            );
?>
 
<table class="zebra">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Konsentrasi</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td><?php echo $mhs['web']['0'];?></td>
    <td><?php echo $jk['L'];?></td>
    <td><?php echo $mhs['web']['1'];?></td>
</tr>
<tr>
    <td>2</td>
    <td><?php echo $mhs['mm']['0'];?></td>
    <td><?php echo $jk['P'];?></td>
    <td><?php echo $mhs['mm']['1'];?></td>
</tr>
</tbody>
</table>
</body>
</html>

Jika sudah, simpan file dengan nama table.php. Kemudian anda buka file tersebut dengan mengaktifkan web server anda. Demikianlah tutorial sederhana membuat sebuah table yang menarik dengan menggunakan HTML5 & CSS3. Nantikan tips & trik HTML5 & CSS3 yang lainnya :)

Jangan lupa Subscribe ya !!

Membuat Table Menggunakan HTML5 Dan CSS3 | Tutorialku.Net | 4.5