Skip to content

Instantly share code, notes, and snippets.

@rawaludin

rawaludin/Belajar-bikin-table.markdown

Created August 29, 2013 02:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rawaludin/6373600 to your computer and use it in GitHub Desktop.
Save rawaludin/6373600 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Rahmat Awaludin.
Raw
index.html
<html>
<head>
<title>Belajar Table</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<body>
<table>
<caption>Data Penerima BLT</caption>
<thead>
<tr>
<td>No</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
</thead>
<tbody>
<tr >
<td rowspan="2">1</td>
<td colspan="2" style="text-align:center;">Dani</td>
</tr>
<tr>
<td>Budi</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Deni</td>
<td>Bekasi</td>
</tr>
<tr>
<td>4</td>
<td>Agus</td>
<td>Cimahi</td>
</tr>
<tr>
<td>5</td>
<td>Susi</td>
<td>Garut</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>3 orang</td>
<td>Indonesia</td>
</tr>
</tfoot>
</table>
</body>
</html>
Raw
style.css
body {
width: 500px;
margin: auto;
}
caption {
margin-bottom: 50px;
margin-top: 50px;
font-size: 20px;
font-variant: arial;
color: brown;
font-weight: bold;
}
table {
width: 80%;
border: 2px brown solid;
border-collapse: collapse;
}
thead {
font-weight: bold;
text-align: center;
background-color: red;
}
tfoot {
background-color: yellow;
}
tbody tr,td {
border: 2px brown solid;
padding: 20px;
}
tbody tr:nth-child(2n) {
background-color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment