Showing posts with label Responsive Table. Show all posts

Membuat Responsive Table Dengan CSS dan HTML

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