table による碁盤のサンプル
・石に番号を付けられるように工夫してみる。
  石の画像と数字のテキストを重ねて表示する。

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

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

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

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

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

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

・下は碁盤の線に使用している画像です。
　白い部分は透明になっています。

下は枠線の画像

(2013/12-2023/02)
動作: Edge101, Firefox95, Chrome96