Dynamic Generated HTML Table Content - html

Question

I have a HTML Table with multible Table Rows and Columns.
There is a data request to an SQL Database.
The data is then displayed in the table body.
The table headers stay the same.
But now the problem. i don't know why all the data is written in the first column of my html table.
The table headers do not match the data be
let table = < HTMLTableElement > document.getElementById("result1");
let row = table.insertRow(-1);
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);
let cell4 = row.insertCell(3);
let cell5 = row.insertCell(4);
let cell6 = row.insertCell(5);
let cell7 = row.insertCell(6);
cell1.innerHTML = data[i].projekt_nr;
cell2.innerHTML = data[i].projekt_name;
cell3.innerHTML = data[i].inhalt;
cell4.innerHTML = data[i].bauort;
cell5.innerHTML = data[i].standort;
cell6.innerHTML = datum[i];
cell7.innerHTML = nutzer[i];
<table id="bestand">
<thead>
<tr>
<th>Projekt Nummer</th>
<th>Projekt Name</th>
<th>Inhalt</th>
<th>Bauort</th>
<th>Standort</th>
<th>Ausleihdatum</th>
<th>Nutzer</th>
</tr>
<tr>
<td><input type="text" [(ngModel)]="query_1" (ngModelChange)="search_1()"></td>
<td><input type="text" [(ngModel)]="query_2" (ngModelChange)="onSearch_2()"></td>
<td><input type="text" [(ngModel)]="query_3" (ngModelChange)="onSearch_3()"></td>
<td><input type="text" [(ngModel)]="query_4" (ngModelChange)="onSearch_4()"></td>
<td><input type="text" [(ngModel)]="query_5" (ngModelChange)="onSearch_5()"></td>
<td><input type="text" [(ngModel)]="query_6" (ngModelChange)="onSearch_6()"></td>
<td><input type="text" [(ngModel)]="query_7" (ngModelChange)="onSearch_7()"></td>
</tr>
</thead>
<tbody id="result1">
</tbody>
</table>
See the following picture.
all the data is displayed in the first column. usually the data should match the table headers and the input fields

Answer 1

<table id="bestand">
<tr class="header">
<th>Projekt Nummer</th>
<th>Projekt Name</th>
<th>Inhalt</th>
<th>Bauort</th>
<th>Standort</th>
<th>Ausleihdatum</th>
<th>Nutzer</th>
</tr>
<tr class="header">
<td><input type="text" [(ngModel)]="query_1" (ngModelChange)="search_1()"></td>
<td><input type="text" [(ngModel)]="query_2" (ngModelChange)="search_2()"></td>
<td><input type="text" [(ngModel)]="query_3" (ngModelChange)="onSearch_3()"></td>
<td><input type="text" [(ngModel)]="query_4" (ngModelChange)="onSearch_4()"></td>
<td><input type="text" [(ngModel)]="query_5" (ngModelChange)="onSearch_5()"></td>
<td><input type="text" [(ngModel)]="query_6" (ngModelChange)="onSearch_6()"></td>
<td><input type="text" [(ngModel)]="query_7" (ngModelChange)="onSearch_7()"></td>
</tr>
</table>