tableタグを使った時の画像の位置などのcss調整の仕方

前提・実現したいこと

現在Pas-Polというサイトの模写をやっています。https://pas-pol.jp/　tableを使って三枚の画像を並べました。そうすると画像と画像の間に空白が開きすぎてしまいました。　https://pas-pol.jp/　これをこのサイトの3section目の三枚の画像のような間隔にするにはどうすればいいのでしょうか？marginで調節しようとしましたが自力ではうまくいきませんでした。また二段目の写真の調節もうまくいきません。

tableタグを使った時、cssで思うように画像の位置などを調節できなくなります。
回答よろしくお願いいたします。

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

↓　調整後

該当のソースコード

html

<table class="profile"> <tbody> <tr> <td width ="33%"> <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/01/wh_thumb2.png"> <p>地球一周 365日世界遺産絶景の旅</p> </td> <td width ="33%"> <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/12/kyoto365_thumnail-1.png"> <p>地球一周 365日京都絶景の旅</p>

  </td>

  <td width ="33%">
    <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/banner_thumb1.png">
    <p>地球一周 365日 北海道 絶景日めくりカレンダー</p>
  </td>
  </tr>
</tbody>
</table>

css

.profile {
margin: 3px auto;
margin-right: 150px;
}

.profile img {
width: 240px;
}

HTML　変更後↓

<div class="profile"> <div class="world"> <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/01/wh_thumb2.png"> <p>地球一周 365日 <br> 世界遺産絶景の旅</p>

    </div>

    <div class="kyoto">
      <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/12/kyoto365_thumnail-1.png">
    <p> 365日 京都 絶景の旅</p>
    </div>

    <div class="Hokkaido">
      <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/banner_thumb1.png">
    <p>365日 北海道 絶景<br>
      日めくりカレンダー</p>
    </div>
    </div>

css　変更後

.profile {
width: 100%;
display: flex;

}

.world img {
width: 240px;
margin-left: 360px;
margin-right: 30px;
}

.world p {
font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
font-style: normal;
color: #13191b;
font-size: 20px;
font-weight: 700;
line-height: 34px;
margin-left: 360px;
margin-right: 30px;
text-align: center;
}

.kyoto img {
width: 240px;
}

.kyoto p {
font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
font-style: normal;
color: #13191b;
font-size: 20px;
font-weight: 700;
line-height: 34px;
text-align: center;
}

.Hokkaido img {
width: 240px;
margin-left: 30px;
}

.Hokkaido p {
font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
font-style: normal;
color: #13191b;
font-size: 20px;
font-weight: 700;
line-height: 34px;
text-align: center;
}

試したこと

画像と文字をdivでくくって、display: flex;
を使用し、そこから微調整。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

itagagaki

2021/09/13 15:36

レイアウトのためにtableタグを使うのは適切ではなく、いまどきは display: grid; や display: flex; が使われます。なぜtableでレイアウトしたいのですか？

bibibin07

2021/09/13 15:59

初めはdisplay: flex; で進めようと思っていましたが、念のため三枚の画像を並べる方法を調べたら、tableタグを使う方法が出てきたのでtableタグを使った次第です。初学者なので、このケースではどのタグを使えばいいかが理解できていなかったです。

itagagaki

2021/09/13 23:21

すると質問は、flexやgridを使った回答は望まず、どうしてもtableを使うということですか？

hatena19

2021/09/14 01:26 編集

今時、tableタグでレイアウトする方法を紹介しているサイトの情報は古いので、他のサイトの情報をさがした方がしあわせになれると思います。 Felebox　または Grid でのレイアウトの方がシンプルかつ自由度が高いです。

bibibin07

2021/09/14 14:01

flexやgridを使った回答を望んでいます。この場合どのタグを使えば正解かがわからず、 tableタグを使ってしまいました。

bibibin07

2021/09/14 14:02

1回その方法でやってみます。回答ありがとうございます。勉強になります。

bibibin07

2021/09/15 13:07 編集

flexを使ったら画像の位置をうまく調整することができました！

Lhankor_Mhy

2021/09/15 01:46

このページがわかりやすいかもしれません。 https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html#h206

bibibin07

2021/09/15 14:20

最初はmarginを使って1つ1つ画像の位置を調整していました。 justify-content: center;を使うと一挙に調整することができ、大幅にコードの量を少なくすることができました。一気に課題が解決した時、本当に感動しました。皆さん、回答していただきありがとうございました。またの機会があればよろしくお願いします。