JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <colgroup>
    <col style="width:200px">
    <col style="width:350px">
    <col style="width:200px">
  </colgroup>  
  
    <tr>
        <td align="center">Table Cell 01</td>
        <td>&nbsp</td>
        <td align="center">Table Cell 03</td>
    </tr>
    <tr>
        <td colspan="3">&nbsp</td>
    </tr>
        <tr>
        <td>Table Cell 04</td>
        <td colspan="2">Table Cell 05Table Cell 05Table Cell 05Table Cell 05</td>
    </tr>
    <tr>
        <td>Table Cell 07</td>
        <td>Table Cell 08</td>
        <td class="id1">Table Cell 09</td>
    </tr>
        <tr>
        <td colspan="3">&nbsp</td>
    </tr>
    
</table>
<h1 id="position">Position</h1>

CSS

table {
    border: 1px solid #eee;   
}

td {
    color: #666;
    padding: 5px;   
}

h1 {
    font-size: 20px;
    color: #333; 
    margin: 10px 10px 0 0;  
}

JavaScript

$('td').hover(function(){
		$('#position').html('N/A');
});

$('td.id1').hover(function(){
    var xPos = Math.floor($(this).offset().left)-1;
    var yPos = Math.floor($(this).offset().top)-1;
    $('#position').html('x: '+ xPos + ', y: ' + yPos);
});