HTML/CSSオセロ盤面をweb表示したいのに、表示されない

前提・実現したいこと

htmlとcssとjqueryを使いオセロを作ろうとしています。
その第一段階であるオセロの盤面の表示が上手くいかず、困っています。

タイトル「オセロゲーム」という文字の下に、オセロの盤面（緑色の背景のテーブルの中を、
白い枠線で８×８に区切った盤面）を表示したいです。
そのために、htmlのテーブルタグで大枠を作り、cssで色や枠線について指定しています。

プログラミングについて勉強中の初心者です。
初歩的な質問で申し訳ありませんが、お手を貸していただけると幸いです。

発生している問題・エラーメッセージ

web画面にオセロの盤面が表示されません。
タイトルである「オセロゲーム」という文字はスタイル付きで表示されるのですが、
それだけしか表示されません。

本来はタイトルの下にオセロの盤面を表示するつもりでソースコードを書きました。
気づいたことがあれば、どうか教えてください。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>CONTESY 2020-06 Koyama-asami</title>
6    <link rel="stylesheet" type="text/css" href="style.css">
7    <script type="text/javascript" src="js/jquery-3.5.0.min.js" defer></script>
8    <script type="text/javascript" src="main.js" defer></script>
9  </head>
10  <body>
11    <h1>オセロゲーム</h1>
12    <!-- オセロ盤面を表示 -->
13    <div>
14    <table id="othero"><tbody> 
15        <tr><td><td><td><td><td><td><td><td></tr>
16        <tr><td><td><td><td><td><td><td><td></tr>
17        <tr><td><td><td><td><td><td><td><td></tr>
18        <tr><td><td><td><td><td><td><td><td></tr>
19        <tr><td><td><td><td><td><td><td><td></tr>
20        <tr><td><td><td><td><td><td><td><td></tr>
21        <tr><td><td><td><td><td><td><td><td></tr>
22        <tr><td><td><td><td><td><td><td><td></tr>
23    </tbody></table>
24    </div>
25  </body>
26</html>

css
1h1 {
2  font-size: 24px;
3}
4
5//オセロ盤面外枠のスタイルクラス
6table#othero {
7    background:      #090;
8    border:          solid 2px #000;
9    border-collapse: collapse;
10    border-spacing:  0px;
11    table-layout:    fixed;
12}
13
14//オセロ盤面１マスのスタイルクラス
15table#othero tr td {
16	width:           4px;
17	height:          54px;
18	border:solid 1px #fff;
19	text-align:      center;
20	vertical-align:  middle;
21	font-size:       200%;
22}