Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@taufikazhary

This comment has been minimized.

Copy link

commented Sep 29, 2016

OKe

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.