Tutorial Cara Membuat Tabel Responsive dengan HTML dan CSS

Saat ini web responsive menjadi salah satu yang harus dilakukan pada saat membuat website, karena pengguna mobile semakin banyak maka kita dituntut untuk update ilmu sehingga dapat membuat website dengan responsive, apalagi website saat ini memiliki banyak tampilan yang memerlukan tampilan tabel untuk menampilkan berbagai data dari database.

Salah satu komponen penting yang kita buat responsive dalam sebuah website yakni tabel, jadi disini kita akan membuat tabel yang responsive dengan HTML dan CSS.

Tampilan hasil dari tabel responsive  apabila ukuran layar kurang dari 600px :

 

Kode HTML.
Langkah awal adalah masukan kode HTML berikuti sebagai berikut kita buat file dengan nama tabel_responsive.html :

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Membuat Tabel Responsive by http://ilmuweb.net</title>
  
    <link rel="stylesheet" type="text/css" href="styletabel.css">
  

</head>
<body>

<table>
  <caption>Data Mahasiswa <a href="http://ilmuweb.net">ilmuweb.NET</a></caption>

<thead>

    <tr>

    <th scope="col">Nama</th>

    <th scope="col">NIM</th>

    <th scope="col">Alamat</th>


    <th scope="col">Jurusan</th>


    <th scope="col">Telpon</th>

    </tr>

</thead>


<tbody>

  <tr>

    <td scope="row" data-label="Nama">Arsy Adinda</td>

    <td scope="row" data-label="NIM">2018001</td>

    <td data-label="Alamat">Jakarta</td>


    <td data-label="Juruan">Teknik Informatika</td>


    <td data-label="Telpon">0853 456xxx</td>

  </tr>


<tr>

    <td scope="row" data-label="Nama">Adi Bagus S</td>

    <td scope="row" data-label="NIM">2018002</td>


    <td data-label="Alamat">Bandung</td>


    <td data-label="Juruan">Teknik Informasi</td>


    <td data-label="Telpon">0853 487xxx</td>

  </tr>


<tr>

    <td scope="row" data-label="Nama">Megawati Ismail</td>

    <td scope="row" data-label="NIM">2018003</td>


    <td data-label="Alamat">Makasar</td>


    <td data-label="Juruan">Teknik Komputer dan Jaringan</td>


    <td data-label="Telpon">0853 477xxx</td>

  </tr>


<tr>

    <td scope="row" data-label="Nama">Nurhasmi Manohara</td>

    <td scope="row" data-label="NIM">2018004</td>


    <td data-label="Alamat">Banjarmasin</td>


    <td data-label="Juruan">Teknik Informasi</td>


    <td data-label="Telpon">0853 455xxx</td>

  </tr>

</tbody>

</table>

</body>
</html>

 

Kode CSS.
Kemudian kita buat kode CSS sebagai berikut dengan nama file styletabel.css :

body {
  font-family: "Times New Roman", serif;
  line-height: 1.25;
  padding: 40px 20px;
}
.header{
  text-align: center;
  border-bottom: 1px solid #ddd;
}
table {
  border: 1px solid green;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
}
table caption {
  font-size: 1.5em;
  margin: .25em 0 .75em;
}
table tr {
  background: #FFEBCD;
  border: 1px solid green;
  padding: .35em;
}
table th,
table td {
  padding: .625em;
  text-align: center;
}
table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #483D8B;
  color: white;
}
table td img {
  text-align: center;
}
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    display: none;
  }
  table tr {
    border-bottom: 3px solid green;
    display: block;
    margin-bottom: .725em;
  }
  table td {
    border-bottom: 1px solid green;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
}

Penjelasan logika scrip diatas, adalah ketika ukuran layar lebih kecil dari 600px maka (tag thead) akan disembunyikan, dan pengganti kolom tabel (tag td) akan dibuat satu kolom, dan ditampilkan isi data dari atribut (data-table), dan pada script HTML sebagai tabel dari setiap (tag td). Untuk melihat hasilnya dari script diatas dapat klik demo link dibawah ini:

DEMO | DOWNLOAD

Sekian dulut tutorial membuat tabel responsive semoga bermanfaat bagi rekan-rekan yang sedang belajar html dan css.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *