Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<head>
<style>
html {
line-height: 1.25;
}
body {
background-color: white;
margin: 0;
}
table {
border-collapse: collapse;
position: absolute;
}
#first-table {
top: 0px;
}
#second-table {
top: 175px;
}
#third-table {
top: 350px;
}
#fourth-table {
top: 525px;
}
td {
padding: 0;
border-style: solid;
border-width: 5px;
border-color: transparent;
color: rgba(0,0,0,0);
}
#first-table td {
border-color: gold;
}
.bg-blue {
background-color: blue;
}
.bg-cyan {
background-color: cyan;
}
.bg-grey {
background-color: grey;
}
.bg-green {
background-color: green;
}
.bg-khaki {
background-color: khaki;
}
.bg-purple {
background-color: purple;
}
.bg-white {
background-color: white;
}
.show-text {
color: rgba(0,0,0,1);
}
</style>
</head>
<body>
<table id="first-table">
<thead>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
<td rowspan=2 class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-khaki">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</tfoot>
</table>
<table id="second-table">
<thead>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-green">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td rowspan=2 class="bg-green">YYY</td>
</tr>
<tr>
<td class="bg-grey show-text"> </td>
</tr>
<tr>
<td colspan=2 class="bg-green">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><div class="bg-cyan show-text">XXX</div></td>
<td class="bg-white show-text"> </td>
</tr>
</tfoot>
</table>
<table id="third-table">
<thead>
<tr>
<td><div class="bg-cyan show-text">XXX</div></td>
<td><div class="bg-blue show-text">YYY</div></td>
</tr>
</thead>
<tbody>
<tr>
<td><div class="bg-cyan show-text">XXX</div></td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td rowspan=2><div class="bg-blue show-text" style="padding: 12.5px 0">YYY</div></td>
</tr>
<tr>
<td class="bg-green">XXX</td>
</tr>
<tr>
<td colspan=2><div class="bg-cyan show-text">XXX</div></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
<table id="fourth-table">
<thead>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white" rowspan=2>YYY</td>
</tr>
<tr>
<td><div class="bg-cyan show-text">XXX</div></td>
</tr>
<tr>
<td class="bg-white" colspan=2>XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
</body>