JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Geometry</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td class="highlight">Student01</td>
            <td>Languages</td>
            <td>male</td>
            <td>75</td>
            <td>80</td>
        </tr>
        <tr>
            <td>Student02</td>
            <td>Mathematics</td>
            <td>male</td>
            <td>100</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Student03</td>
            <td>Languages</td>
            <td>female</td>
            <td>85</td>
            <td>95</td>
        </tr>
        <tr>
            <td>Student04</td>
            <td>Languages</td>
            <td>male</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Student05</td>
            <td>Languages</td>
            <td>female</td>
            <td>68</td>
            <td>80</td>
        </tr>
        <tr>
            <td>Student06</td>
            <td>Mathematics</td>
            <td>male</td>
            <td>100</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Student07</td>
            <td>Mathematics</td>
            <td>male</td>
            <td>85</td>
            <td>68</td>
        </tr>
        <tr>
            <td>Student08</td>
            <td>Languages</td>
            <td>male</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Student09</td>
            <td>Mathematics</td>
            <td>male</td>
            <td>65</td>
            <td>75</td>
        </tr>
        <tr>
            <td>Student10</td>
            <td>Languages</td>
       ...

CSS

.highlight {
    background-color:#009933;
}
table {
    text-align: left;
    font-size: 12px;
    font-family: verdana;
    background: #c0c0c0;
}
table thead tr, table tfoot tr {
    background: #c0c0c0;
}
table tbody tr {
    background: #f0f0f0;
}
td, th {
    border: 1px solid white;
}

JavaScript

var row = 1;
var col = 1;
var isCtrl = false; 
var isShift = false; 
var isAlt = false; 
var rowCount = $('table tbody tr').length;

$(document).keyup(function (myEvent) { 
    if(myEvent.which == 16) isShift=false; 
    if(myEvent.which == 17) isCtrl =false; 
    if(myEvent.which == 18) isAlt = false; 
});

$(document).keydown(function(myEvent) {
    if(myEvent.which == 16) isShift=true; 
    if(myEvent.which == 17) isCtrl =true; 
    if(myEvent.which == 18) isAlt = true; 
    var W = myEvent.which;
    if (W==37 && col > 1) {
        col--;
    } else if (W==38 && row > 1) {
        row--;
    } else if (W==39 && col < 5) {
        col++;
    } else if (W==40 && row < rowCount) {
        row++;
    }    
    $('.highlight').removeClass();
    if(isCtrl == true) {
        if(W==38 || W==40) {
            $('tbody tr:eq(' + (row-1) + ')').addClass('highlight');
        }
        if(W==37 || W==39) {
            $('tbody').find('tr td:nth-child(' + col + ')').addClass('highlight');
        }
    } else {
        $('tbody tr:eq(' + (row-1) + ') :nth-child(' + col + ')').addClass('highlight');
    }
});

$('table').Scrollable(200, 600);