<main>
<h1>Table with Cell Spans</h1>
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
</main>
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body {
background-color: #6d695c;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAA3RSTlMmDQBzGIDBAAAAG0lEQVR42uXIIQEAAADCMHj/0NdkQMws0HEeAqvwAUGJthrXAAAAAElFTkSuQmCC);
font-size: 100%;
color: #333;
font-family: Lato, Arial, sans-serif;
padding: 0;
margin: 0;
}
main {
display: block;
box-sizing: border-box;
width: auto;
padding: 1em 2vw;
margin: 1em 2vw;
color: #000;
background-color: rgba(204, 204, 204, 0.7);
border: 0.07em solid rgba(0, 0, 0, 0.5);
border-radius: 0.5em;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
caption {
text-align: left;
font-style: italic;
padding: 0.25em 0.5em 0.5em 0.5em;
}
th,
td {
padding: 0.25em 0.5em 0.25em 1em;
vertical-align: text-top;
text-align: left;
text-indent: -0.5em;
}
th {
vertical-align: bottom;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-weight: bold;
}
tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.25);
}
tr:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.5);
}
Also see: Tab Triggers