Table merupakan daftar yang berisi ikhtisar sejumlah data-data informasi yang biasanya berupa kata-kata maupun bilangan yang tersusun dengan garis pembatas. Di dalam membuat tabel dalam sebuah website kadang kala kita mempunyai data-data yang banyak hingga table tersebut melewati lebar website yang kita tentukan atau yang kita buat sebelumnya. Dan itu sangat mengganggu ketika user melihat informasi di dalam sebuah tabel tersebut bila tampilannya seperti itu, maka solusinya adalah kita mesti membuatnya menjadi responsive. Nah kali ini saya akan menshare bagaimana Cara Membuat Table Responsive dengan CSS. Langsung saja kita praktekan temen teman.
Baiklah sekarang kalian buka text editor kesayangan kalian, dan ketikan kode HTML di bawah ini dan beri nama dengan nama index.html dan jangan lupa save.
Index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!DOCTYPE html> <html> <head> <title>Membuat Tabel Responsive dengan CSS</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h2>Membuat Table Responsive</h2> <table> <tr> <th>Nama Depan</th> <th>Nama Belakang</th> <th>Nilai</th> <th>Nilai</th> <th>Nilai</th> <th>Nilai</th> <th>Nilai</th> <th>Nilai</th> <th>Nilai</th> <th>Nilai</th> <th>Nilai</th> <th>Nilai</th> </tr> <tr> <td>Joko</td> <td>Santoso</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>Mardi </td> <td>Winata</td> <td>90</td> <td>90</td> <td>90</td> <td>90</td> <td>90</td> <td>90</td> <td>90</td> <td>90</td> <td>90</td> <td>90</td> </tr> <tr> <td>Dean </td> <td>Andre</td> <td>65</td> <td>65</td> <td>65</td> <td>65</td> <td>65</td> <td>65</td> <td>65</td> <td>65</td> <td>65</td> <td>65</td> </tr> </table> </div> </body> </html> |
Setelah kita membuat file HTML tadi  selanjutnya kalian buat file baru yaitu file CSS dan ketikan kode berikut dan beri nama style.css dan simpan sejajar dengan file HTML yang kita buat tadi di atas.
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
div{ overflow-x: auto; width: 50%; margin: auto; } table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} |
Coba kalian jalan kan file HTML nya dan kecilkan ukuran di brower kalian, bila ukuran dikecilkan maka tabel pun ikut berubah sesuai ukuran yang kita inginkan.
Sekian tutorial cara Membuat Tabel Responsive dengan CSS semoga bermanfaat. Keep coding 😀