Kembali saya membuat tulisan ini untuk mengingatkan saya nanti ketika membutuhkan sintak atau script. Maklum sering lupa karena saya tidak menghafalkan script. Selain itu juga berbagi juga buat rekan rekan yang sama dengan saya "sedang belajar" pemrograman web.
Berikut sintak untuk membuat tabel berwarna selang seling
<!DOCTYPE html>
<html lang="en">
<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.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Agenda Kegiatan</h3>
<table class="table">
<thead>
<tr>
<th>Kegiatan</th>
<th>Tanggal</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>Kegiatan 1</td>
<td>1 Januari 2017</td>
</tr>
<tr class="success">
<td>Kegiatan 2</td>
<td>2 Januari 2017</td>
</tr>
<tr class="danger">
<td>Kegiatan 3</td>
<td>3 Januari 2017</td>
</tr>
<tr class="info">
<td>Kegiatan 4</td>
<td>4 Januari 2017</td>
</tr>
<tr class="warning">
<td>Kegiatan 5</td>
<td>5 Januari 2017</td>
</tr>
<tr class="active">
<td>Kegiatan 6</td>
<td>6 Januari 2017</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<html lang="en">
<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.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Agenda Kegiatan</h3>
<table class="table">
<thead>
<tr>
<th>Kegiatan</th>
<th>Tanggal</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>Kegiatan 1</td>
<td>1 Januari 2017</td>
</tr>
<tr class="success">
<td>Kegiatan 2</td>
<td>2 Januari 2017</td>
</tr>
<tr class="danger">
<td>Kegiatan 3</td>
<td>3 Januari 2017</td>
</tr>
<tr class="info">
<td>Kegiatan 4</td>
<td>4 Januari 2017</td>
</tr>
<tr class="warning">
<td>Kegiatan 5</td>
<td>5 Januari 2017</td>
</tr>
<tr class="active">
<td>Kegiatan 6</td>
<td>6 Januari 2017</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Sekian saya membuat pengingat nya, jangan kapok ya, jika ada yang tidak jelas silahkan ditanyakan dikolom komentar dan terimakasih.
mohon maaf atas segala keterbatasan nya.
0 Comments