how to display data for a specific month in a table - html

Question

is it possible to display the data on which column month of the table?
below is the sample dashboard to achieve
and this is my DB
currently this is my dashboard. I want to align the data base on the period in the DB.
what should be my tboby look like to achieve the desired dashboard
this is my index html
<div class="w3-container w3-padding-64 w3-theme-l5">
<div class="w3-padding-16"><span class="w3-xlarge w3-border-purple w3-bottombar">COUNT PER BUSINESS UNIT</span></div>
<div>
<table id="businessUnit-tbl" class="table table-bordered display nowrap">
<thead>
<tr style="/*color:white;*/ align-content:center">
<td>MONTH</td>
</tr>
<tr #*style="color:white"*#>
<td>Business Unit</td>
<td id="jan">January</td>
<td id="feb">February</td>
<td id="mar">March</td>
<td id="apr">April</td>
<td id="may">May</td>
<td id="june">June</td>
<td id="july">July</td>
<td id="aug">August</td>
<td id="sept">September</td>
<td id="oct">October</td>
<td id="nov">November</td>
<td id="dec">December</td>
<td id="total">Total</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

Answer 1

According to my understanding of the topic, I suggest leaving tbody blank and trying to fill it with javascript
// append column to the HTML table
function appendColumn() {
var tbl = document.getElementById('my-table'), // table reference
i;
// open loop for each row and append cell
for (i = 0; i < tbl.rows.length; i++) {
createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
}
}