Skip to content

Instantly share code, notes, and snippets.

@Ashkanph

Ashkanph/colspan_rowspan_table_example.html

Created April 17, 2019 07:42
Show Gist options
  • Save Ashkanph/3b6ea301fd2f504a44a89c2f096c65a2 to your computer and use it in GitHub Desktop.
Save Ashkanph/3b6ea301fd2f504a44a89c2f096c65a2 to your computer and use it in GitHub Desktop.
Download ZIP
A complex html table
Raw
colspan_rowspan_table_example.html
<!DOCTYPE html>
<html>
<!--
The source: https://codepen.io/jatinderbimra/pen/kxjeA
-->
<head>
<style>
table{width:100%;
border-width:0 0 1px 1px; border-style:solid; border-color: orange;}
table th{background:#888; color:#fff;}
table th,table td{text-align:center; border-width:1px 1px 0 0; border-style:solid; border-color:orange; padding:3px 5px;}
.subTotatlRow .sub-total-text{text-align:right;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Firm</th>
<th>Org</th>
<th>Lob</th>
<th>Sub Lob</th>
<th>Business Plans</th>
<th>Business Components</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="11">JPMC</td>
<td rowspan="5">CST</td>
<td rowspan="3">CT</th>
<td>ADS</td>
<td>1</td>
<td>10</td>
</tr>
<tr>
<td>BTO</th>
<td>2</td>
<td>15</td>
</tr>
<tr>
<td>CSI</th>
<td>3</td>
<td>6</td>
</tr>
<tr>
<td rowspan="2">VCT</th>
<td>ADS</td>
<td>4</td>
<td>10</td>
</tr>
<tr>
<td>BTO</th>
<td>5</td>
<td>15</td>
</tr>
<tr class="subTotatlRow">
<td colspan="3" class="sub-total-text">Sub Total</th>
<td>6</td>
<td>15</td>
</tr>
<tr>
<td rowspan="4">CST</td>
<td rowspan="3">CT</th>
<td>ADS</td>
<td>7</td>
<td>10</td>
</tr>
<tr>
<td>BTO</th>
<td>8</td>
<td>15</td>
</tr>
<tr>
<td>CSI</th>
<td>9</td>
<td>6</td>
</tr>
<tr>
<td rowspan="1">VCT</th>
<td>ADS</td>
<td>10</td>
<td>10</td>
</tr>
<tr class="subTotatlRow">
<td colspan="3" class="sub-total-text">Sub Total</th>
<td>11</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment