HTML Table Example
<!DOCTYPE html>
<html>
<head>
<title>Running Log</title>
</head>
<body>
<section>
<header>
<h2>Running Log</h2>
</header>
<table>
<tr>
<th>Date</th>
<th>Distance (miles)</th>
<th>Time (H:MM)</th>
</tr>
<tr>
<td>06/25</td>
<td class="warning">3.50</td>
<td>0:45</td>
</tr>
<tr>
<td>06/26</td>
<td>4.00</td>
<td>0:44</td>
</tr>
<tr>
<td>06/27</td>
<td>4.25</td>
<td>0:42</td>
</tr>
<tr>
<td>06/29</td>
<td class="success">5.50</td>
<td>0:44</td>
</tr>
<tr>
<td>06/30</td>
<td class="success">5.00</td>
<td>0:45</td>
</tr>
<tr>
<td>07/02</td>
<td class="warning">3.80</td>
<td>0:44</td>
</tr>
<tr>
<td>07/03</td>
<td>4.50</td>
<td>0:30</td>
</tr>
<tr class="info">
<td>Total</td>
<td>30.55</td>
<td>4:54:00</td>
</tr>
</table>
</section>
</body>
</html>
Embedded stylesheet:
body {
font-size: 15px;
line-height: 1.5;
font-family: verdana, sans-serif;
background: #111 url("runners-1280.jpg") no-repeat center top;
}
section {
width: 700px;
margin: 0 auto;
margin-top: 150px;
}
header {
text-align: center;
color: #eee;
background-color:rgba(0, 0, 0, 0.7);
padding: 6px;
border-top-left-radius:15px;
border-top-right-radius:15px;
}
table {
border-collapse: collapse;
border: 1px solid #ccc;
width: 100%;
}
tr {
border-bottom: 1px solid #ccc;
}
th, td {
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background: #efefef
}
tr:nth-child(odd) {
background: #fcfcfc
}
.warning {
background-color: #FF8787;
}
.success {
background-color: #7BDC83;
}
tr.info td {
background-color: #A1CBE0;
}