table による碁盤のサンプル。
CSS background-image: url('SVGファイル名.svg') で 石や枠線の SVG 画像を表示する。

	1	2
			11	12
					111	112

下はパーツの SVG 画像です。
線以外は透明になっていて table の背景色が表示されます。

・table は以下のレイヤで構成しています。

  1) 木目調の画像   : table の背景画像に設定する
  2) 枠線や石の画像 : td の背景画像に設定する
  3) 数字など       : td 内のテキスト

・テキストは左右中央、上下中央に配置する。

  text-align: center; /* 文字を左右中央にする */

  上下の微調整は td の vertical-align で調整
  左右の微調整は span の margin-left で調整

  ブラウザによってフォントの位置が微妙にずれることがあります。

(2023/02-2023/03)
動作: Edge101