Cara Membuat Table Responsive Dengan HTML+CSS

Cara Membuat Table Responsive Dengan HTML+CSS - Oke Gan , Nah Sekian Jam/Hari Saya Bingung Mau NgPost Apa Ya , Akhirya Saya NgPost Yg Saya Tau Saja , Sebari NgTest Skill Coding Dikit , #Hehehe , Nah Kali Ini Saya Akan Memberikan Tutorial Belajar Cara Membuat Table Responsive Dengan HTML+CSS , Nah Di Artikel Sebelumnya Saya NgPosting Apa Itu HTML Apa Itu CSS Dan Tag HTML Serta Selector / Properti CSS , Dan Sekarang Tinggal Cara Mempraktekannya Ya .

Cara Membuat Table Responsive Dengan HTML+CSS , Nah Untuk Agan Agan Yg Sudah Pr0 Dan Mastah2 Yg Saya Hormati __/][\__ , Pasti Pernah Belajar Membuat Table Yg Pake Border Doang
#Hehehe , Nah Pertama Kali Saya Belajar Dan Melihat Kode Kode Seperti , tr , th td .
Sangat Pusing Atau Kata Basa SundaNa Mah LIERNING , #Heheheh
Saya Hanya Melihat Dan Tidak Memahaminya , Padahal Mah Gampang , Kita Hanya Mengingat Kode tr th td Saja Ya Kan ,
Terkadang Orang Begitulah , Melihat Kode Banyaaaaakkkkk Langsung Jawabnya Pusing , Padahal Bila Kita Liat Liat Dan Pahamiii , Ternyata Kodenya Saling Berhubungan Dan Di Ulang2 Saja , Dan Kodenya Sama Saja ....
Nah Cara Membuat Table Responsive Ini Sangat ~~Sulit~~ Mudah , Bagi Yg Niat ...

Nah Bila Di Blogger Kamu Bisa Menambahkannya Di Widget Atau Di HTML Di Postingan

Selow Gan Kodenya Sudah Saya Siapkan Untuk Agan !! Hehehe
Yg Mau Copy Silahkan , Tapi Jangan Terlalu Sering Mencopy Ya !!

CSSnya Pasang Di
Bawah <style type='text/css'> Atau Di Atas Kode </style>

.judul{
text-align:center;
margin-top:50px;
border:3px dashed #80C8FE;
width:450px;
height:50px;
border-radius:5px;
font-family:arial;
padding-top: 15px;
}
th{
background:#508abb;
padding: 10px 30px;
color:#fff;
font-family:arial;
}
td{
text-align:left;
padding:10px 5px;
font-family:arial,sans-serif;
transition: all 0.2s;
}
td:hover{
background:#FEF2BF;
cursor:pointer;
}
.nomor{
border-right:1px;
}

Nah Bila Sudah Kamu Tinggal Pasang Kode Di Bawah Ini Di Dalam Tag <body>
Contoh :
<body>
...//Kode Disini
</body>

<table align="center">
<tr>
<th>No</th>
<th>Nama</th>
<th>Nomor</th>
<th>Alamat</th>
<th>Kode</th>
</tr>
<tr>
<td class="No">1</td>
<td class="Nama">Ajis Maulana</td>
<td class="nomor">0838xxxxxxxx</td>
<td class="alamat">Banten</td>
<td class="kode">DC92JSD</td>
</tr>
<tr>
<td class="No">2</td>
<td class="Nama">Susilawati</td>
<td class="nomor">0838xxxxxxxx</td>
<td class="alamat">Ciketar</td>
<td class="kode">DC82JHD</td>
</tr>
<tr>
<td class="No">3</td>
<td class="Nama">Ayu Sedayu</td>
<td class="nomor">0838xxxxxxxx</td>
<td class="alamat">Carita</td>
<td class="kode">D1922HD</td>
</tr>
<tr>
<td class="No">4</td>
<td class="Nama">Mala Rahmiani</td>
<td class="nomor">0838xxxxxxxx</td>
<td class="alamat">Menes</td>
<td class="kode">H2H3H1D</td>
</tr>
<tr>
<td class="No">5</td>
<td class="Nama">Irna Mayangsari</td>
<td class="nomor">0838xxxxxxxx</td>
<td class="alamat">Umbul</td>
<td class="kode">SC42LJJ</td>
</tr>
</table>
<center><kbd>By : <a style="text-decoration:none;color:red"href="https://kazerpl.blogspot.com/">KazeRPL</a></kbd><center>

Nah Mau Tau Jadinya Seperti Apa ?
Nih Ada

Demo

Cara Membuat Table Responsive Dengan HTML+CSS

Ajis Maulana January 09, 2018

Share this