Cara Membuat Tabel Kwitansi Keren dengan Kode HTML & CSS

0
1803

Pada tutorial kali ini, kita akan mempelajari bagaimana caranya membuat tabel kwitansi digital menggunakan tag <table> dari HTML, kemudian tampilan tabel tersebut akan kita poles menggunakan CSS agar menjadi lebih bagus dan menarik untuk dilihat.

Untuk dapat mengikuti tutorial ini, Anda harus :

  • Paham dasar penggunaan kode HTML, silahkan pelajari di sini
  • Paham dasar penggunaan kode CSS, silahkan pelajari di sini

Jika Anda sudah paham dasar-dasar menggunakan kode HTML & CSS, maka Anda dapat melanjutkan mempelajari tutorial ini, atau bisa menonton video tutorialnya pada video youtube ini.

Langkah 1 : Buat Tabel Kwitansi dari kode HTML

Pada Langkah pertama, kita bentuk dulu susunan kwitansi dengan menggunakan perintah table HTML berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>
<body>
    <table>
        <caption>Invoice</caption>
        <tr>
            <th>Item / Desc</th>
            <th>Qty.</th>
            <th>@</th>
            <th>Total Harga</th>
        </tr>
        <tr>
            <td>Kertas A4</td>
            <td>100</td>
            <td>35.000,00</td>
            <td>3.500.000,00</td>
        </tr>
        <tr>
            <td>Pulpen</td>
            <td>35</td>
            <td>5.000,00</td>
            <td>175.000,00</td>
        </tr>
        <tr>
            <td id="mapbertulang">Map Bertulang</td>
            <td>2</td>
            <td>50.000,00</td>
            <td>100.000,00</td>
        </tr>
        <tr>
            <th colspan="3">Subtotal</th>
            <td>3.775.000,00</td>
        </tr>
        <tr>
            <th colspan="2">Pajak</th>
            <td>10%</td>
            <td>377.500,00</td>
        </tr>
        <tr>
            <th colspan="3">Total</th>
            <td>4.152.500,00</td>
        </tr>
    </table>
     
</body>
</html>

Kode di atas murni menggunakan perintah table pada HTML dan belum dipoles dengan kode CSS, browser akan menampilkan hasil sebagai berikut :

Langkah 2 : Beri Garis Pembatas/Border pada Tabel

Agar lebih indah, kita akan menambahkan kode CSS untuk memoles tampilan tabel. Tahap awal, saya akan mengubah jenis font pada <body>, kemudian untuk kode <table>, <th> dan <td> saya akan membentuk border dengan nilai 1px, solid dan berwarna hitam.

Berikut kode CSSnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <style media="screen">
         
        body {
            font-family: 'Nunito', sans-serif;
        }
         
        table, th, td {
            border: 1px solid black;
        }
         
    </style>
</head>
<body>
     
     
    <table>
        <caption>Invoice</caption>
        <tr>
            <th>Item / Desc</th>
            <th>Qty.</th>
            <th>@</th>
            <th>Total Harga</th>
        </tr>
        <tr>
            <td>Kertas A4</td>
            <td>100</td>
            <td>35.000,00</td>
            <td>3.500.000,00</td>
        </tr>
        <tr>
            <td>Pulpen</td>
            <td>35</td>
            <td>5.000,00</td>
            <td>175.000,00</td>
        </tr>
        <tr>
            <td id="mapbertulang">Map Bertulang</td>
            <td>2</td>
            <td>50.000,00</td>
            <td>100.000,00</td>
        </tr>
        <tr>
            <th colspan="3">Subtotal</th>
            <td>3.775.000,00</td>
        </tr>
        <tr>
            <th colspan="2">Pajak</th>
            <td>10%</td>
            <td>377.500,00</td>
        </tr>
        <tr>
            <th colspan="3">Total</th>
            <td>4.152.500,00</td>
        </tr>
    </table>
     
</body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Langkah 3 : Ubah Border Agar Menjadi Garis Tipis

Kita akan mengubah bentuk border agar menjadi sebuah garis tipis menggunakan property border-collapse dengan nilai collapse, untuk batasnya kita gunakan property margin dengan nilai 120px dan auto agar posisi table berada di tengah browser.

Berikut kode CSSnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <style media="screen">
         
        body {
            font-family: 'Nunito', sans-serif;
        }
         
        table, th, td {
            border: 1px solid black;
        }
 
        table {
            border-collapse: collapse;
            margin: 120px auto;
        }
        
    </style>
</head>
<body>
     
     
    <table>
        <caption>Invoice</caption>
        <tr>
            <th>Item / Desc</th>
            <th>Qty.</th>
            <th>@</th>
            <th>Total Harga</th>
        </tr>
        <tr>
            <td>Kertas A4</td>
            <td>100</td>
            <td>35.000,00</td>
            <td>3.500.000,00</td>
        </tr>
        <tr>
            <td>Pulpen</td>
            <td>35</td>
            <td>5.000,00</td>
            <td>175.000,00</td>
        </tr>
        <tr>
            <td id="mapbertulang">Map Bertulang</td>
            <td>2</td>
            <td>50.000,00</td>
            <td>100.000,00</td>
        </tr>
        <tr>
            <th colspan="3">Subtotal</th>
            <td>3.775.000,00</td>
        </tr>
        <tr>
            <th colspan="2">Pajak</th>
            <td>10%</td>
            <td>377.500,00</td>
        </tr>
        <tr>
            <th colspan="3">Total</th>
            <td>4.152.500,00</td>
        </tr>
    </table>
     
</body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Langkah 4 : Beri Ruang Pada Sel

Jika Anda perhatikan, sel dalam tabel kwitansi masih sangat rapat. Untuk memberi ruang yang lebih lega terhadap sel pada setiap baris maka kita akan memberikan padding dengan nilai 6px dan 0 pada kode <th> dan <td>.

Berikut kode CSSnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <style media="screen">
         
        body {
            font-family: 'Nunito', sans-serif;
        }
         
        table, th, td {
            border: 1px solid black;
        }
 
        table {
            border-collapse: collapse;
            margin: 120px auto;
        }
         
        th, td {
            padding: 6px 0;
        }
         
    </style>
</head>
<body>
     
     
    <table>
        <caption>Invoice</caption>
        <tr>
            <th>Item / Desc</th>
            <th>Qty.</th>
            <th>@</th>
            <th>Total Harga</th>
        </tr>
        <tr>
            <td>Kertas A4</td>
            <td>100</td>
            <td>35.000,00</td>
            <td>3.500.000,00</td>
        </tr>
        <tr>
            <td>Pulpen</td>
            <td>35</td>
            <td>5.000,00</td>
            <td>175.000,00</td>
        </tr>
        <tr>
            <td id="mapbertulang">Map Bertulang</td>
            <td>2</td>
            <td>50.000,00</td>
            <td>100.000,00</td>
        </tr>
        <tr>
            <th colspan="3">Subtotal</th>
            <td>3.775.000,00</td>
        </tr>
        <tr>
            <th colspan="2">Pajak</th>
            <td>10%</td>
            <td>377.500,00</td>
        </tr>
        <tr>
            <th colspan="3">Total</th>
            <td>4.152.500,00</td>
        </tr>
    </table>
     
</body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Langkah 5 : Rapikan Tulisan Kwitansi

Kita akan menggeser judul pada kwitansi agar lebih rapi, menjadi rata kiri, dengan jarak tulisan border/padding-left adalah 4px, selanjutnya kita beri warna latar dengan property background-color.

Berikut kode CSSnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <style media="screen">
         
        body {
            font-family: 'Nunito', sans-serif;
        }
         
        table, th, td {
            border: 1px solid black;
        }
 
        table {
            border-collapse: collapse;
            margin: 120px auto;
        }
         
        th, td {
            padding: 6px 0;
        }
         
        th {
            text-align: left;
            padding-left: 4px;
            background-color: #F1F1F1;
        }
         
         
    </style>
</head>
<body>
     
     
    <table>
        <caption>Invoice</caption>
        <tr>
            <th>Item / Desc</th>
            <th>Qty.</th>
            <th>@</th>
            <th>Total Harga</th>
        </tr>
        <tr>
            <td>Kertas A4</td>
            <td>100</td>
            <td>35.000,00</td>
            <td>3.500.000,00</td>
        </tr>
        <tr>
            <td>Pulpen</td>
            <td>35</td>
            <td>5.000,00</td>
            <td>175.000,00</td>
        </tr>
        <tr>
            <td id="mapbertulang">Map Bertulang</td>
            <td>2</td>
            <td>50.000,00</td>
            <td>100.000,00</td>
        </tr>
        <tr>
            <th colspan="3">Subtotal</th>
            <td>3.775.000,00</td>
        </tr>
        <tr>
            <th colspan="2">Pajak</th>
            <td>10%</td>
            <td>377.500,00</td>
        </tr>
        <tr>
            <th colspan="3">Total</th>
            <td>4.152.500,00</td>
        </tr>
    </table>
     
</body>
</html>

Browser akan menampilkan hasil sebagai berikut.

Langkah 6 : Atur Jarak Data dalam Sel

Supaya lebih rapi, data di dalam kwitansi yang menggunakan tag <td> juga akan kita atur dengan memberi nilai padding-left dan padding-right.

Berikut kode CSSnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <style media="screen">
         
        body {
            font-family: 'Nunito', sans-serif;
        }
         
        table, th, td {
            border: 1px solid black;
        }
 
        table {
            border-collapse: collapse;
            margin: 120px auto;
        }
         
        th, td {
            padding: 6px 0;
        }
         
        th {
            text-align: left;
            padding-left: 4px;
            background-color: #F1F1F1;
        }
         
        td {
            padding-left: 4px;
            padding-right: 86px;
        }
  
    </style>
</head>
<body>
     
     
    <table>
        <caption>Invoice</caption>
        <tr>
            <th>Item / Desc</th>
            <th>Qty.</th>
            <th>@</th>
            <th>Total Harga</th>
        </tr>
        <tr>
            <td>Kertas A4</td>
            <td>100</td>
            <td>35.000,00</td>
            <td>3.500.000,00</td>
        </tr>
        <tr>
            <td>Pulpen</td>
            <td>35</td>
            <td>5.000,00</td>
            <td>175.000,00</td>
        </tr>
        <tr>
            <td id="mapbertulang">Map Bertulang</td>
            <td>2</td>
            <td>50.000,00</td>
            <td>100.000,00</td>
        </tr>
        <tr>
            <th colspan="3">Subtotal</th>
            <td>3.775.000,00</td>
        </tr>
        <tr>
            <th colspan="2">Pajak</th>
            <td>10%</td>
            <td>377.500,00</td>
        </tr>
        <tr>
            <th colspan="3">Total</th>
            <td>4.152.500,00</td>
        </tr>
    </table>
     
</body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Selesai….!!!!

Itu di acara membuat tabel kwitansi dengan menggunakan kode HTML dan CSS agar tampilan kwitansi menjadi lebih indah dan bagus untuk dilihat.

Anda bebas untuk berkreasi dengan kode HTML & CSS jika ingin mengubah atau menambahkan tampilan dari tabel kwitansi di atas.

Semoga tutorial ini membantu Anda untuk memahami bagaimana mengaplikasikan kode HTML & CSS dalam pemrograman web.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.