Membuat Desain Tabel dengan Bootswatch

Kalo sebelum nya kita membuat Navbar dengan Bootswatch , nah kali ini kita akan belajar Membuat Desain Tabel dengan Bootswatch, oke langsung saja kita praktekan yah teman teman.. 😀

buka text editor kalian dan ketikan kode HTML di bawah ini dan beri nama dengan nama index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Navbar Bootswatch</title>
	<link rel="stylesheet" href="https://bootswatch.com/4/sketchy/bootstrap.min.css">
</head>
<body>
	<br> <br>
	<div class ="container">
		<div class="row">
			<div class="col-12">
				<h1 class="text-center text-info font-weight-bold "> Membuat Desain Tabel Dengan Bootswatch </h1>
				<br>
				<table class="table table-hover">
				  <thead>
				    <tr>
				      <th scope="col"> Type </th>
				      <th scope="col"> Column heading</th>
				      <th scope="col"> Column heading</th>
				      <th scope="col"> Column heading</th>
				    </tr>
				  </thead>
				  <tbody>
				    <tr class="table-active">
				      <th scope="row"> Active </th>
				      <td> Column content </td>
				      <td> Column content </td>
				      <td> Column content </td>
				    </tr>
				    <tr>
				      <th scope="row"> Default </th>
				      <td> Column content </td>
				      <td> Column content </td>
				      <td> Column content </td>
				    </tr>
				    <tr class="table-primary">
				      <th scope="row"> Primary </th>
				      <td> Column content </td>
				      <td> Column content </td>
				      <td> Column content </td>
				    </tr>
				    <tr class="table-secondary">
				      <th scope="row"> Secondary </th>
				      <td> Column content </td>
				      <td> Column content </td>
				      <td> Column content </td>
				    </tr>
				    <tr class="table-success">
				      <th scope="row">Success</th>
				      <td> Column content </td>
				      <td> Column content </td>
				      <td> Column content </td>
				    </tr>
				    <tr class="table-danger">
				      <th scope="row">Danger</th>
				      <td> Column content </td>
				      <td> Column content </td>
				      <td> Column content </td>
				    </tr>
				    <tr class="table-warning">
				      <th scope="row">Warning</th>
				      <td> Column content </td>
				      <td> Column content </td>
				      <td> Column content </td>
				    </tr>
				    <tr class="table-info">
				      <th scope="row">Info</th>
				      <td> Column content </td>
				      <td> Column content </td>
				      <td> Column content </td>
				    </tr>
				    <tr class="table-light">
				      <th scope="row">Light</th>
				      <td> Column content </td>
				      <td> Column content </td>
				      <td> Column content </td>
				    </tr>
				    <tr class="table-dark">
				      <th scope="row"> Dark </th>
				      <td> Column content </td>
				      <td> Column content </td>
				      <td> Column content </td>
				    </tr>
				  </tbody>
				</table>
			</div> 
		</div>
	</div>
	
</body>
</html>

hasil penampakan dari kode di atas adalah seperti gambar di bawah ini teman teman 😛

Sekian Tutorial Membuat Desain Tabel dengan Bootswatch, Semoga bermanfaat yah teman teman 😀