Skip to content

Instantly share code, notes, and snippets.

@adambard

adambard/table.html

Created April 27, 2016 19:57
Show Gist options
  • Save adambard/ed2b8feaf6cf9f0564c1c877ecc6a44b to your computer and use it in GitHub Desktop.
Save adambard/ed2b8feaf6cf9f0564c1c877ecc6a44b to your computer and use it in GitHub Desktop.
Download ZIP
Make and style an HTML table with column groups
Raw
table.html
<html>
<head>
<style>
table {
width: 900px;
margin: 0 auto;
border-collapse: collapse;
border: 1px solid;
}
th {
font-weight: bold;
}
thead th{
border-bottom: 1px solid;
}
thead th.spacer{
border-bottom: 0;
}
td {
text-align: center;
}
.spacer{
border-right: 1px solid;
border-left: 1px solid;
}
.colhead{
border-right: 1px solid;
}
.week{
border-right: 1px solid;
}
</style>
</head>
<body>
<table>
<colgroup class="colhead">
<col>
</colgroup>
<colgroup class="week grp1">
<col>
<col>
<col>
<col>
<col>
</colgroup>
<colgroup class="spacer">
<col>
</colgroup>
<colgroup class="week grp1">
<col>
<col>
<col>
<col>
<col>
</colgroup>
<colgroup class="week grp1">
<col>
<col>
<col>
<col>
<col>
</colgroup>
<colgroup class="week grp1">
<col>
<col>
<col>
<col>
<col>
</colgroup>
<colgroup class="week grp1">
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>&nbsp;</th>
<th colspan="5">Week 1</th>
<th class="spacer"></th>
<th colspan="5">Week 2</th>
<th colspan="5">Week 3</th>
<th colspan="5">Week 4</th>
<th colspan="5">Week 5</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row 1</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td class="spacer"></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th>Row 2</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td class="spacer"></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment