Recreate the following table below using HTML and CSS$,$ NO BOOTSTRAP classes allowed:

$-$ Recreate table with various TV show listings using semantic elements

$-$ When user hovers over row, only the channel content is highlighted. i$.$e: only the time listings are highlighted when hovering over CBS row or elements in row themselves not time$/$channels photo $3$ shows an example

CSS custom properties:

$*\{$

$$ box$-$sizing: border$-$box;

$\}$

:root $\{$

$--$black: #$080808$;

$--$white: #fefefe;

$--$gray: #$565656$;

$--$teal: #$006060$;

$--$violetred: #a$2106$d;

$--$orange: #ffa$500$;

$\}$

body $\{$

$$ font$-$family: "Open Sans", "Helvetica Neue", sans$-$serif;

$$ font$-$size: $1\mathrm{.}2$em;

$$ color: var$(--$black$)$;

$\}$

h$1\{$

$$ text$-$align: center;

$\}$

form $\{$

$$ width: $400$px;

$\}$