Latest Article

Promotion Ads

Buat Website Murah

Featured Article

Popular Article

Membuat Table Menggunakan HTML5 & CSS3

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.

Table Dengan HTML5 & CSS3

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 :)

Created By :        Date : 9 - November - 2013

Jasa Pembuatan Website

30 Comments

  1. Intan SudibjoReply

    hahay.. keren pisan mas Ilham, mantap kalo dikasih CSS3 yah :)

    • Nurul ImamReply

      Weleeeeh kok ilham sih, Nurul Imam WOYYYY hehehehe :D

  2. Yos BedaReply

    buset kodenya panajang banget ya mas ternyata :)

    • Nurul ImamReply

      Dibikin pendek juga bisa mas :D

  3. Mizz AizaReply

    nampak mudah.. kelihatan panjang code nya..

    • Nurul ImamReply

      Lumayan panjang mbak kodenya :)

  4. Cara RirinReply

    Ternyata mudah sekali ya membuat tabel menggunakan css. Saya biasanya kalau mau buat tabel di microsoft word dulu, baru kemudian copas dech di posting blog, setelah baru dech di publish hehehe :D Lebih mudah mana? hehe ^^

    • Nurul ImamReply

      Klo saya malah ga bisa bikin table di MS Word :p

  5. Muhammad Adam HusseiReply

    Dasar pemograman yang mantap nih, kalau bikin website portal pasti kode ini saya pakai mas.

    Jangan lupa berkunjung balik ya?

    • Nurul ImamReply

      Web Portalnya banyak memakai table yah mas…

  6. DitterReply

    Kalau bikin tabel, saya biasanya bikin di MS. Excel atau MS Word dulu, hehe…. Soalnya nggak ngerti code-code gitu….

    • Nurul ImamReply

      Saya justru ga ngerti bikin table di MS Word apalagi Excel wkwkwk

  7. Jualtutorialku.comReply

    Bagus gan tutorialnya, kalau boleh buat juga tutorial membuat tabel dengan ajax atau js. Jadi ketika hedernya di klik otomatis shortby. Thanks

    • Nurul ImamReply

      sort by maksudnya ?
      Saya biasa pakai HTML, CSS, PHP & MySQL tanpa ajax dsb :D

      • Indra NstReply

        bener juga tu kata Jualtutorialku.com. Kalo bisa ditambahin tutorial membuat tabel dengan JQuery bg imam..

  8. Nedi ArwandiReply

    Siiip dah, memang masternya HTML nih…he.he.he

    • Nurul ImamReply

      Waduhhh, saya cuma copy paste doank mas :D

  9. aristuReply

    mas kalo mau buat background nya jadi gambar gimana mas?

  10. Bagas KuncoroReply

    Makasih tentang artikelnya mas,, dari awal sampe akhir saya selalu membaca,, dan sekarang alhamdulillah saya makin pusing :D

    • Nurul ImamReply

      Masa ? Baca judulnya doank kali :D

  11. eli ratna suminarReply

    bagus om website nya :)

    • Nurul ImamReply

      Makasih :)

  12. alfReply

    belajar HTML untuk pemula,
    dari bab perkenalan HTML sampai bab terakhir ini ane jd makin tertarik dan juga makin mumet pak :D
    tapi beneran keren tutornya pak

    • Nurul ImamReply

      Terimakasih sudah mau baca tulisan yang udah bikin pusing :D

  13. EfitaReply

    permisi mas mau tanya. Kan itu isi fieldnya mas langsung inpukan dari kodenya. Kalau seumpama saya ingin mengisi fieldnya dengan memanggil data dari sql dan bisa masuk ke tabel html dengan rapi gmana ya mas ? terimakasih mohon pencerahannya :)

    • Nurul ImamReply

      Tinggal disesuain hasil fetch dikombinasikan dengan tag HTML

  14. ijhoneszReply

    maaf mas,,saya belajar dari artikel pertama alhamdulillah semuanya faham.. tp untuk materi judul “menampilkan tulisan sebagaimana mestinya” dan “Membuat tabel menggunakan HTML5 & CSS sya kurang faham.. tolong pencerahannya..

  15. avReply

    makasih mas tutorialnya jadi pengen belajar. berapa lama yah sampe bisa kira-kira…hee

  16. RyanReply

    manatab banget tutorialnya…
    terimakaish

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>