How to appaend table heading and parsed json data into one row in html table

How to appaend table heading and parsed json data into one row in html table

i am having this code
$.each(data1.Grade, function (i, item) {
            
         
         gradetr +="<td>" + item.Grade[i] + "</td>";
        
        });
        
        $('#grade').append(gradetr);

HTML CODE:

<table border="1px"  id="grade" style="width: 700px;">
                  <tr>
                      <th style="text-align: left;">Grade</th>                                         
                      
                  </tr>
                  <tr>
                      <th style="text-align: left;">Grade-Range</th>                   
                  </tr>
                  
                  
              </table>


I am able print grade in one row but heading is coming to next row

Expected output:   Grade             A            B          C
                              Graderange  90-100    80-90    70-80

Can anybody help me