JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1" width="100%" height="400" align="top">
<tr style="height: 1">
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td id="cell">1-1</td> <!-- R1C1 Yellow -->
<td>1-2</td>
</tr>
<tr>
<td>1-3</td>
<td>1-4</td>
</tr>
</table>
</td>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<tr>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</td>
</tr>
<tr style="vertical-align: top">
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
<tr>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>5-1</td>
<td>5-2</td>
</tr>
<tr>
<td>5-3</td>
<td>5-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>6-1</td>
<td>6-2</td>
</tr>
<tr>
...
CSS
.highlight {
background-color: #FFFF00;
}
JavaScript
var elapsed = 0;
var interval = 250;
var duration = 3000;
function toggle(element) {
var newClass = element.className == 'highlight' ? '' : 'highlight';
element.className = newClass;
elapsed += interval;
if(elapsed < duration)
setTimeout(function() { toggle(element); }, interval);
}
var element = document.getElementById('cell');
toggle(element);