Tabel merupakan ikhtisar sejumlah data informasi baik kata-kata ataupun bilangan yang tersusun dan berurut kebawah dalam lajur dan deret tertentu serta garis pembatas yang memisahkan setiap data informasi. Dalam HTML data tabel di susun dengan markup table.
Tag table sendiri seringkali dipergunakan untuk membuat sebuah susunnan data untuk ditampilkan dalam format .html. Nah, dalam penerpannya, kode table akan menjadi polos. Oleh karena itu kita memerlukan CSS3 untuk menghias table agar lebih menarik.
Membuat table yang menarik dengan CSS3.
Dalam sebuah blog artikel akan selalu ada artikel yang memerlukan sebuah tabel data. Jika kita hanya menuliskan kode tag HTML table, bisa dipastikan table yang tersusun kurang menarik karena tidak adanya warna yang menghidupkan.
Berikut ini adalah 4 source kode HTML dan CSS3 untuk membuat table lebih menarik dan bagus.
1. HTML dan CSS - TABEL 1
| No | Pembeli | Barang | Tanggal | Harga |
|---|---|---|---|---|
| 1 | Jeny | Handphone | 07 Juni 2025 | 2.500.000 |
| 2 | Lucy | AC | 10 Juli 2025 | 1.500.000 |
| 3 | Brian | Speaker | 11 Agustus 2025 | 950.000 |
| 4 | Lost | TV | 15 September 2025 | 1.750.000 |
| 5 | Entoma | Kipas angin | 11 Oktober 2025 | 450.000 |
| Total | 7.150.000 | |||
Berikut ini source kode tabel 1.
<!-- STYLE tabel 1 -->
<style>
/* TABEL 2 */
/* Table */
.demo-table1 {
border-collapse: collapse;
font-size: 14px;
min-width: 532px;
margin: auto;
}
.demo-table1 th,
.demo-table1 td {
padding: 7px 17px;
}
/* Table Header */
.demo-table1 thead th {
text-transform: uppercase;
border-bottom: 1px dashed #ff8100;
border-top: 1px dashed #ff8100;
color: #ff3939;
}
/* Table Body */
.demo-table1 tbody td {
color: #353535;
border-bottom: 1px dashed #CCCCCC;
}
.demo-table1 tbody td:nth-child(4),
.demo-table1 tbody td:first-child,
.demo-table1 tbody td:last-child {
text-align: right;
}
.demo-table1 tbody tr:last-child td {
border: 0;
}
.demo-table1 tbody tr:hover td {
background-color: #dfdf0e;
border-color: #ffff0f;
}
/* Table Footer */
.demo-table1 tfoot th {
border-top: 1px dashed #ff8100;
}
.demo-table1 tfoot th:first-child {
text-align: right;
}
</style>
<div class="table-wrapper">
<table class="demo-table1">
<thead>
<tr>
<th>No</th>
<th>Pembeli</th>
<th>Barang</th>
<th>Tanggal</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jeny</td>
<td>Handphone</td>
<td>07 Juni 2025</td>
<td>2.500.000</td>
</tr>
<tr>
<td>2</td>
<td>Lucy</td>
<td>AC</td>
<td>10 Juli 2025</td>
<td>1.500.000</td>
</tr>
<tr>
<td>3</td>
<td>Brian</td>
<td>Speaker</td>
<td>11 Agustus 2025</td>
<td>950.000</td>
</tr>
<tr>
<td>4</td>
<td>Lost</td>
<td>TV</td>
<td>15 September 2025</td>
<td>1.750.000</td>
</tr>
<tr>
<td>5</td>
<td>Entoma</td>
<td>Kipas angin</td>
<td>11 Oktober 2025</td>
<td>450.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">Total</th>
<th>7.150.000</th>
</tr>
</tfoot>
</table>
</div>
2. HTML dan CSS - TABEL 2
| No | Pembeli | Barang | Tanggal | Harga |
|---|---|---|---|---|
| 1 | Anton | Televisi | 07 Juni 2016 | 2.500.000 |
| 2 | Bryan | Mesin Cuci | 10 Juli 2016 | 1.500.000 |
| 3 | Cherly | Dispenser | 11 Agustus 2016 | 950.000 |
| 4 | Dean | Kulkas | 15 September 2016 | 1.750.000 |
| 5 | Esryl | Wall Fan | 11 Oktober 2016 | 450.000 |
| Total | 7.150.000 | |||
Berikut ini source kode tabel 2.
<!-- STYLE TABEL 2 -->
<style>
/* Table */
.demo-table2 {
border-collapse: collapse;
font-size: 14px;
min-width: 536px;
margin: auto;
}
.demo-table2 th,
.demo-table2 td {
padding: 7px 17px;
}
.demo-table2 thead th:last-child,
.demo-table2 tfoot th:last-child,
.demo-table2 tbody td:last-child {
border: 0;
}
/* Table Header */
.demo-table2 thead th {
border-right: 1px solid #c7ecc7;
text-transform: uppercase;
background-color: red;
color: #ffffff;
}
/* Table Body */
.demo-table2 tbody td {
color: #353535;
border-right: 1px solid #c7ecc7;
}
.demo-table2 tbody tr:nth-child(odd) td {
background-color: #f4fff7;
}
.demo-table2 tbody tr:nth-child(even) td {
background-color: #dbffe5;
}
.demo-table2 tbody td:nth-child(4),
.demo-table2 tbody td:first-child,
.demo-table2 tbody td:last-child {
text-align: right;
}
.demo-table2 tbody tr:hover td {
background-color: #dfdf0e;
border-color: #ffff0f;
}
/* Table Footer */
.demo-table2 tfoot th {
border-right: 1px solid #c7ecc7;
}
.demo-table2 tfoot th:first-child {
text-align: right;
}
</style>
<div class="table-wrapper">
<table class="demo-table2">
<thead>
<tr>
<th>No</th>
<th>Pembeli</th>
<th>Barang</th>
<th>Tanggal</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anton</td>
<td>Televisi</td>
<td>07 Juni 2016</td>
<td>2.500.000</td>
</tr>
<tr>
<td>2</td>
<td>Bryan</td>
<td>Mesin Cuci</td>
<td>10 Juli 2016</td>
<td>1.500.000</td>
</tr>
<tr>
<td>3</td>
<td>Cherly</td>
<td>Dispenser</td>
<td>11 Agustus 2016</td>
<td>950.000</td>
</tr>
<tr>
<td>4</td>
<td>Dean</td>
<td>Kulkas</td>
<td>15 September 2016</td>
<td>1.750.000</td>
</tr>
<tr>
<td>5</td>
<td>Esryl</td>
<td>Wall Fan</td>
<td>11 Oktober 2016</td>
<td>450.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">Total</th>
<th>7.150.000</th>
</tr>
</tfoot>
</table>
</div>
Baca : Cara membuat hover animasi CSS3 pure
3. HTML dan CSS - TABEL 3
| Develpment | IT & Software | Marketing | ||
|---|---|---|---|---|
| Web Development | IT Certification | Branding | ||
| Mobie Apps | Network & Security | Digital Marketing | ||
| Databases | Hardware | Advertising | ||
| Development Tools | Operating System | Public Relation | ||
| E-Commerce | Other | Affiliate Marketing |
Berikut ini source kode tabel 3.
<!-- STYLE TABEL 3 -->
<style>
/* Table */
.demo-table3 {
border-collapse: collapse;
font-size: 14px;
min-width: 570px;
margin: auto;
}
.demo-table3 th,
.demo-table3 td {
padding: 7px 25px;
text-align: center;
}
.demo-table3 .title {
margin-bottom: 12px;
}
/* Table Header */
.demo-table3 thead th {
text-transform: uppercase;
color: #fff;
font-weight: normal;
border-top: 2px solid #000;
border-bottom: 1px solid #000;
background-color: red;
}
.demo-table3 thead th.space {
padding:0;
width: 10px;
border: 0;
background: none;
}
/* Table Body */
.demo-table3 tbody td {
border-bottom: 1px solid #d9e5f9;
color: #484848;
background: #ecf3ff;
}
.demo-table3 tbody td.space {
border: 0;
padding: 0;
background: none;
}
.demo-table3 tbody td:not(.space):hover {
background-color: #dfdf0e;
border-color: #e4e4e4;
transition: all .2s;
}
</style>
<div class="table-wrapper">
<table class="demo-table3">
<thead>
<tr>
<th>Develpment</th>
<th class="space"></th>
<th>IT & Software</th>
<th class="space"></th>
<th>Marketing</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web Development</td>
<td class="space"></td>
<td>IT Certification</td>
<td class="space"></td>
<td>Branding</td>
</tr>
<tr>
<td>Mobie Apps</td>
<td class="space"></td>
<td>Network & Security</td>
<td class="space"></td>
<td>Digital Marketing</td>
</tr>
<tr>
<td>Databases</td>
<td class="space"></td>
<td>Hardware</td>
<td class="space"></td>
<td>Advertising</td>
</tr>
<tr>
<td>Development Tools</td>
<td class="space"></td>
<td>Operating System</td>
<td class="space"></td>
<td>Public Relation</td>
</tr>
<tr>
<td>E-Commerce</td>
<td class="space"></td>
<td>Other</td>
<td class="space"></td>
<td>Affiliate Marketing</td>
</tr>
</tbody>
</table>
</div>
4. HTML dan CSS - TABEL 4
| Bulan | Crome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|---|
| Agustus 2016 | 58.37 % | 13.92 % | 9.8 % | 9.61 % | 1.78 |
| Agustus 2015 | 52.82 % | 15.62 % | 15.99 % | 9.31 % | 1.81 |
| Agustus 2014 | 46.26 % | 17.5 % | 20.31 % | 10.81 % | 1.47 |
| Agustus 2013 | 42.78 % | 19.25 % | 25.55 % | 8.57 % | 1.16 % |
| Agustus 2012 | 33.59 % | 22.85 % | 32.85 % | 7.39 % | 1.63 % |
Berikut ini source kode tabel 4.
<!-- STYLE TABEL 4 -->
<style>
/* Table */
.demo-table4 {
border-collapse: collapse;
font-size: 14px;
min-width: 570px;
margin: auto;
}
.demo-table4 th,
.demo-table4 td {
padding: 7px 17px;
text-align: center;
}
.demo-table4 .title {
margin-bottom: 12px;
}
/* Table Header */
.demo-table4 thead th {
text-transform: uppercase;
color: #fff;
font-weight: normal;
border-right: 1px solid #f0f;
background-color: red;
}
.demo-table4 thead th:first-child {
text-align: left;
border-left: 1px solid #e4e4e4;
}
/* Table Body */
.demo-table4 tbody th {
text-align: left;
font-weight: normal;
background-color: #f5f5f5;
border-right: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
color: #484848;
}
.demo-table4 tbody td:nth-child(2) {
background-color: #b6ffb5;
border-right: 1px solid #94efc1;
}
.demo-table4 tbody td:nth-child(3) {
background-color: #d3efff;
border-right: 1px solid #b1cef9;
}
.demo-table4 tbody td:nth-child(4) {
background-color: #ffefd3;
border-right: 1px solid #f3e1c3;
}
.demo-table4 tbody td:nth-child(5) {
background-color: #fcffc9;
border-right: 1px solid #f8ff7c;
}
.demo-table4 tbody td:last-child {
background-color: #ffdcdc;
border-right: 1px solid #f9c4c4;
}
.demo-table4 tbody tr:hover td {
background-color: #dfdf0e;
border-color: #e4e4e4;
}
</style>
<div class="table-wrapper">
<table class="demo-table4">
<thead>
<tr>
<th>Bulan</th>
<th>Crome</th>
<th>Firefox</th>
<th>IE</th>
<th>Safari</th>
<th>Opera</th>
</tr>
</thead>
<tbody>
<tr>
<th>Agustus 2016</th>
<td>58.37 %</td>
<td>13.92 %</td>
<td>9.8 %</td>
<td>9.61 %</td>
<td>1.78</td>
</tr>
<tr>
<th>Agustus 2015</th>
<td>52.82 %</td>
<td>15.62 %</td>
<td>15.99 %</td>
<td>9.31 %</td>
<td>1.81</td>
</tr>
<tr>
<th>Agustus 2014</th>
<td>46.26 %</td>
<td>17.5 %</td>
<td>20.31 %</td>
<td>10.81 %</td>
<td>1.47</td>
</tr>
<tr>
<th>Agustus 2013</th>
<td>42.78 %</td>
<td>19.25 %</td>
<td>25.55 %</td>
<td>8.57 %</td>
<td>1.16 %</td>
</tr>
<tr>
<th>Agustus 2012</th>
<td>33.59 %</td>
<td>22.85 %</td>
<td>32.85 %</td>
<td>7.39 %</td>
<td>1.63 %</td>
</tr>
</tbody>
</table>
</div>
Baca : Membuat button keren hanya dengan CSS3
Penutup.
Nah, itulah dia 4 style tabel HTML CSS yang keren untuk blog. Silahkan dicoba, sekian dari saya.