Halaman Tabel

Sekarang saatnya membuat halaman Data Pegawai. Buka file tabel.html dan ketikkan kode berikut ke dalamnya.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>APG | Data Pegawai</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        Aplikasi Manajemen Pegawai
    </header>
    <div class="container">
        <aside>
            <ul class="menu">
                <li><a href="dashboard.html">Dashboard</a></li>
                <li><a href="tabel.html">Data Pegawai</a></li>
                <li><a href="tabel.html">Data Jabatan</a></li>
                <li><a href="login.html">Keluar</a></li>
            </ul>
        </aside>
        <section class="main">
            <h2 class="judul">Data Pegawai</h2>
            <a href="form.html" class="tombol">Tambah</a>
            <table class="table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Foto</th>
                        <th>Nama</th>
                        <th>Jenis Kelamin</th>
                        <th>Tanggal Lahir</th>
                        <th>Jabatan</th>
                        <th>Keterangan</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td><img src="images/user1.png" width="100"></td>
                        <td>Daffa Shidiqi</td>
                        <td>L</td>
                        <td>9 Juli 2015</td>
                        <td>Direktur</td>
                        <td>-</td>
                        <td>
                            <a class="tombol edit" href="#"> Edit </a>
                            <a class="tombol hapus" href="#"> Hapus </a>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td><img src="images/user2.png" width="100"></td>
                        <td>Dewi Siddiqi</td>
                        <td>L</td>
                        <td>9 Juli 2016</td>
                        <td>Customer Service</td>
                        <td>-</td>
                        <td>
                            <a class="tombol edit" href="#"> Edit </a>
                            <a class="tombol hapus" href="#"> Hapus </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
    <footer>
        Copyright &copy; <b>Masipnu</b> Official
    </footer>
</body>
</html>

Seperti sebelumnya, agar tampilannya terlihat lebih rapi, tambahkan kode berikut ke dalam file css/style.css

/* =================== */
/* Style Halaman Tabel */
/* =================== */

/* Mengatur desain judul halaman dengan boorder di bawah */
.judul{
    color: #555;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
}

/* Mengatur agar lebar tabel penuh dan antar border tidak memiliki jarak */
.table{
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

/* Menambahkan border dan padding pada sel tabel */
.table th, .table td{
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

/* Mengatur background bagian judul tabel */
.table th{
    background: #eee;
}

/* Mengatur desain tombol yang dibuat dengan tan <a> */
.tombol{
    display: inline-block;
    max-width: 150px;
    padding: 15px 30px;
    color: #fff;
    text-decoration: none;
    background: #038ade;
    cursor: pointer;
}

/* Desain tombol edit dan hapus agar lebih kecil */
.tombol.edit, .tombol.hapus{
    padding: 10px 15px;
    font-size: 12px;
}

.tombol.hapus{
    background: #fc4c4c;
}

Uji Coba

Oh iya, sebenarnya sebelumnya kita sudah menyiapkan folder images untuk menyimpan file foto profil dari masing-masing pegawai, silahkan cari foto yang sesuai dari internet, rekomendasi saya ambil saja dari randomuser.me, di sana tersedia banya foto yang tak terlalu besar ukurannya namun cukup dijadikan sebagai sample foto profil dan bebas kita gunakan. 😊
Sesuaikan atribut src="" pada tag <images> untuk masing-masing foto pegawai.
Simpan file tersebut dan coba akses via browser.