Harga Jual / Beli Bitcoin

Membuat Responsive Table Dengan CSS dan HTML

20:31:00 Wahab Saputra 16 Comments

Membuat Responsive Table Dengan CSS dan HTML - Seperti yang kita ketahui tabel adalah sebuah media yang digunakan untuk menyampaikan sebuah informasi dalam bentuk matrik. Elemen standar tabel dalam HTML ( <tabel></tabel> ). Sedangkan untuk memperindah tampilan tabel kita bisa menggunakan CSS dan Jscript. Lantas bagaimana cara membuat table responsive di semua jenis device atau screen...?. Berikut 5 jenis tabel yang bisa anda gunakan dalam posting blog atau web anda dan berukut merupakan cotoh penerapan pada blogspot :

Membuat Responsive Table Dengan CSS dan HTML


Step 1 > Login Blogger, Klik menu Template > Edit HTML
Step 2 > Copy kode di bawah ini, tepat diatas atau sebelum tag ]]></b:skin> atau </style>
  • Responsive Table With Angular.js Factory

body {
  margin: 1.5em;
}

h1 span img {
  width: 50px;
  height: 50px;
}

Step 4 > Setelah itu simpan kode Js di bawah ini tepat diatas atau sebelum tag </body>


<script>
//<![CDATA[
var myApp = angular.module("myApp", []);

myApp.factory("People",function(){
  var People = [
    {
      name: "Joe Watkins",
      position: "UX Developer",
      skills: "HTML CSS Javascript"
    },
    {
      name: "Jen Smithers",
      position: "Dev Ops",
      skills: "Alien Server Technology"
    },
    {
      name: "Paul Anderson",
      position: "Designer",
      skills: "UI & UX Design"
    },
    {
      name: "Samantha Barton",
      position: "Javascript Ninja",
      skills: "All things JS"
    }
  ];
  
  return People;
});

myApp.controller("peopleCtrl", function($scope,People){  
    $scope.people = People; 
});

// ]]>
</script>

Step 5 > Simpan Template

Step 6 > Untuk Penggunaanya silahkan Copy kode HTML di bawah ini di dalam posting pada mode HTML. Silahkan ganti entrinya sesuai kebutuhan...!!!

<div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Skills</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="person in people | orderBy:'name'">
          <td>{{person.name}}</td>
          <td>{{person.position}}</td>
          <td>{{person.skills}}</td>
        </tr>
      </tbody>
    </table>
  </div>

Untuk style lainnya silahkan lihat demonya dan ambil kodenya di codepen....

Style 1 View Demo Style 2 View Demo Style 3 View Demo Style 4 View Demo Style 5 View Demo


16 comments:

  1. "Kesalahan saat mengurai XML, baris 5149, kolom 316: The entity name must immediately follow the '&' in the entity reference" solusi bang?

    ReplyDelete
    Replies
    1. Untuk kode Js jangan lupa pakai beri pembungkus biar gak error...

      <script>
      //<![CDATA[
      var myApp = angular.module("myApp", []);

      myApp.factory("People",function(){
      var People = [
      {
      name: "Joe Watkins",
      position: "UX Developer",
      skills: "HTML CSS Javascript"
      },
      {
      name: "Jen Smithers",
      position: "Dev Ops",
      skills: "Alien Server Technology"
      },
      {
      name: "Paul Anderson",
      position: "Designer",
      skills: "UI & UX Design"
      },
      {
      name: "Samantha Barton",
      position: "Javascript Ninja",
      skills: "All things JS"
      }
      ];

      return People;
      });

      myApp.controller("peopleCtrl", function($scope,People){
      $scope.people = People;
      });

      // ]]>
      </script>


      Delete
  2. yang style 3 , scriptnya sama juga mas ?

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. mas sayakan udah coba pake style 4 , tapi saat saya temple di postingan kok ga sama seperti demonya ya ,, yang style 5 juga pas saya pasang ga sama seperti demonya ,, itu kenapa ya ?

    ReplyDelete
    Replies
    1. Periksa lagi CSS nya...
      Apa ada yang sama dengan CSS yang ada di Template...

      Delete
  5. terimakasih.. amat sangat membantu pembuatan tabel.. pemakaiannya langsung bisa tinggal edit di versi demo copy paste dan jadi..

    ReplyDelete
    Replies
    1. Ada hal lagi yg saya ingin tanyakan.. untuk membuatnya lebih responsive seperti posisi baris tersusun dalam satu kelompok jika dilihat di smartphone di css harus ditambahkan apa?

      misal di PC atau laptop susunannya
      judul lurus meyambing
      sisi kiri kebawah sub kategori

      agar di smartphone terlihat
      satu judul
      lurus dengan sub kategri di bawah judul
      dan spesifikasi di bawahnya dst..

      Delete
    2. Untuk tabel yg style berapa ?

      Delete
    3. kayak gini http://www.pulauharapantrip.com/

      Delete
    4. yup.. bisa bantu css-nya harus ditambahkan apa?

      Delete
    5. semoga berkenan membantu... kalaupun tidak. terimakasih untuk awalan tabelnya.. semoga blog makin manfaat..

      Delete
    6. Gini Aja...

      Coba Buat Gambar Tabelnya trus kirim ke email ini wahabisland@gmail.com nanti akan saya coba convert ke dalam HTML

      Delete

Jangan titip link.....saya pasti berkunjung balik....
Beri tahu saya di kotak komentar kalau sobat sudah Follow Blog ini, agar saya bisa segera Folback dan tidak ketinggalan Update artikel dari blog sobat...!!!