お疲れ様です。

今日は、昨日から自己紹介ページに自分の職歴を載せている箇所があるのですが、西暦と出来事が空白なく、くっついた状態で箇条書きにして示していましたが、やっぱり微妙と思い、訂正していました。
しかし異動回数が多く、年はわかるのですが何月だったかはっきりせず、省いているところがあります。
本来は2024年7月　〇〇〇　と書きたいのですが、
一部は2024年　〇〇〇　と書いており、全体を見たときにガタガタになってしまっているのをどうにかしようと調べてみました。

今回参考にさせていただいたページは以下のリンクです。勉強になりました！
歯車加工技術研究所

始めに試したのは、などの空白を駆使してそろえようと思いましたが、 1つ書いたところで、できる空白は全角スペース1つ分くらいの空白…
これでは全然そろわなかったですし、

<span>2024年7月</span>&ensp;&ensp;&ensp;出来事

と書いたところでごちゃごちゃ感が否めず、すぐに止めちゃいました

上記リンク様にもあるように、最終的には table 要素を使ってそろえることにしました。

<table>
 
 <tr>
  <td><span>2024年7月</span></td> <td>出来事</td>
 </tr>
 <tr>
  <td><p><span>2024年</span></td> <td>出来事</td></p>
 </tr>
 
</table>

という書き方にしました。するとこちらが空白していしなくても文の頭がそろいました！
結果は画像の通りです。

ちなみに

<tr>
 <td><p><span>2024年</span></td> <td>出来事</p></td>
</tr>

/p の位置が違うと崩れてしまったので、書く順番は注意が必要なようです。

そしてcssにて
span {
padding-right: 〇〇px;
}
とすれば空白を好きな幅で空けることもできました。
table は表を作るときに使う要素だと思い込んでいましたが、今回のような箇条書きをする部分にも使えるんだと学びがありました