.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

Membuat Desain Layout Table dengan Bootstrap

0 komentar


بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh


Kita lanjutkan bagian kedua dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap.

Kali ini coba kita pelajari Layout Table, yaitu Desain Tabel ala Bootstrap. Style dari tabel ini ada yang Borderless atau tanpa border, Memakai Border atau Bordered, dan Zebra atau Striped, berwarna selang-seling..

Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file table.html berikut ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->


    <!-- Fav and touch icons -->
      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
      <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
      <link rel="shortcut icon" href="assets/ico/favicon.png">
  </head>

  <body>

    <div class="container">

      <h2>Bootstrap starter template</h2>
      <p>Dokumen kosong dengan library Bootstrap siap digunakan.</p>
  <table class="table" style="width:600px;">
           <thead>
              <tr>
                <th>Label</th>
                <th>Layout width</th>
                <th>Column width</th>
                <th>Gutter width</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Large display</td>
                <td>1200px and up</td>
                <td>70px</td>
                <td>30px</td>
              </tr>
              <tr>
                <td>Default</td>
                <td>980px and up</td>
                <td>60px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>Large display</td>
                <td>1200px and up</td>
                <td>70px</td>
                <td>30px</td>
              </tr>
           </tbody>
        </table>
        <br>
        <table class="table table-bordered" style="width:700px;">
          <thead>
            <tr>
              <th>Label</th>
              <th>Layout width</th>
              <th>Column width</th>
              <th>Gutter width</th>
            </tr>
          </thead>
          <tbody>
          <tr>
              <td>Large display</td>
              <td>1200px and up</td>
              <td>70px</td>
              <td>30px</td>
            </tr>
            <tr>
              <td>Default</td>
              <td>980px and up</td>
              <td>60px</td>
              <td>20px</td>
            </tr>
            <tr>
              <td>Large display</td>
              <td>1200px and up</td>
              <td>70px</td>
              <td>30px</td>
            </tr>
          </tbody>
        </table>
        <br>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Label</th>
              <th>Layout width</th>
              <th>Column width</th>
              <th>Gutter width</th>
            </tr>
          </thead>
          <tbody>
          <tr>
              <td>Large display</td>
              <td>1200px and up</td>
              <td>70px</td>
              <td>30px</td>
            </tr>
            <tr>
              <td>Default</td>
              <td>980px and up</td>
              <td>60px</td>
              <td>20px</td>
            </tr>
            <tr>
              <td>Large display</td>
              <td>1200px and up</td>
              <td>70px</td>
              <td>30px</td>
            </tr>
          </tbody>
        </table>
  </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>

Hasilnya sebagai berikut :


Desain selengkapnya dapat didownload disini. Klik link ini, kemudian klik File-Download (Unduh)

Semoga berguna :)
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com


atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh


Artikel Membuat Desain Layout Table dengan Bootstrap, Diterbitkan oleh scodeaplikasi pada Senin, 15 April 2013. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Tawk.to