Cara Membuat Tabel HTML5 & CSS3 di Postingan Blog
Kali ini saya akan menjelaskan tutorial bagaimana caranya membuat tabel dengan HTML 5 dan CSS 3 di postingan Blogger / Blogspot.
Sebenarnya penggunaan tabel di artikel blog merupakan pilihan relatif, artinya harus sesuai kebutuhan si pemilik blog. Kalau dirasa penting, berarti harus dipasangkan.
Oh iya, hasil akhir dari tutorial ini, nantinya seperti ini:
Bagaimana? Cukup keren dan bagus, kan? Itu dikarenakan kita menggunakan HTML 5 dan CSS sehingga hasilnya memuaskan.
Login to Blogger > Postingan > Entri Baru
HTML yang diperlukan:
Jika diaplikasikan atau digabungkan, maka harus menggunakan tag <head> dan </head> untuk membungkus CSS.
Terakhir ada tag <html> dan </html> yang nantinya akan membungkus tag <body> dan </body>.
Perhatikan baik-baik cara penggunaan dan peletakkan tag-tag di atas. Kalian bisa mempelajarinya secara otodidak di postingan blog masing-masing.
Itulah tutorial bagaimana caranya membuat tabel dengan HTML 5 dan CSS 3 di postingan Blogger / Blogspot.
Sumber: https://jagowebdev.com/membuat-tabel-dengan-html-dan-css/#top
Sebenarnya penggunaan tabel di artikel blog merupakan pilihan relatif, artinya harus sesuai kebutuhan si pemilik blog. Kalau dirasa penting, berarti harus dipasangkan.
Oh iya, hasil akhir dari tutorial ini, nantinya seperti ini:
Bagaimana? Cukup keren dan bagus, kan? Itu dikarenakan kita menggunakan HTML 5 dan CSS sehingga hasilnya memuaskan.
Cara Membuat Tabel HTML5 & CSS3 di Postingan Blog
Login to Blogger > Postingan > Entri Baru
HTML yang diperlukan:
<body>
<table class="demo-table">
<caption class="title">Tabel 1. Data Penjualan Divisi Elektronik</caption>
<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 September 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>
</body>
CSS yang dibutuhkan:
<style type="text/css">
/* Table */
body {
font-family: "lucida Sans Unicode", "Lucida Grande", "Segoe UI", vardana
}
.demo-table {
border-collapse: collapse;
font-size: 13px;
}
.demo-table th,
.demo-table td {
padding: 7px 17px;
}
.demo-table .title {
caption-side: bottom;
margin-top: 12px;
}
.demo-table thead th:last-child,
.demo-table tfoot th:last-child,
.demo-table tbody td:last-child {
border: 0;
}
/* Table Header */
.demo-table thead th {
border-right: 1px solid #c7ecc7;
text-transform: uppercase;
}
/* Table Body */
.demo-table tbody td {
color: #353535;
border-right: 1px solid #c7ecc7;
}
.demo-table tbody tr:nth-child(odd) td {
background-color: #f4fff7;
}
.demo-table tbody tr:nth-child(even) td {
background-color: #dbffe5;
}
.demo-table tbody td:nth-child(4),
.demo-table tbody td:first-child,
.demo-table tbody td:last-child {
text-align: right;
}
.demo-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
transition: all .2s;
}
/* Table Footer */
.demo-table tfoot th {
border-right: 1px solid #c7ecc7;
}
.demo-table tfoot th:first-child {
text-align: right;
}
</style>Jika diaplikasikan atau digabungkan, maka harus menggunakan tag <head> dan </head> untuk membungkus CSS.
Terakhir ada tag <html> dan </html> yang nantinya akan membungkus tag <body> dan </body>.
<html>
<head>
/* Lokasi CSS Ada di Sini */
</head>
/* Lokasi HTML Ada di Sini */
</html>Perhatikan baik-baik cara penggunaan dan peletakkan tag-tag di atas. Kalian bisa mempelajarinya secara otodidak di postingan blog masing-masing.
Itulah tutorial bagaimana caranya membuat tabel dengan HTML 5 dan CSS 3 di postingan Blogger / Blogspot.
Sumber: https://jagowebdev.com/membuat-tabel-dengan-html-dan-css/#top
