Making a table in HTML - html

What do you think should I do to make my code's output like in the photo?
Thank you for answering.
(I am typing any words in here because stackoverflow doesnt let me post this. This is the most detailed thing I can think of. I am new to the programming world and I have no one to assist me that's why I am asking for some help. Thank you for understanding.)
Here's my code:
<table border="1" cellpadding="20% " width="20%" cellspacing="0">
<tr>
<td rowspan="10"></td>
<td colspan="9"></td>
</tr>
<tr>
<td rowspan="9"></td>
<td colspan="8"></td>
</tr>
<tr>
<td rowspan="8"></td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="7"></td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="5"></td>
<td colspan="4"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="1"></td>
</tr>
<tr>
<td rowspan="0">
</td>
</tr>
</table>
enter image description here


make table inside td
<td rowspan="0" style="padding: 0; border: none;">
<table border="1" cellpadding="10% " width="20%" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td></td>
</tr>
</table>
</td>
<table border="1" cellpadding="20% " width="20%" cellspacing="0">
<tr>
<td rowspan="10"></td>
<td colspan="9"></td>
</tr>
<tr>
<td rowspan="9"></td>
<td colspan="8"></td>
</tr>
<tr>
<td rowspan="8"></td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="7"></td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="5"></td>
<td colspan="4"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="1"></td>
</tr>
<tr>
<td rowspan="0" style="padding: 0; border: none;">
<table border="1" cellpadding="10% " width="20%" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>

Related

Json view table html

im not programer, i have json file, want to see in html file, i try to convert with https://www.convertjson.com/ its work, but thats only make a basic table, like excel, no filter, dropdown not as shown on the web preview, what should I do so that the html results are as displayed on the web
preview on the web
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>yuke</td>
<td align="right">24</td>
<td align="right">1642436355563</td>
</tr>
<tr>
<td>yuna ffx</td>
<td align="right">433</td>
<td align="right">1642436363173</td>
</tr>
<tr>
<td>so yul</td>
<td align="right">29</td>
<td align="right">1642436365296</td>
</tr>
<tr>
<td>statistics yup</td>
<td align="right">21</td>
<td align="right">1642436368027</td>
</tr>
<tr>
<td>snooker masters</td>
<td align="right">157</td>
<td align="right">1642437410041</td>
</tr>
<tr>
<td>snooker cue</td>
<td align="right">4067</td>
<td align="right">1642437414446</td>
</tr>
<tr>
<td>snake io</td>
<td align="right">187</td>
<td align="right">1642437422957</td>
</tr>
<tr>
<td>scott morrison pm</td>
<td align="right">294</td>
<td align="right">1642439850739</td>
</tr>
<tr>
<td>school is important but surfing is importanter</td>
<td align="right">193</td>
<td align="right">1642439885920</td>
</tr>
<tr>
<td>schlatt</td>
<td align="right">1814</td>
<td align="right">1642440651019</td>
</tr>
<tr>
<td>scrunge cat</td>
<td align="right">14</td>
<td align="right">1642440653282</td>
</tr>
<tr>
<td>elite way school</td>
<td align="right">40</td>
<td align="right">1642440658943</td>
</tr>
<tr>
<td>valentines day school</td>
<td align="right">20996</td>
<td align="right">1642440944250</td>
</tr>
<tr>
<td>video game high school</td>
<td align="right">2781</td>
<td align="right">1642440972825</td>
</tr>
<tr>
<td>love scars</td>
<td align="right">1400</td>
<td align="right">1642441411736</td>
</tr>
<tr>
<td>black history is more than slavery</td>
<td align="right">441</td>
<td align="right">1642441420869</td>
</tr>
<tr>
<td>black history month facts</td>
<td align="right">3751</td>
<td align="right">1642441561952</td>
</tr>
<tr>
<td>black history month quotes</td>
<td align="right">8450</td>
<td align="right">1642441753406</td>
</tr>
<tr>
<td>black wolf with blue eyes</td>
<td align="right">62</td>
<td align="right">1642441758697</td>
</tr>
<tr>
<td>blueycapsules</td>
<td align="right">20</td>
<td align="right">1642441760393</td>
</tr>
<tr>
<td>black history month ideas</td>
<td align="right">5430</td>
<td align="right">1642441979096</td>
</tr>
<tr>
<td>blessed be the fruit loops</td>
<td align="right">45</td>
<td align="right">1642441983668</td>
</tr>
<tr>
<td>blue peter</td>
<td align="right">3346</td>
<td align="right">1642442195322</td>
</tr>
<tr>
<td>bliss</td>
<td align="right">17820</td>
<td align="right">1642442740461</td>
</tr>
<tr>
<td>black and gray</td>
<td align="right">31466</td>
<td align="right">1642443079939</td>
</tr>
<tr>
<td>blades aerobatic team</td>
<td align="right">25</td>
<td align="right">1642443083091</td>
</tr>
<tr>
<td>funny color blind</td>
<td align="right">586</td>
<td align="right">1642443702500</td>
</tr>
<tr>
<td>color blind</td>
<td align="right">2002</td>
<td align="right">1642444166164</td>
</tr>
<tr>
<td>roses are red violets are blue i want queso and tacos too</td>
<td align="right">188</td>
<td align="right">1642444171433</td>
</tr>
<tr>
<td>falling sakura cherry blossom</td>
<td align="right">419</td>
<td align="right">1642444733452</td>
</tr>
<tr>
<td>vaccinated by the blood of jesus</td>
<td align="right">237</td>
<td align="right">1642444737052</td>
</tr>
<tr>
<td>navy blue and gold</td>
<td align="right">2583</td>
<td align="right">1642445186483</td>
</tr>
<tr>
<td>the blue ark</td>
<td align="right">98</td>
<td align="right">1642445189394</td>
</tr>
<tr>
<td>roses are red violets are blue i want tacos and queso too</td>
<td align="right">188</td>
<td align="right">1642445193220</td>
</tr>
<tr>
<td>kim jong un blood</td>
<td align="right">64</td>
<td align="right">1642445195692</td>
</tr>
<tr>
<td>lick swallow</td>
<td align="right">448</td>
<td align="right">1642445201457</td>
</tr>
<tr>
<td>lion is my spirit animal</td>
<td align="right">214</td>
<td align="right">1642445204839</td>
</tr>
<tr>
<td>little valentine in the making</td>
<td align="right">458</td>
<td align="right">1642445209546</td>
</tr>
<tr>
<td>lil timmy tim</td>
<td align="right">976</td>
<td align="right">1642446416898</td>
</tr>
<tr>
<td>life begins where fear ends</td>
<td align="right">1474</td>
<td align="right">1642446421119</td>
</tr>
<tr>
<td>limewire</td>
<td align="right">113</td>
<td align="right">1642447069083</td>
</tr>
<tr>
<td>lip service</td>
<td align="right">190</td>
<td align="right">1642447084650</td>
</tr>
<tr>
<td>lily pulitzer case</td>
<td align="right">176</td>
<td align="right">1642447088493</td>
</tr>
<tr>
<td>list of products</td>
<td align="right">1861</td>
<td align="right">1642447092677</td>
</tr>
<tr>
<td>lisa bonet</td>
<td align="right">102</td>
<td align="right">1642447274533</td>
</tr>
<tr>
<td>line cook</td>
<td align="right">1660</td>
<td align="right">1642447527890</td>
</tr>
<tr>
<td>libraries matter</td>
<td align="right">303</td>
<td align="right">1642447532008</td>
</tr>
<tr>
<td>little hearts</td>
<td align="right">33597</td>
<td align="right">1642447678671</td>
</tr>
<tr>
<td>lion a skate</td>
<td align="right">195</td>
<td align="right">1642447683925</td>
</tr>
<tr>
<td>lolipop red lips</td>
<td align="right">373</td>
<td align="right">1642447704399</td>
</tr>
<tr>
<td>i lick</td>
<td align="right">1800</td>
<td align="right">1642447822094</td>
</tr>
<tr>
<td>stealing hearts like i steal pucks</td>
<td align="right">318</td>
<td align="right">1642447825677</td>
</tr>
<tr>
<td>to do list your mom</td>
<td align="right">1006</td>
<td align="right">1642447831298</td>
</tr>
<tr>
<td>she was like a shot of espresso</td>
<td align="right">103</td>
<td align="right">1642447834669</td>
</tr>
<tr>
<td>i lick i swallow</td>
<td align="right">245</td>
<td align="right">1642447837988</td>
</tr>
<tr>
<td>betty white quotes</td>
<td align="right">1733</td>
<td align="right">1642448073106</td>
</tr>
<tr>
<td>bills afc east champion</td>
<td align="right">222</td>
<td align="right">1642448076331</td>
</tr>
<tr>
<td>bills run the east</td>
<td align="right">947</td>
<td align="right">1642448081763</td>
</tr>
<tr>
<td>born year of the tiger</td>
<td align="right">1942</td>
<td align="right">1642448086454</td>
</tr>
<tr>
<td>budgie band</td>
<td align="right">163</td>
<td align="right">1642448487167</td>
</tr>
<tr>
<td>baker miller pink</td>
<td align="right">59</td>
<td align="right">1642448610822</td>
</tr>
<tr>
<td>baby we bare bears</td>
<td align="right">1073</td>
<td align="right">1642448615055</td>
</tr>
<tr>
<td>birthday january quotes</td>
<td align="right">7247</td>
<td align="right">1642448954399</td>
</tr>
<tr>
<td>buffalo bills afc east champions</td>
<td align="right">163</td>
<td align="right">1642448958555</td>
</tr>
<tr>
<td>burns night</td>
<td align="right">3268</td>
<td align="right">1642449350786</td>
</tr>
<tr>
<td>bigweld</td>
<td align="right">39</td>
<td align="right">1642449874809</td>
</tr>
<tr>
<td>being upside down is my normal</td>
<td align="right">90</td>
<td align="right">1642449878903</td>
</tr>
<tr>
<td>brushed watercolor painted sun</td>
<td align="right">115</td>
<td align="right">1642450180271</td>
</tr>
<tr>
<td>bat style</td>
<td align="right">3353</td>
<td align="right">1642450185077</td>
</tr>
<tr>
<td>boesarts</td>
<td align="right">1149</td>
<td align="right">1642450256733</td>
</tr>
<tr>
<td>bts valentine</td>
<td align="right">1797</td>
<td align="right">1642450702254</td>
</tr>
<tr>
<td>battlebots</td>
<td align="right">322</td>
<td align="right">1642450914337</td>
</tr>
<tr>
<td>basketball is my valentine</td>
<td align="right">842</td>
<td align="right">1642451575958</td>
</tr>
<tr>
<td>ace skull</td>
<td align="right">2143</td>
<td align="right">1642451656956</td>
</tr>
<tr>
<td>acrilic</td>
<td align="right">787</td>
<td align="right">1642451731038</td>
</tr>
<tr>
<td>acrobatic gymnastics</td>
<td align="right">4775</td>
<td align="right">1642451752746</td>
</tr>
<tr>
<td>activities assistant</td>
<td align="right">800</td>
<td align="right">1642451891621</td>
</tr>
<tr>
<td>actions</td>
<td align="right">123598</td>
<td align="right">1642451957042</td>
</tr>
<tr>
<td>acadiane</td>
<td align="right">17</td>
<td align="right">1642451960005</td>
</tr>
<tr>
<td>act justly micah</td>
<td align="right">256</td>
<td align="right">1642451964557</td>
</tr>
<tr>
<td>this is how i roll active</td>
<td align="right">553</td>
<td align="right">1642451969104</td>
</tr>
<tr>
<td>funny this is how i roll active</td>
<td align="right">415</td>
<td align="right">1642451973016</td>
</tr>
<tr>
<td>my hero academia memes</td>
<td align="right">4822</td>
<td align="right">1642451977420</td>
</tr>
<tr>
<td>greenhouse academy eagles</td>
<td align="right">46</td>
<td align="right">1642451979364</td>
</tr>
<tr>
<td>four aces</td>
<td align="right">622</td>
<td align="right">1642452128394</td>
</tr>
<tr>
<td>randy rhoads</td>
<td align="right">160</td>
<td align="right">1642452287605</td>
</tr>
<tr>
<td>ragnarok netflix</td>
<td align="right">77</td>
<td align="right">1642452290275</td>
</tr>
<tr>
<td>rainbow polka dot</td>
<td align="right">4098</td>
<td align="right">1642452309938</td>
</tr>
<tr>
<td>rand paul</td>
<td align="right">885</td>
<td align="right">1642452396472</td>
</tr>
<tr>
<td>ranch hand</td>
<td align="right">595</td>
<td align="right">1642452422401</td>
</tr>
<tr>
<td>rancor</td>
<td align="right">99</td>
<td align="right">1642452635933</td>
</tr>
<tr>
<td>rapists</td>
<td align="right">221</td>
<td align="right">1642452638614</td>
</tr>
<tr>
<td>randy moss straight cash homie</td>
<td align="right">88</td>
<td align="right">1642452641640</td>
</tr>
<tr>
<td>rapper collage</td>
<td align="right">1297</td>
<td align="right">1642452645635</td>
</tr>
<tr>
<td>rainytale studio</td>
<td align="right">64</td>
<td align="right">1642452649264</td>
</tr>
<tr>
<td>i teach the sweetest hearts rainbow teacher valentines day</td>
<td align="right">246</td>
<td align="right">1642452653877</td>
</tr>
<tr>
<td>yellowstone dutton ranch arrows</td>
<td align="right">18</td>
<td align="right">1642452656675</td>
</tr>
<tr>
<td>tusken raider</td>
<td align="right">72</td>
<td align="right">1642452917407</td>
</tr>
<tr>
<td>i would rather be with my cat</td>
<td align="right">393</td>
<td align="right">1642452922279</td>
</tr>
<tr>
<td>cat eating ramen cute noodles</td>
<td align="right">1140</td>
<td align="right">1642452926838</td>
</tr>
<tr>
<td>professional rawdogger</td>
<td align="right">58</td>
<td align="right">1642453027048</td>
</tr>
<tr>
<td>i find this rather humerus</td>
<td align="right">36</td>
<td align="right">1642453030104</td>
</tr>
<tr>
<td>luke rawlings</td>
<td align="right">36</td>
<td align="right">1642453032163</td>
</tr>
<tr>
<td>ham radio call</td>
<td align="right">153</td>
<td align="right">1642453035613</td>
</tr>
<tr>
<td>self care rap</td>
<td align="right">331</td>
<td align="right">1642453038717</td>
</tr>
<tr>
<td>mcbean tartan</td>
<td align="right">15</td>
<td align="right">1642453043739</td>
</tr>
<tr>
<td>mclaren formula one</td>
<td align="right">3221</td>
<td align="right">1642453046775</td>
</tr>
<tr>
<td>reba mcentire tour</td>
<td align="right">98</td>
<td align="right">1642453051029</td>
</tr>
<tr>
<td>lea roche</td>
<td align="right">590</td>
<td align="right">1642453349110</td>
</tr>
<tr>
<td>leicester tigers</td>
<td align="right">79</td>
<td align="right">1642453459842</td>
</tr>
<tr>
<td>lesbian valentines day</td>
<td align="right">6934</td>
<td align="right">1642454643197</td>
</tr>
<tr>
<td>lets go darwin funny</td>
<td align="right">3229</td>
<td align="right">1642454791946</td>
</tr>
<tr>
<td>let them go</td>
<td align="right">1972</td>
<td align="right">1642454819221</td>
</tr>
<tr>
<td>leek</td>
<td align="right">2241</td>
<td align="right">1642454870409</td>
</tr>
<tr>
<td>levin</td>
<td align="right">1552</td>
<td align="right">1642454897230</td>
</tr>
<tr>
<td>xmas cookie shaped letter</td>
<td align="right">99</td>
<td align="right">1642454900902</td>
</tr>
<tr>
<td>i left my bed for this</td>
<td align="right">942</td>
<td align="right">1642454906398</td>
</tr>
<tr>
<td>for the legneds for the legneds for the legneds for the legneds</td>
<td align="right">57</td>
<td align="right">1642454908997</td>
</tr>
<tr>
<td>the crow brandon lee</td>
<td align="right">466</td>
<td align="right">1642454912088</td>
</tr>
<tr>
<td>at least my cat loves me</td>
<td align="right">1355</td>
<td align="right">1642454917028</td>
</tr>
<tr>
<td>various not less</td>
<td align="right">1933</td>
<td align="right">1642454922062</td>
</tr>
<tr>
<td>the boring company</td>
<td align="right">303</td>
<td align="right">1642455022212</td>
</tr>
<tr>
<td>this man ate my son</td>
<td align="right">426</td>
<td align="right">1642455025389</td>
</tr>
<tr>
<td>thai pongal</td>
<td align="right">59</td>
<td align="right">1642455126732</td>
</tr>
<tr>
<td>the danger zone</td>
<td align="right">639</td>
<td align="right">1642455131603</td>
</tr>
<tr>
<td>the ultimate taco twosday</td>
<td align="right">22222</td>
<td align="right">1642455136173</td>
</tr>
<tr>
<td>the expanse rocinante</td>
<td align="right">188</td>
<td align="right">1642455333142</td>
</tr>
<tr>
<td>the ronettes</td>
<td align="right">145</td>
<td align="right">1642456152057</td>
</tr>
<tr>
<td>the force is strong with this teacher</td>
<td align="right">527</td>
<td align="right">1642456157248</td>
</tr>
<tr>
<td>the cheesecake factory</td>
<td align="right">53</td>
<td align="right">1642456160724</td>
</tr>
<tr>
<td>the book of boba</td>
<td align="right">230</td>
<td align="right">1642456164173</td>
</tr>
<tr>
<td>the witcher medallion</td>
<td align="right">82</td>
<td align="right">1642456166848</td>
</tr>
<tr>
<td>the office valentine</td>
<td align="right">2802</td>
<td align="right">1642456171043</td>
</tr>
<tr>
<td>the rumbling</td>
<td align="right">112</td>
<td align="right">1642456596843</td>
</tr>
<tr>
<td>this teacher loves her kids</td>
<td align="right">3883</td>
<td align="right">1642456601430</td>
</tr>
<tr>
<td>thomas petrou</td>
<td align="right">197</td>
<td align="right">1642456727484</td>
</tr>
<tr>
<td>the orion experience</td>
<td align="right">21</td>
<td align="right">1642456729374</td>
</tr>
<tr>
<td>the sweetest valentine of them all</td>
<td align="right">169</td>
<td align="right">1642456735384</td>
</tr>
<tr>
<td>the girl on the couch</td>
<td align="right">181</td>
<td align="right">1642456738884</td>
</tr>
</tbody></table>

So to keep it simple let's say you have the code for a table stored in a document called tableview.html
Your html document needs a few extra essential lines of code before it works like you want it do. In tableview.html you first add the code below in an simple text-editor like Notepad. Then copy-paste your <table>....</table> code that you've shown in your question between the <body>... </body> part.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>DataTables example - Zero configuration</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body>
</body>
</html>
End for the finishing touch you might want to add the class table-striped in your first line of the table, like:
<table class="table table-bordered table-hover table-condensed table-striped">

You can use bootstrap librariy.
https://getbootstrap.com/docs/4.0/content/tables/
Or, you can use open-source javascript grid libraries.
https://blog.logrocket.com/5-open-source-javascript-datagrids/

I need to separate the 2 rows on the right (2018 and 2017) so there is some whitespace. Having alot of trouble

I have a table that on the right has 2 Columns (2018 and 2017) with numbers underneath. I'm trying to separate those columns and have them separated by a white column with the border going to the end.I've added the html, I also have css but I'm just having a hard time separating while keeping the borders.
<table class="table">
<tbody>
<tr>
<td class="table-head-text top-table-text">Assets</td>
<td class="table-year-1 bold">2018</td>
<td class="table-year-2 bold">2017</td>
</tr>
<tr>
<td>Cash & Due From Banks</td>
<td class="table-year-1">$149,753</td>
<td class="table-year-2">$77,515</td>
</tr>
<tr>
<td>Investment Securities</td>
<td class="table-year-1">$929,432</td>
<td class="table-year-2">$830,878</td>
</tr>
<tr>
<td>Loans (net of valuation reserve)<br />
($28,582 in 2018 & $27,063 in 2017)</td>
<td class="table-year-1">$1,902,960</td>
<td class="table-year-2">$1,813,062</td>
</tr>
<tr>
<td>Federal Funds Sold</td>
<td class="table-year-1">$0</td>
<td class="table-year-2">$0</td>
</tr>
<tr>
<td>Premises & Equipment</td>
<td class="table-year-1">$49,956</td>
<td class="table-year-2">$46,666</td>
</tr>
<tr>
<td>Accured Income</td>
<td class="table-year-1">$12,652</td>
<td class="table-year-2">$12,589</td>
</tr>
<tr>
<td>Other Assets</td>
<td class="table-year-1">$111,287</td>
<td class="table-year-2">$102,413</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Assets</td>
<td class="table-year-1 bold">$3,156,040</td>
<td class="table-year-2 bold">$2,883,123</td>
</tr>
<tr>
<td class="table-head-text">Liabilities & Capital Funds</td>
<td class="table-year-1"> </td>
<td class="table-year-2"> </td>
</tr>
<tr>
<td>Non-Interest Bearing Deposits</td>
<td class="table-year-1">$952,623</td>
<td class="table-year-2">$894,075</td>
</tr>
<tr>
<td>Non-Interest Bearing Public Deposits</td>
<td class="table-year-1">$190,104</td>
<td class="table-year-2">$179,582</td>
</tr>
<tr>
<td>Interest Bearing Deposits</td>
<td class="table-year-1">$1,344,490</td>
<td class="table-year-2">$1,194,226</td>
</tr>
<tr>
<td>Interest Bearing<br />
Public Deposits</td>
<td class="table-year-1">$370,094</td>
<td class="table-year-2">$274,994</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Deposits</td>
<td class="table-year-1 bold">$2,857,311</td>
<td class="table-year-2 bold">$2,542,877</td>
</tr>
<tr>
<td>Other Liabilities</td>
<td class="table-year-1">$22,497</td>
<td class="table-year-2">$22,954</td>
</tr>
<tr>
<td>Fed Funds Purchase & Other Borrowed Money</td>
<td class="table-year-1">$0</td>
<td class="table-year-2">$63,394</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Liabilities</td>
<td class="table-year-1 bold">$2,879,808</td>
<td class="table-year-2 bold ">$2,629,225</td>
</tr>
<tr>
<td class="table-head-text">Capital Accounts</td>
<td class="table-year-1"> </td>
<td class="table-year-2"> </td>
</tr>
<tr>
<td>Capital Stock</td>
<td class="table-year-1">$2,500</td>
<td class="table-year-2">$2,500</td>
</tr>
<tr>
<td>Surplus</td>
<td class="table-year-1">$100,943</td>
<td class="table-year-2">$79,188</td>
</tr>
<tr>
<td>Undivided Profits</td>
<td class="table-year-1">$188,173</td>
<td class="table-year-2">$177,768</td>
</tr>
<tr>
<td>Unrealized Gain <span class="loss-span">(Loss) Securities</span></td>
<td class="table-year-1">($15,384)</td>
<td class="table-year-2">($5,558)</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Capital Accounts</td>
<td class="table-year-1 bold">$276,232</td>
<td class="table-year-2 bold">$253,898</td>
</tr>
<tr>
<td class="table-head-text bk">Total Liabilities & Capital Accounts</td>
<td class="table-year-1 bold">$3,156,040</td>
<td class="table-year-2 bold">$2,883,123</td>
</tr>
<tr class="tr-border-top">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
This is the example I'm trying to get to

You can try this code:
<table class="table">
<thead>
<tr>
<th width="70%" class="table-head-text top-table-text">Assets</td>
<th width="15%" class="table-year-1 bold">2018</td>
<th width="15%" class="table-year-2 bold">2017</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cash & Due From Banks</td>
<td class="table-year-1">$149,753</td>
<td class="table-year-2">$77,515</td>
</tr>
<tr>
<td>Investment Securities</td>
<td class="table-year-1">$929,432</td>
<td class="table-year-2">$830,878</td>
</tr>
<tr>
<td>Loans (net of valuation reserve)<br />
($28,582 in 2018 & $27,063 in 2017)</td>
<td class="table-year-1">$1,902,960</td>
<td class="table-year-2">$1,813,062</td>
</tr>
<tr>
<td>Federal Funds Sold</td>
<td class="table-year-1">$0</td>
<td class="table-year-2">$0</td>
</tr>
<tr>
<td>Premises & Equipment</td>
<td class="table-year-1">$49,956</td>
<td class="table-year-2">$46,666</td>
</tr>
<tr>
<td>Accured Income</td>
<td class="table-year-1">$12,652</td>
<td class="table-year-2">$12,589</td>
</tr>
<tr>
<td>Other Assets</td>
<td class="table-year-1">$111,287</td>
<td class="table-year-2">$102,413</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Assets</td>
<td class="table-year-1 bold">$3,156,040</td>
<td class="table-year-2 bold">$2,883,123</td>
</tr>
<tr>
<td class="table-head-text">Liabilities & Capital Funds</td>
<td class="table-year-1"> </td>
<td class="table-year-2"> </td>
</tr>
<tr>
<td>Non-Interest Bearing Deposits</td>
<td class="table-year-1">$952,623</td>
<td class="table-year-2">$894,075</td>
</tr>
<tr>
<td>Non-Interest Bearing Public Deposits</td>
<td class="table-year-1">$190,104</td>
<td class="table-year-2">$179,582</td>
</tr>
<tr>
<td>Interest Bearing Deposits</td>
<td class="table-year-1">$1,344,490</td>
<td class="table-year-2">$1,194,226</td>
</tr>
<tr>
<td>Interest Bearing<br />
Public Deposits</td>
<td class="table-year-1">$370,094</td>
<td class="table-year-2">$274,994</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Deposits</td>
<td class="table-year-1 bold">$2,857,311</td>
<td class="table-year-2 bold">$2,542,877</td>
</tr>
<tr>
<td>Other Liabilities</td>
<td class="table-year-1">$22,497</td>
<td class="table-year-2">$22,954</td>
</tr>
<tr>
<td>Fed Funds Purchase & Other Borrowed Money</td>
<td class="table-year-1">$0</td>
<td class="table-year-2">$63,394</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Liabilities</td>
<td class="table-year-1 bold">$2,879,808</td>
<td class="table-year-2 bold ">$2,629,225</td>
</tr>
<tr>
<td class="table-head-text">Capital Accounts</td>
<td class="table-year-1"> </td>
<td class="table-year-2"> </td>
</tr>
<tr>
<td>Capital Stock</td>
<td class="table-year-1">$2,500</td>
<td class="table-year-2">$2,500</td>
</tr>
<tr>
<td>Surplus</td>
<td class="table-year-1">$100,943</td>
<td class="table-year-2">$79,188</td>
</tr>
<tr>
<td>Undivided Profits</td>
<td class="table-year-1">$188,173</td>
<td class="table-year-2">$177,768</td>
</tr>
<tr>
<td>Unrealized Gain <span class="loss-span">(Loss) Securities</span></td>
<td class="table-year-1">($15,384)</td>
<td class="table-year-2">($5,558)</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Capital Accounts</td>
<td class="table-year-1 bold">$276,232</td>
<td class="table-year-2 bold">$253,898</td>
</tr>
<tr>
<td class="table-head-text bk">Total Liabilities & Capital Accounts</td>
<td class="table-year-1 bold">$3,156,040</td>
<td class="table-year-2 bold">$2,883,123</td>
</tr>
<tr class="tr-border-top">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
table thead tr th:last-child{
display:table;
margin-left:90px
}
table tbody tr td:last-child{
display:table;
margin-left:90px
}

HTML code of table with various row and column size

It seems easy but can't write the HTML code of the above table.
Here is what I tried so far:
<table border="1" style="border-collapse:collapse;" width="25%">
<tr>
<td>col1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

Sure you want html??
<table align="center" width="590" height="590" >
<tr>
<td align="center" height="80" colspan="4">central text</td>
</tr>
<tr>
<td align="center" height="80" colspan="2">col</td>
<td align="center" colspan="2">col</td>
</tr>
<tr>
<td align="center" height="40">t</td>
<td align="center" height="40">t</td>
<td align="center" height="80" rowspan="2">t</td>
<td align="center" rowspan="2">t</td>
</tr>
<tr>
<td align="center" height="40">t</td>
<td align="center" height="40">t</td>
</tr>
<tr>
<td align="center" height="30">t</td>
<td align="center" >t</td>
<td align="center" >t</td>
<td align="center" >t</td>
</tr>
</table>
Like this?

colspan and rowspan was missing from your code.
<table border="1" style="border-collapse: collapse;">
<tr>
<td colspan=4 align="center">central text</td>
</tr>
<tr>
<td colspan=2 align="center">col(1)</td>
<td colspan=2 align="center">col(2)</td>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
<td rowspan=2 align="center">text</td>
<td rowspan=2 align="center">text</td>
</tr>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr>
</table>

setting rowspan in td table

i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?

Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>

This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO

How to code swirl like table in HTML?

See this:
_____ __
|_____| |
| |__|__|
|__|_____|
How to code it in HTML?

<table border="1">
<tr>
<td colspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>

Try this :-)
<table>
<tr>
<td colspan=2>top left</td>
<td rowspan=2>top right</td>
</tr>
<tr>
<td rowspan=2>lower left</td>
<td>center</td>
</tr>
<tr>
<td colspan=2>lower right</td>
</tr>
</table>
It produces

use colspan and rowspan, and set height and width.
<table border=1 height=400 width=400>
<tr>
<td colspan=2>1</td>
<td rowspan=2>3</td>
</tr>
<tr>
<td rowspan=2>4</td>
<td>5</td>
</tr>
<tr>
<td colspan=2>8</td>
</tr>
</table>

http://jsfiddle.net/2b9K3/
<table>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>

This can be done pretty easily with rowspans and colspans.