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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!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 🙂

aji kusuma has written 26 articles

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>