Assalammu'alaikum warahmatullahi wabarakatuh
Pada kesempatan kali ini, saya akan berbagi ilmu mengenai sript membuat tabel dengan menggunakan bootstrap.. Berikut adalah cara-caranya :
1. Class 'table'
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | Layanan Program</h1>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Usia</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Abi Rahman Prasetyo</td>
<td>21 Tahun</td>
</tr>
<tr>
<td>2</td>
<td>Ika Merina</td>
<td>23 Tahun</td>
</tr>
<tr>
<td>3</td>
<td>Sintia Lamusu</td>
<td>19 Tahun</td>
</tr>
<tr>
<td>4</td>
<td>Bambang Pamungkas</td>
<td>35 Tahun</td>
</tr>
<tr>
<td>5</td>
<td>Raisa Andriana</td>
<td>25 Tahun</td>
</tr>
</tbody>
</table>
</body>
</html>
Dan berikut adalah hasilnya :
2.Class 'table table-striped'
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | Layanan Program</h1>
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Usia</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Abi Rahman Prasetyo</td>
<td>21 Tahun</td>
</tr>
<tr>
<td>2</td>
<td>Ika Merina</td>
<td>23 Tahun</td>
</tr>
<tr>
<td>3</td>
<td>Sintia Lamusu</td>
<td>19 Tahun</td>
</tr>
<tr>
<td>4</td>
<td>Bambang Pamungkas</td>
<td>35 Tahun</td>
</tr>
<tr>
<td>5</td>
<td>Raisa Andriana</td>
<td>25 Tahun</td>
</tr>
</tbody>
</table>
</body>
</html>
Dan berikut hasilnya :
3. Class 'table table-bordered'
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <h1>Cara Membuat table dengan Bootstrap | Layanan Program</h1> <table class="table table-bordered">
<thead> <tr> <th>No</th> <th>Nama</th> <th>Usia</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Abi Rahman Prasetyo</td> <td>21 Tahun</td> </tr> <tr> <td>2</td> <td>Ika Merina</td> <td>23 Tahun</td> </tr> <tr> <td>3</td> <td>Sintia Lamusu</td> <td>19 Tahun</td> </tr> <tr> <td>4</td> <td>Bambang Pamungkas</td> <td>35 Tahun</td> </tr> <tr> <td>5</td> <td>Raisa Andriana</td> <td>25 Tahun</td> </tr> </tbody> </table> </body> </html>
Dan berikut hasilnya :
4. Class 'table table-bordered table-striped'
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | Layanan Program</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>
Dan berikut hasilnya:
Oke sekian jenis jenis class dalam bootstrap untuk membuat tabel dan sebenarnya masih banyak lagi namun yang sering digunakan adalah ini. oke sekian dan sukses untuk kita semua.
Wassalammu'alaikum Warahmatullahi Wabarakatuh
0 komentar:
Posting Komentar