JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Example Table</h2>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Phone</th>
    </tr>
    <tr>
        <td>Sally</td>
        <td>23</td>
        <td>123461233</td>
    </tr>
    <tr>
        <td>Ben</td>
        <td>32</td>
        <td>98765434</td>
    </tr>
    <tr>
        <td>Kelly</td>
        <td>28</td>
        <td>987236</td>
    </tr>
</table>
<br/>
<h2>Result</h2>
<div style="border:1px solid #ccc" id="result"></div>

CSS

h2 {
 font-size:200%;   
}
td, th {
     padding:0 5px 0 0;   
}
th {
  font-weight:bold;   
}

JavaScript

$(document).ready(function() {
    var objects = new Array();
    $('table tr').each(function(key, value) {
        if($(this).find('td:first').not(':empty')) {
        //loop over the cells
        obj = {};
        $(this).find('td').each(function(key, value) {
                var label = $(this).parents('table').find('th')[key].innerHTML;
                obj[label] = value.innerHTML;
    
        });
        console.debug(obj);
        objects.push(obj);

        }
    });
    //get JSON.
    console.debug(objects);
    var json = objects.toSource();
    $('#result').append(json);
});