create basic styles

src/components/Table/Table.module.css

@@ -1,3 +1,5 @@
 .table {
   width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 8px;
 }

src/components/Table/TableCell/TableCell.module.css

@@ -1,3 +1,18 @@
-cell {
+.cell {
+  text-align: left;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 14px;
+}
+
+.cell:hover ~ .cell {
+  background-color: var(--color-primary-hover);
+}
+
+.cell:first-child {
+  border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
+}
 
+.cell:last-child {
+  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
 }

src/components/Table/TableCell/TableCell.tsx

@@ -6,12 +6,17 @@ import styles from './TableCell.module.css';
 type Props = {
   className?: string;
   children?: React.ReactNode;
+  colSpan?: number;
 };
 
-const TableCell: React.FC<Props> = ({ className, children }: Props) => {
-  const tableClassNames = classNames(styles.cell, className);
+const TableCell: React.FC<Props> = ({ className, children, colSpan }: Props) => {
+  const tableClassNames = classNames(styles.cell, styles.row, className);
 
-  return <td className={tableClassNames}> {children} </td>;
+  return (
+    <td colSpan={colSpan} className={tableClassNames}>
+      {children}
+    </td>
+  );
 };
 
 export default TableCell;

src/components/Table/TableHeader/TableHeader.tsx

@@ -13,7 +13,7 @@ const TableHeader: React.FC<Props> = ({ className, children }: Props) => {
 
   return (
     <thead className={tableClassNames}>
-      <tr>{children}</tr>
+      <tr className={styles.headerRow}>{children}</tr>
     </thead>
   );
 };

src/components/Table/TableHeaderCell/TableHeaderCell.module.css

@@ -1,3 +1,16 @@
-headerCell {
+.headerCell {
+  background-color: var(--color-primary-hover);
+  text-align: left;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 14px;
+  color: var(--font-color-sub)
+}
+
+.headerCell:first-child {
+  border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
+}
 
+.headerCell:last-child {
+  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
 }

src/components/Table/TableHeaderCell/TableHeaderCell.tsx

@@ -6,12 +6,17 @@ import styles from './TableHeaderCell.module.css';
 type Props = {
   className?: string;
   children?: React.ReactNode;
+  colSpan?: number;
 };
 
-const TableHeaderCell: React.FC<Props> = ({ className, children }: Props) => {
+const TableHeaderCell: React.FC<Props> = ({ className, children, colSpan }: Props) => {
   const tableHeaderCellClassNames = classNames(styles.headerCell, className);
 
-  return <th className={tableHeaderCellClassNames}> {children} </th>;
+  return (
+    <th colSpan={colSpan} className={tableHeaderCellClassNames}>
+      {children}
+    </th>
+  );
 };
 
 export default TableHeaderCell;

src/components/Table/TableRow/TableRow.module.css

@@ -0,0 +1,7 @@
+.row:nth-of-type(even) td {
+  background-color: var(--color-primary);
+}
+
+.row:hover td {
+  background-color: var(--color-primary-hover);
+}