Assallamuallaiukum Wr Wb ,.
Halo kawan kawan , pada kesempatan kali ini saya akan melanjutkan dalam pembelejaran penggunaan bootstrap. Pada kali ini saya akan menggunakan Bootstrap untuk membuatu suatu tabel yang responsive.
Tabel adalah sebuah alat untuk menampilkan informasi dalam bentuk matriks.
ALAT & BAHAN :
- PC / Laptop
- Text Editor
- Browser
- FIle Bootstrap
Setelah itu ,kawan kawan dapat melihat di bawah ini adalah contoh coding pembuatan tabel yang saya buat :
<!DOCTYPE html>Setelah selseai membuat tabel, simpan file yang kawan buat tadi dalam bentuk HTML jika sudah silahkan jalan file html ke browser kawan kawan. Jika hasil seperti gambar di bawah , maka tidak ada eror :
<html>
<head>
<title>Belajar Bootstrap Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<h1><center><font color="blue">
Belajar Membuat Table dengan Bootstrap
</h1></font></center>
<table class="table table-bordered">
<thead>
<tr>
<th>Nama</th>
<th>Jurusan</th>
<th>Sekolah</th>
</tr>
</thead>
<tr>
<td>Muhammad Fajar Shodiq</td>
<td>Rekayasa Perangkat Lunak</td>
<td>SMK N 2 Karanganyar</td>
</tr>
<tr>
<td>Revo Alderi Agustriarso</td>
<td>Rekayasa Perangkat Lunak</td>
<td>SMK N 2 Karanganyar</td>
</tr>
<tr>
<td>Alif Sutoni</td>
<td>Rekayasa Perangkat Lunak</td>
<td>SMK N 2 Karanganyar</td>
</tr>
<tr>
<td>Fadila Junitaningsih</td>
<td>Rekayasa Perangkat Lunak</td>
<td>SMK N 2 Karanganyar</td>
</tr>
</table>
</body>
</html>
Setelah di run di browser , maka hasilya akan tampak seperti gambar di atas. Untuk mencoba ke responsive an dari tabel kawan dapat menekan (CTRL+SHIFT+M) untuk memperkecil ukuran tampilan web. Jika tampil seperti di bawah makan tabel responsive bekerja.
Kesimpulanya adalah pembuatan tabel yang responsive dengan bootstrap digunakan agar tabel terlihat fleksibel dan lebih mudah dalam pembuatan tabel pada website.
EmoticonEmoticon