I have two tables in an html document <table id="table1"> and <table id="table2">. There are 10 columns and 5 rows in each table. Each cell contains either one or two alphanumeric or special (e.g. *, $, % etc) characters. I would like it to function as follows: When I hover or select a cell (on a specific row - e.g. top row) of table1, e.g. containing the "Z" character, then the "Z" character will be highlighted /selected on table2 if it appears on the same specific row (i.e. top row of table2). This should work in reverse (i.e. hovering /selecting table2 cell causes table1 cell to highlight /select) Only one cell at a time on each row can be highlighted /selected. Rows can be independently controlled (i.e. without affecting any other row's cell highlighting). With a second click the highlight should be removed. Can this be done with CSS or JavaScript? (CSS preferred) but both useful. Many thanks in advance for your kind help. Regards, Fred