tableのtdタグの大きさの調整ができません

Question

  <table>
    <tr>
      <td>
        <a href="/">
            <img id="logo" src="log.png">
        </a>
      </td>
      <td>
        <Div Align="right">
          <iframe id="counter" name="" width="255" height="72" src="#" scrolling="no" frameborder="0" style="padding:0;width:255px !important;"></iframe>
        </Div>
      </td>
    </tr>
    <tr class="icon-list">
      <td><i class="fas fa-home fa-5x"></i></td>
      <td><i class="fas fa-home fa-5x"></i></td>
      <td><i class="fas fa-home fa-5x"></i></td>
      <td><i class="fas fa-home fa-5x"></i></td>
      <td><i class="fas fa-home fa-5x"></i></td>
    </tr>
    <tr class="icon-list">
      <th>トップページ</th>
      <th>会社概要</th>
      <th>企業理念</th>
      <th>実績</th>
      <th>お問い合わせ</th>
    </tr>
  </table>

まず、この質問に至るまでの背景ですが、HTML,CSSのカスタマイズの案件を受けており、先方のHPがtableレイアウトを使っていました。複雑にソースが入り組んでおり、tableタグを消してやり直そうとしても、私のカスタマイズ範囲外の部分にも影響が出てしまいできません。tableを使った処理方法を教えていただきたく質問いたしました。

このソースコードのtableタグですが、画像にある通り、fontawesomeで入れたtdタグの位置が均等に横になっていません。
それぞれの横幅が変わってしまいます。

試してみたこととしては、
・widthを揃えた→反映されず
・最初のtrタグ、つまりロゴとcgiを削除→うまく均等になったが、削除したくない。
・ .icon-list{
justify-content: space-between;
}
を試した→反映されず

iconを均等に横幅いっぱいに広げる方法があればご教授ください。
お願いいたします。

Comments

[Lhankor_Mhy]

tableレイアウトは、なにかポリシーがあってやっているのでなければ、やめた方がいいと思います。

[Surofuture]

なぜでしょうか？？

[Surofuture]

もう古くて使われていないからでしょうか？

[m.ts10806]

今回の内容はそもそも表ではないですしね。テーブル本来の役割外です。

[Lhankor_Mhy]

おすすめできない理由は、以下の通りです。

・意味論的に適切ではない
・アクセシビリティに欠ける
・SEOで不利（と言われている）
・ソースコードが肥大する
・可読性に劣り、メンテナンスがしにくい
・ブラウザ実装依存が多く、思った通りのデザインがしにくい

一番最後のものは、あなたが今直面しているものです。

[Surofuture]

大変多くの理由を挙げてくださり、感謝します。
この質問に至るまでの背景ですが、HTML,CSSのカスタマイズの案件を受けており、先方のHPがtableレイアウトを使っていました。複雑にソースが入り組んでおり、tableタグを消してやり直そうとしても、私のカスタマイズ範囲外の部分にも影響が出てしまいできません。tableを使った処理方法を教えていただきたく質問いたしました（質問に書き込みます）

Answer 1

皆さんも言っておられますが
何故table??

ずいぶん昔(html3とか)の頃はtableで
レイアウトを作る方が結構いたので
もしかして古いサイトとか古い書籍を
参考にされたのかな? と感じてしまいます。

tableには表である事の意味があり
レイアウトに使う事は推奨されていません。

このような要素を配置するのなら
disply:flex とか disply:table を
お使いになる事をお勧めします

Comments

[Surofuture]

そうなんですね。ありがとうございます。

この質問に至るまでの背景ですが、HTML,CSSのカスタマイズの案件を受けており、先方のHPがtableレイアウトを使っていました。複雑にソースが入り組んでおり、tableタグを消してやり直そうとしても、私のカスタマイズ範囲外の部分にも影響が出てしまいできません。tableを使った処理方法を教えていただきたく質問いたしました。

今回の部分は工夫してul要素でカスタマイズが問題なくできました。しかし、元々table要素で作られている部分にwidthなどのスタイルが効かない事態が発生しました。（この質問は次の質問で詳細を質問します。）

Answer 2

上記Daregadaさんが仰っているようにこの場合だと「ひとつの表」として納める必要はないかと思います。

ロゴ、CGIを１つのボックスに、
その他会社概要など（おそらくナビ部分）を１つのボックスに囲ってあげるべきかとおもいます。
またこの場合は、tableではなくul要素でいいかと思います。

Answer 3

widthを揃えた→反映されず

こんにちは。
おそらく、スクリーンからはみ出す分を縮小されているのだと思います。
なので、全体の幅を与えてはいかがですか？

サンプル

table{
width:calc( 257px * 5 );
border-collapse: collapse;
}
td,th{
width:255px;
}

Answer 4

今回の例であれば、「ロゴマークとCGI」と「それ以降のアイコンと文字」を分けて表示すればいいのでは。

これを「ひとつの表」に納めるべき理由はありませんよね。