membuat daftar tabel siswa dan guru

Assalamualaikum wr.wb

Agung Ramadhan

kali ini saya akan memperlihatkan cara membuat 3 macam-macam tabel seperti di bawah ini :

1. TABEL DAFTAR GURU

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" type="text/css" href="font 9/css/all.min.css">

<link rel="stylesheet" type="text/css" href="style.cs"s>

<title>Hello, world!</title>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-warning">

<div class="container-fluid">

<a class="navbar-brand" href="#">SELAMAT DATANG ADMIN SMK HASAN KAFRAWI</a>

<form class="form-inline my-2 my-lg-0 ml-auto">

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

<div class="icon ml-4">

<h5>

<i class="fas fa-envelope mr-3" data-toggle="tooltip" title="Pesan Masuk"></i>

<i class="fas fa-bell mr-3" data-toggle="tooltip" title="Notifikasi"></i>

<i class="fas fa-sign-out-alt mr-3" data-toggle="tooltip" title="Sign Out"></i>

</h5>

</div>

</nav>

<div class="row no-gutters">

<div class="col-md-2 bg-dark pr-3 pt-3">

<ul class="nav flex-column ml-3 mb-5">

<li class="nav-item">

<a class="nav-link active" href="#"></a>

</li>

<li class="nav-item">

<a class="nav-link text-white" href="index.php"><i class="fas fa-tachometer-alt mr-2"></i>Dashboard</a><hr class="bg-secondary"></li>

</li>

<li class="nav-item">

<a class="nav-link text-white" href="siswa.php"><i class="fas fa-graduation-cap mr-2"></i>Daftar Siswa</a><hr class="bg-secondary"></li>

</li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-chalkboard-teacher mr-2"></i>Daftar Guru</a><hr class="bg-secondary"></li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-calendar-alt mr-2"></i>Jadwal Pelajaran</a><hr class="bg-secondary"></li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-paper-plane mr-2"></i>Daftar Nilai</a><hr class="bg-secondary">

</li>

</ul>

</div>

<div class="col-md-10 p-4 pt-2">

<h3><i class="fas fa-graduation-cap mr-2"></i>DAFTAR GURU</h3><hr>

<table class="table table-striped table-bordered">

<thead>

<a href="" class="btn btn-primary mb-2">Tambahkan Daftar Siswa</a>

<tr>

<th scope="col">No</th>

<th scope="col">NAMA GURU</th>

<th scope="col">ALAMAT</th>

<th scope="col">KODE GURU</th>

<th scope="col">TTL</th>

<th scope="col">NO TLP.</th>

<th colspan="3" scope="col">AKSI</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">1</th>

<td>Riza</td>

<td>yogyakarta</td>

<td>6</td>

<td>sleman,23 januari 2001</td>

<td>08776semua</td>

<td><a href="#" class="btn btn-primary">DETAIL</a></td>

<td><i class="fas fa-edit text-success"></i></td>

<td><i class="fas fa-trash-alt text-danger"></i></td>

</tr>

<tr>

<th scope="row">2</th>

<td>Satya</td>

<td>Jawa Timur</td>

<td>7</td>

<td>Malang,24 januari 2003</td>

<td>08856semua</td>

<td><a href="#" class="btn btn-primary">DETAIL</a></td>

<td><i class="fas fa-edit text-success"></i></td>

<td><i class="fas fa-trash-alt text-danger"></i></td>

</tr>

<tr>

<th scope="row">3</th>

<td>budi</td>

<td>NTT</td>

<td>6</td>

<td>Ilir-ilir,13 oktober 2004</td>

<td>08663semua</td>

<td><a href="#" class="btn btn-primary">DETAIL</a></td>

<td><i class="fas fa-edit text-success"></i></td>

<td><i class="fas fa-trash-alt text-danger"></i></td>

</tr>

</tbody>

</table>

<script type="text/javascript" src="admin.js"></script>

<!--

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

-->

</body>

</html>

Dari gambar di atas adalah cara membuat tabel daftar guru.

2. TABEL DAFTAR SISWA

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" type="text/css" href="font 9/css/all.min.css">

<link rel="stylesheet" type="text/css" href="style.cs"s>

<title>Hello, world!</title>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-warning">

<div class="container-fluid">

<a class="navbar-brand" href="#">SELAMAT DATANG ADMIN SMK HASAN KAFRAWI</a>

<form class="form-inline my-2 my-lg-0 ml-auto">

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

<div class="icon ml-4">

<h5>

<i class="fas fa-envelope mr-3" data-toggle="tooltip" title="Pesan Masuk"></i>

<i class="fas fa-bell mr-3" data-toggle="tooltip" title="Notifikasi"></i>

<i class="fas fa-sign-out-alt mr-3" data-toggle="tooltip" title="Sign Out"></i>

</h5>

</div>

</nav>

<div class="row no-gutters">

<div class="col-md-2 bg-dark pr-3 pt-3">

<ul class="nav flex-column ml-3 mb-5">

<li class="nav-item">

<a class="nav-link active" href="#"></a>

</li>

<li class="nav-item">

<a class="nav-link text-white" href="index.php"><i class="fas fa-tachometer-alt mr-2"></i>Dashboard</a><hr class="bg-secondary"></li>

</li>

<li class="nav-item">

<a class="nav-link text-white" href="siswa.php"><i class="fas fa-graduation-cap mr-2"></i>Daftar Siswa</a><hr class="bg-secondary"></li>

</li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-chalkboard-teacher mr-2"></i>Daftar Guru</a><hr class="bg-secondary"></li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-calendar-alt mr-2"></i>Jadwal Pelajaran</a><hr class="bg-secondary"></li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-paper-plane mr-2"></i>Daftar Nilai</a><hr class="bg-secondary">

</li>

</ul>

</div>

<div class="col-md-10 p-4 pt-2">

<h3><i class="fas fa-graduation-cap mr-2"></i>DAFTAR SISWA</h3><hr>

<table class="table table-striped table-bordered">

<thead>

<a href="" class="btn btn-primary mb-2">Tambahkan Daftar Siswa</a>

<tr>

<th scope="col">No</th>

<th scope="col">Nama Siswa</th>

<th scope="col">ALAMAT</th>

<th scope="col">NIS</th>

<th scope="col">TTL</th>

<th colspan="3" scope="col">AKSI</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">1</th>

<td>jarwo</td>

<td>korea selatan</td>

<td>54978645</td>

<td>Korea,23 januari 2001</td>

<td><a href="#" class="btn btn-primary">DETAIL</a></td>

<td><i class="fas fa-edit text-success"></i></td>

<td><i class="fas fa-trash-alt text-danger"></i></td>

</tr>

<tr>

<th scope="row">2</th>

<td>agung</td>

<td>Jawa Timur</td>

<td>78267890</td>

<td>Malang Raya,24 januari 2003</td>

<td><a href="#" class="btn btn-primary">DETAIL</a></td>

<td><i class="fas fa-edit text-success"></i></td>

<td><i class="fas fa-trash-alt text-danger"></i></td>

</tr>

<tr>

<th scope="row">3</th>

<td>andika</td>

<td>BALI</td>

<td>67684302</td>

<td>badung,13 oktober 2004</td>

<td><a href="#" class="btn btn-primary">DETAIL</a></td>

<td><i class="fas fa-edit text-success"></i></td>

<td><i class="fas fa-trash-alt text-danger"></i></td>

</tr>

</tbody>

</table>

<script type="text/javascript" src="admin.js"></script>

<!--

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

-->

</body>

</html>

Dari gambar di atas adalah cara membuat tabel daftar siswa.

3. TABEL DAFTAR HALAMAN

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" type="text/css" href="font 9/css/all.min.css">

<link rel="stylesheet" type="text/css" href="style.cs"s>

<title>Hello, world!</title>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-warning">

<div class="container-fluid">

<a class="navbar-brand" href="#">SELAMAT DATANG ADMIN SMK HASAN KAFRAWI</a>

<form class="form-inline my-2 my-lg-0 ml-auto">

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

<div class="icon ml-4">

<h5>

<i class="fas fa-envelope mr-3" data-toggle="tooltip" title="Pesan Masuk"></i>

<i class="fas fa-bell mr-3" data-toggle="tooltip" title="Notifikasi"></i>

<i class="fas fa-sign-out-alt mr-3" data-toggle="tooltip" title="Sign Out"></i>

</h5>

</div>

</nav>

<div class="row no-gutters">

<div class="col-md-2 bg-dark pr-3 pt-3">

<ul class="nav flex-column ml-3 mb-5">

<li class="nav-item">

<a class="nav-link active" href="#"></a>

</li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-tachometer-alt mr-2"></i>Dashboard</a><hr class="bg-secondary"></li>

</li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-graduation-cap mr-2"></i>Daftar Siswa</a><hr class="bg-secondary"></li>

</li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-chalkboard-teacher mr-2"></i>Daftar Guru</a><hr class="bg-secondary"></li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-calendar-alt mr-2"></i>Jadwal Pelajaran</a><hr class="bg-secondary"></li>

<li class="nav-item">

<a class="nav-link text-white" href="#"><i class="fas fa-paper-plane mr-2"></i>Daftar Nilai</a><hr class="bg-secondary">

</li>

</ul>

</div>

<div class="col-md-10 p-4 pt-2">

<h3><i class="fas fa-tachometer-alt mr-2"></i>DASHBOARD</h3><hr>

<div class="row text-white">

<div class="card bg-info ml-4" style="width: 18rem;">

<div class="card-body">

<div class="card-body-icon">

<i class="fas fa-graduation-cap mr-2"></i>

</div>

<h5 class="card-title">Jumlah Siswa</h5>

<div class="display-4">430</div>

<a href=""><p class="card-text text-white">Lihat Detail<i class="fas fa-angle-double-right"></i></p></a>

</div>

<div class="card bg-danger ml-3" style="width: 18rem;">

<div class="card-body">

<div class="card-body-icon">

<i class="fas fa-chalkboard-teacher mr-2"></i>

</div>

<h5 class="card-title">Jumlah Guru</h5>

<div class="display-4">25</div>

<a href=""><p class="card-text text-white">Lihat Detail<i class="fas fa-angle-double-right"></i></p></a>

</div>

<div class="card bg-success ml-4" style="width: 18rem;">

<div class="card-body">

<div class="card-body-icon">

<i class="fas fa-user-edit mr-2"></i>

</div>

<h5 class="card-title">Jumlah Pegawai</h5>

<div class="display-4">15</div>

<a href=""><p class="card-text text-white">Lihat Detail<i class="fas fa-angle-double-right"></i></p></a>

</div>

<div class="row mt-5 text-center">

<div class="card ml-4" style="width: 18rem;">

<div class="card-header">

<div class="display-4 text- pt-4 pb-4"><i class="fab fa-instagram"></i>

</div>

<div class="card-body">

<h5 class="card-title">INSTAGRAM</h5>

</div>

<a href="#" class="btn btn-danger">FOLLOW</a>

</div>

<div class="card ml-4" style="width: 18rem;">

<div class="card-header">

<div class="display-4 text-primary pt-4 pb-4"><i class="fab fa-facebook"></i>

</div>

<div class="card-body">

<h5 class="card-title">FACEBOOK</h5>

</div>

<a href="#" class="btn btn-primary">LIKE</a>

</div>

<div class="card ml-4" style="width: 18rem;">

<div class="card-header">

<div class="display-4 text-danger pt-4 pb-4"><i class="fab fa-youtube"></i>

</div>

<div class="card-body">

<h5 class="card-title">YOUTUBE</h5>

</div>

<a href="#" class="btn btn-danger">SUBSCRIBE</a>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script type="text/javascript" src="admin.js"></script>

<!--

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

-->

</body>

</html>

Dari gambar di atas adalah cara membuat daftar tabel halaman.

Cari Blog Ini

agung ramadhan

membuat daftar tabel siswa dan guru

Komentar

Posting Komentar