Last active
December 5, 2020 13:02
-
-
Save tutweb/8509c08a24e3a4a0709dfaf927ccca42 to your computer and use it in GitHub Desktop.
Contoh tabel responsive dengan css dan html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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
OKe