HTML テーブルのサイズ

HTMLテーブルとその各部分は、CSSを使用してサイズを自由に変更できます。

1. HTML テーブルの幅 (HTML Table Width)

テーブル全体の幅を指定するには、<table> 要素に対して CSS の width プロパティを追加します。

1.1 パーセンテージによる指定

テーブルをコンテナ（例えば画面の幅）いっぱいに広げたい場合は、width: 100%; を使用します。

<table style="width:100%">
  <tr>
    <th>会社名</th>
    <th>担当者</th>
    <th>国</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>ドイツ</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>メキシコ</td>
  </tr>
</table>

[!NOTE]
内部のセルの合計幅がテーブル全体の指定幅より小さい場合、ブラウザは余ったスペースを各セルに配分します。

2. HTML テーブル列の幅 (HTML Table Column Width)

特定の列（カラム）のサイズを指定するには、その列の <th> または <td> 要素に対して width プロパティを設定します。

1つのセルに幅を指定すると、その列全体の幅に適用されます。

<table style="width:100%">
  <tr>
    <th style="width:70%">会社名</th>
    <th>担当者</th>
    <th>国</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>ドイツ</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>メキシコ</td>
  </tr>
</table>

この例では、「会社名」の列が全体の 70% を占め、残りの 30% が他の2列に等分（またはコンテンツに応じて）割り当てられます。

3. HTML テーブル行の高さ (HTML Table Row Height)

特定のテーブル行の高さを指定するには、その行の <tr> 要素に対して CSS の height プロパティを追加します。

<table style="width:100%">
  <tr style="height:200px">
    <th>会社名</th>
    <th>担当者</th>
    <th>国</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>ドイツ</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>メキシコ</td>
  </tr>
</table>

この例では、最初の行（ヘッダー行）の高さが 200px に固定されます。

4. まとめ

HTMLテーブルのサイズ管理において、現在最も推奨される手法は以下の通りです。

実務では、モバイル端末での閲覧を考慮し、固定値（px）よりも可変値（%）を多用してレスポンシブな設計を心がけるのがモダンな開発者の作法ですね。