HTML
<!DOCTYPE html>
<html>
<head>
<style>
.cell{
border: 2px solid blue;
}
.align1{
text-align: center;
}
.align2{
text-align: right;
}
.headline{
padding: 5px;
text-align: center;
}
.color{
background-color: #888888;
color: white;
}
.line{
border-collapse: collapse;
}
.table1{
border-collapse: collapse;
border: 2px solid white;
margin-right: auto;
margin-left: auto;
}
.size1{
width: 15px; height: 15px;
}
.redpx{
background-color: red;
border:2px solid red;
}
.whitepx{
background-color: white;
border:2px solid white;
}
.greenpx{
background-color: greenyellow;
border:2px solid greenyellow;
}
.table2{
border-collapse: collapse;
border: 2px solid white;
margin-top: 20px;
text-align:center;
display: inline-block;
}
.margin {
margin-left: 610px;
}
.size2{
width: 10px; height: 10px;
}
.deeppinkpx{
background-color: deeppink;
border:2px solid deeppink;
}
.orchidpx{
background-color: orchid;
border:2px solid orchid;
}
.palevioletredpx{
background-color: palevioletred;
border:2px solid palevioletred;
}
.hotpinkpx{
background-color: hotpink;
border:2px solid hotpink;
}
.pinkpx{
background-color: pink ;
border:2px solid pink;
}
.seagreenpx{
background-color: seagreen;
border:2px solid seagreen;
}
.green2px{
background-color:green;
border:2px solid green;
}
.mediumseagreenpx{
background-color: mediumseagreen;
border:2px solid mediumseagreen;
}
.springgreenpx{
background-color: springgreen;
border:2px solid springgreen;
}
.black{
background-color: black;
border: 2px solid black;
}
.brownpx{
background-color: brown;
border: 2px solid brown;
}
.goldpx{
background-color: gold;
border: 2px solid gold;
}
</style>
</head>
<body >
<table class="line cell">
<h2>Пример сложной таблицы</h2>
<tr class="cell color" >
<th class="headline" >Название1 </th>
<th class="headline">Название2 </th>
<th class="headline">Ещё название </th>
<th class="headline">Куча элементов </th>
<th class="headline">Список1 </th>
<th class="headline">Список2 </th>
</tr>
<tr >
<td rowspan="11" class="cell align1">JPMC</td>
<td rowspan="5" class="cell" > CST</td>
<td rowspan="3" class="cell">CT</td>
<td class="cell">ADS</td>
<td class="cell align1">1</td>
<td class="cell align1"> 10</td>
</tr>
<tr >
<td class="cell">BTO</td>
<td class="cell align1">2</td>
<td class="cell align1">15</td>
</tr>
<tr>
<td class="cell">CSI</td>
<td class="cell align1">3</td>
<td class="cell align1">16</td>
</tr>
<tr>
<td rowspan="2" class="cell align1">VCT</td>
<td class="cell">ADS</td>
<td class="cell align1">4</td>
<td class="cell align1">10</td>
</tr>
<tr>
<td class="cell">BTO</td>
<td class="cell align1">5</td>
<td class="cell align1">15</td>
</tr>
<tr>
<td colspan="3" class="align2" >Sub Total</td>
<td class="cell align1">6</td>
<td class="cell align1">15</td>
</tr>
<tr >
<td rowspan="4" class="cell"> CST</td>
<td rowspan="3" class="cell">CT</td>
<td class="cell">ADS</td>
<td class="cell align1">7</td>
<td class="cell align1"> 10</td>
</tr>
<tr>
<td class="cell">BTO</td>
<td class="cell align1">8</td>
<td class="cell align1">15</td>
</tr>
<tr>
<td class="cell">CSI</td>
<td class="cell align1">9</td>
<td class="cell align1">16</td>
</tr>
<tr>
<td class="cell align1">VCT</td>
<td class="cell">ADS</td>
<td class="cell align1">10</td>
<td class="cell align1">10</td>
</tr>
<tr>
<td colspan="3" class="align2">Sub Total</td>
<td class="cell align1">11</td>
<td class="cell align1">15</td>
</tr>
</table>
<br>
<table class="table1">
<tr >
<th class="redpx size1"></th>
<th class="whitepx size1"></th>
<th class="redpx size1"></th>
<th class="greenpx size1"></th>
<th class="redpx size1" ></th>
<th class="whitepx size1"></th>
<th class="redpx size1"></th>
</tr>
<tr>
<td class="whitepx size1"></td>
<td class="redpx size1"></td>
<td class="greenpx size1"></td>
<td class="whitepx size1"></td>
<td class="greenpx size1"></td>
<td class="redpx size1"></td>
<td class="whitepx size1"></td>
</tr>
<tr>
<td class="redpx size1"></td>
<td class="greenpx size1"></td>
<td class="whitepx size1"></td>
<td class="whitepx size1"></td>
<td class="whitepx size1"></td>
<td class="greenpx size1"></td>
<td class="redpx size1"></td>
</tr>
<tr>
<td class="greenpx size1"></td>
<td class="whitepx size1"></td>
<td class="whitepx size1"></td>
<td class="redpx size1"></td>
<td class="whitepx size1"></td>
<td class="whitepx size1"></td>
<td class="greenpx size1"></td>
</tr>
<tr>
<td class="redpx size1"></td>
<td class="greenpx size1"></td>
<td class="whitepx size1"></td>
<td class="whitepx size1"></td>
<td class="whitepx size1"></td>
<td class="greenpx size1"></td>
<td class="redpx size1"></td>
</tr>
<tr>
<td class="whitepx size1"></td>
<td class="redpx size1"></td>
<td class="greenpx size1"></td>
<td class="whitepx size1"></td>
<td class="greenpx size1"></td>
<td class="redpx size1"></td>
<td class="whitepx size1"></td>
</tr>
<tr >
<th class="redpx size1"></th>
<th class="whitepx size1"></th>
<th class="redpx size1"></th>
<th class="greenpx size1"></th>
<th class="redpx size1" ></th>
<th class="whitepx size1"></th>
<th class="redpx size1"></th>
</tr>
</table>
<table class="table2 margin">
<tr>
<td></td>
<td></td>
<td></td>
<td class="deeppinkpx size2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th></th>
<th class="deeppinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="deeppinkpx size2"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th class="deeppinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="hotpinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="deeppinkpx size2"></th>
<th></th>
</tr>
<tr>
<th class="deeppinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="hotpinkpx size2"></th>
<th class="pinkpx size2"></th>
<th class="hotpinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="deeppinkpx size2"></th>
</tr>
<tr>
<th></th>
<th class="deeppinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="hotpinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="deeppinkpx size2"></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th class="deeppinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="deeppinkpx size2"></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="deeppinkpx size2"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table2">
<tr>
<td></td>
<td></td>
<td></td>
<td class="green2px size2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th></th>
<th class="green2px size2"></th>
<th class="seagreenpx size2"></th>
<th class="green2px size2"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th class="green2px size2"></th>
<th class="seagreenpx size2"></th>
<th class="mediumseagreenpx size2"></th>
<th class="seagreenpx size2"></th>
<th class="green2px size2"></th>
<th></th>
</tr>
<tr>
<th class="green2px size2"></th>
<th class="seagreenpx size2"></th>
<th class="mediumseagreenpx size2"></th>
<th class="springgreenpx size2"></th>
<th class="mediumseagreenpx size2"></th>
<th class="seagreenpx size2"></th>
<th class="green2px size2"></th>
</tr>
<tr>
<th></th>
<th class="green2px size2"></th>
<th class="seagreenpx size2"></th>
<th class="mediumseagreenpx size2"></th>
<th class="seagreenpx size2"></th>
<th class="green2px size2"></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th class="green2px size2"></th>
<th class="seagreenpx size2"></th>
<th class="green2px size2"></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="green2px size2"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table2">
<tr>
<td></td>
<td></td>
<td></td>
<td class="deeppinkpx size2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th></th>
<th class="deeppinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="deeppinkpx size2"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th class="deeppinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="hotpinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="deeppinkpx size2"></th>
<th></th>
</tr>
<tr>
<th class="deeppinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="hotpinkpx size2"></th>
<th class="pinkpx size2"></th>
<th class="hotpinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="deeppinkpx size2"></th>
</tr>
<tr>
<th></th>
<th class="deeppinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="hotpinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="deeppinkpx size2"></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th class="deeppinkpx size2"></th>
<th class="orchidpx size2"></th>
<th class="deeppinkpx size2"></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="deeppinkpx size2"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table1">
<tr>
<td class="black size1"></td>
<td class="black size1"></td>
<td class="black size1"></td>
<td class="black size1"></td>
<td class="black size1"></td>
<td class="green2px size1"></td>
<td class="black size1"></td>
<td class="black size1"></td>
<td class="black size1"></td>
<td class="black size1"></td>
<td class="black size1"></td>
</tr>
<tr>
<td colspan="4" class="black size1"></td>
<td colspan="3" class="seagreenpx size1"></td>
<td colspan="4" class="black size1"></td>
</tr>
<tr>
<td colspan="3" class="black size1" ></td>
<td colspan="5" class="mediumseagreenpx size1"></td>
<td colspan="3" class="black size1"></td>
</tr>
<tr>
<td colspan="2" class="black size1" ></td>
<td colspan="7" class="greenpx size1"></td>
<td colspan="2" class="black size1"></td>
</tr>
<tr>
<td colspan="4" class="black size1" ></td>
<td colspan="3" class="green2px size1"></td>
<td colspan="4" class="black size1"></td>
</tr>
<tr>
<td colspan="3" class="black size1"></td>
<td colspan="5" class="seagreenpx size1"></td>
<td colspan="3" class="black size1"></td>
</tr>
<tr>
<td colspan="2" class="black size1" ></td>
<td colspan="7" class="mediumseagreenpx size1"></td>
<td colspan="2" class="black size1"></td>
</tr>
<tr>
<td colspan="1" class="black size1" ></td>
<td colspan="9" class="greenpx size1"></td>
<td colspan="1" class="black size1"></td>
</tr>
<tr>
<td colspan="3" class="black size1" ></td>
<td colspan="5" class="green2px size1"></td>
<td colspan="3" class="black size1"></td>
</tr>
<tr>
<td colspan="2" class="black size1"></td>
<td colspan="7" class="seagreenpx size1"></td>
<td colspan="2" class="black size1"></td>
</tr>
<tr>
<td colspan="11" class="mediumseagreenpx size1"></td>
</tr>
<tr>
<td colspan="4" class="black size1" ></td>
<td class="brownpx size1"></td>
<td class="goldpx size1"></td>
<td class="brownpx size1"></td>
<td colspan="4" class="black size1"></td>
</tr>
<tr>
<td colspan="4" class="black size1" ></td>
<td class="brownpx size1"></td>
<td class="goldpx size1"></td>
<td class="brownpx size1"></td>
<td colspan="4" class="black size1"></td>
</tr>
<tr>
<td colspan="4" class="black size1" ></td>
<td class="brownpx size1"></td>
<td class="goldpx size1"></td>
<td class="brownpx size1"></td>
<td colspan="4" class="black size1"></td>
</tr>
<tr>
<td colspan="4" class="black size1" ></td>
<td class="brownpx size1"></td>
<td class="goldpx size1"></td>
<td class="brownpx size1"></td>
<td colspan="4" class="black size1"></td>
</tr>
</table>
</body>
</html>
