Contoh tabel responsive dengan css dan html
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Tabel Responsive dengan CSS dan HTML | Jurnalweb.com</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style> | |
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: yellow; | |
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: green; | |
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; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="header"> | |
<h1>Contoh Tabel Responsive Dengan CSS & HTML</h1> | |
<p>Untuk mencoba silahkan resize browser Anda</p> | |
<p>Baca tutorial selengkapnya di <a href="http://www.jurnalweb.com/membuat-tabel-responsive-dengan-css-dan-html">Jurnalweb.com</a></p> | |
</div> | |
<table> | |
<caption>Data Pelanggan</caption> | |
<thead> | |
<tr> | |
<th scope="col">Nama</th> | |
<th scope="col">Alamat</th> | |
<th scope="col">Email</th> | |
<th scope="col">Nomor Telepon</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td scope="row" data-label="Nama">David Beckham</td> | |
<td data-label="Alamat">Manchester, Inggris</td> | |
<td data-label="Email">davidbeckham@example.com</td> | |
<td data-label="Nomor Telepon">021-01010xxx</td> | |
</tr> | |
<tr> | |
<td scope="row" data-label="Nama">Mike Tyson</td> | |
<td data-label="Alamat">California, Amerika Serikat</td> | |
<td data-label="Email">miketyson@example.com</td> | |
<td data-label="Nomor Telepon">021-9198199189291929</td> | |
</tr> | |
<tr> | |
<td scope="row" data-label="Nama">Justin Bieber</td> | |
<td data-label="Alamat">New York, Amerika Serikat</td> | |
<td data-label="Email">justinbierber@example.com</td> | |
<td data-label="Nomor Telepon">021-2929292929101019</td> | |
</tr> | |
<tr> | |
<td scope="row" data-label="Nama">Selena Gomez</td> | |
<td data-label="Alamat">Texas, Amerika Serikat</td> | |
<td data-label="Email">selena.gomez@example.com</td> | |
<td data-label="Nomor Telepon">021-819199191991919</td> | |
</tr> | |
</tbody> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
OKe