tutorialswb

TutorialsWB hadir sebagai wadah bagi teman-teman yang ingin "Belajar PHP Dasar". Sehingga kami yakin bahwa TutorialsWB akan menjadi Pusat "Belajar Bahasa Pemrograman PHP" Disamping PHP website ini menyediakan berbagai tips dan trik Blogger. Kami menerima Pemasangan iklan banner atau artikel.

Hubungi Saya

Tabel Responsive Menggunakan HTML



Selamat siang sobat blogger kali ini kami akan share bagaimana membuat tabel yang responsive. Banyak cara membuat tabel yang bagus tetapi permasalahannya adalah tabel yang bagus belum tentu responsive. Oleh karena itu kali ini kami akan share bagaimana Membuat Tabel Responsive Menggunakan HTML.
<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}
th, td {
    border: none;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>
</body>
</html>

Sebenarnya yang membuat tabel di atas responsive ialah kode <div style="overflow-x:auto;"> Jika anda kurang yakin anda bisa mencoba menghapus kode "overflow-x:auto;" maka tabel yang anda buat tidak akan responsive lagi.

Sekian share yang sangat singkat ini semoga bermanfaat bagi anda semua, Jangan lupa share keteman dan orang disekitar anda terutama orang yang belajar HTML. Jangan segang-segang untuk meninggalkan comment jika sobat belum kurang paham atau mempunyai pertanyaan sekitar HTML.



Baca Juga

closed