HTMLのtableで列ごとの幅を指定する方法｜CSSでの簡単な調整例

html

Webページで表（テーブル）を作るとき、「1列目は細く、2列目は広くしたい」「データが長いから、特定の列だけ幅を広く取りたい」といった場面はよくあります。

HTMLの標準的なテーブルでは、内容の長さに応じて列の幅が自動調整されますが、これでは見た目が整わないことがあります。

この記事では、<td> や <th> に直接幅を指定する基本的な方法から、<colgroup> を使って複数行に一括指定する方法まで、初心者にもわかりやすく解説します。

スポンサーリンク

HTMLテーブルの基本構造と幅の概念

HTMLテーブルの基本要素

テーブルを構成する主要なタグ

基本的な構造

<table>
  <thead>  <!-- ヘッダー部分 -->
    <tr>   <!-- 行 -->
      <th>見出し1</th>  <!-- ヘッダーセル -->
      <th>見出し2</th>
    </tr>
  </thead>
  <tbody>  <!-- 本体部分 -->
    <tr>   <!-- 行 -->
      <td>データ1</td>  <!-- データセル -->
      <td>データ2</td>
    </tr>
  </tbody>
</table>

各要素の役割

table要素

  • テーブル全体を囲む
  • 全体の幅や枠線などを設定

tr要素（Table Row）

  • テーブルの行を表す
  • 行の高さや背景色などを設定

th要素（Table Header）

  • ヘッダーセル（見出し）
  • 通常は太字で中央揃えで表示

td要素（Table Data）

  • データセル（内容）
  • 通常は通常の文字で左揃えで表示

デフォルトの幅決定ルール

ブラウザの自動調整

内容に基づく幅調整

  • セル内のテキストの長さ
  • 画像やボタンなどの要素のサイズ
  • 改行の有無

均等配分の傾向

  • 特に指定がない場合、列は比較的均等に配分される
  • ただし、内容が長い列は自動的に幅が広がる

自動調整の問題点

見た目の不統一

  • データの長さによって列幅がばらつく
  • 行ごとに幅が変わることがある
  • デザインが整わない

レスポンシブ対応の困難

  • スマートフォンなどの小さな画面で表示が崩れる
  • 重要な情報が見切れる可能性

基本的な列幅指定方法

インラインスタイルでの直接指定

th/td要素への直接指定

基本的な書き方

<table border="1">
  <tr>
    <th style="width: 150px;">商品名</th>
    <th style="width: 300px;">説明</th>
    <th style="width: 100px;">価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>新鮮な青森産のりんごです。甘くてジューシー。</td>
    <td>200円</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>冬にぴったりの甘いみかんです。ビタミンC豊富。</td>
    <td>150円</td>
  </tr>
</table>

幅の指定方法

ピクセル指定（px）

<th style="width: 200px;">固定幅の列</th>
  • 画面サイズに関係なく固定の幅
  • 精密な幅指定が可能
  • レスポンシブデザインには不向き

パーセント指定（%）

<th style="width: 30%;">可変幅の列</th>
  • テーブル全体に対する割合
  • 画面サイズに応じて伸縮
  • レスポンシブデザインに適している

em指定

<th style="width: 15em;">文字サイズ基準の列</th>
  • 文字サイズを基準とした相対的な幅
  • フォントサイズが変わると幅も変わる

どの単位を選ぶべきか？

用途別の使い分け

  • データテーブル（管理画面など）: px指定
  • コンテンツテーブル（記事内など）: %指定
  • テキスト中心のテーブル: em指定

CSSクラスを使った指定

外部CSSでの指定

CSS側の定義

.table-product {
  width: 100%;
  border-collapse: collapse;
}

.col-name {
  width: 20%;
}

.col-description {
  width: 60%;
}

.col-price {
  width: 20%;
}

HTML側での適用

<table class="table-product">
  <tr>
    <th class="col-name">商品名</th>
    <th class="col-description">説明</th>
    <th class="col-price">価格</th>
  </tr>
  <tr>
    <td class="col-name">りんご</td>
    <td class="col-description">新鮮な青森産のりんご</td>
    <td class="col-price">200円</td>
  </tr>
</table>

CSSを使うメリット

保守性の向上

  • スタイルとコンテンツの分離
  • 一括修正が可能
  • 再利用しやすい

コードの簡潔性

  • HTMLがすっきりする
  • 同じスタイルを複数箇所で利用可能

colgroupを使った効率的な列幅管理

colgroupの基本概念

colgroupとは

役割と目的

  • テーブルの列全体に対してスタイルを適用
  • 各行に個別設定する必要がない
  • 列単位での一括管理が可能

基本的な構文

colgroup要素の配置

<table>
  <colgroup>
    <col style="width: 150px;">
    <col style="width: 300px;">
    <col style="width: 100px;">
  </colgroup>
  <!-- この後にtheadやtbodyが続く -->
</table>

colgroupの実践的な使用例

商品カタログテーブル

完全なテーブル例

<table border="1" style="width: 100%; border-collapse: collapse;">
  <colgroup>
    <col style="width: 150px;">  <!-- 商品名列 -->
    <col style="width: 300px;">  <!-- 説明列 -->
    <col style="width: 100px;">  <!-- 価格列 -->
    <col style="width: 80px;">   <!-- 在庫列 -->
  </colgroup>
  <thead>
    <tr>
      <th>商品名</th>
      <th>説明</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>新鮮な青森産のりんごです。甘くてジューシー。</td>
      <td>200円</td>
      <td>50個</td>
    </tr>
    <tr>
      <td>みかん</td>
      <td>冬にぴったりの甘いみかんです。ビタミンC豊富。</td>
      <td>150円</td>
      <td>30個</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>南国の甘いバナナです。朝食やスナックに最適。</td>
      <td>180円</td>
      <td>25個</td>
    </tr>
  </tbody>
</table>

複数列のグループ化

span属性を使った指定

<colgroup>
  <col span="2" style="width: 150px;">  <!-- 最初の2列 -->
  <col style="width: 300px;">           <!-- 3列目 -->
  <col span="2" style="width: 100px;">  <!-- 最後の2列 -->
</colgroup>

colgroupのメリットとデメリット

メリット

効率的な管理

  • 1回の設定で全行に適用
  • コードの重複が減る
  • 後からの変更が簡単

構造の明確化

  • テーブルの構造が分かりやすい
  • 列の役割が明確になる

デメリット

ブラウザサポート

  • 古いブラウザでは一部機能が制限される場合
  • Internet Explorer での動作に注意が必要

設定の制限

  • col要素に適用できるCSSプロパティが限定的
  • 主にwidth、background、borderなど

レスポンシブ対応の列幅設定

パーセント指定でのレスポンシブ化

基本的なパーセント指定

画面サイズに応じた調整

<table border="1" style="width: 100%; border-collapse: collapse;">
  <colgroup>
    <col style="width: 25%;">  <!-- 商品名 -->
    <col style="width: 45%;">  <!-- 説明 -->
    <col style="width: 15%;">  <!-- 価格 -->
    <col style="width: 15%;">  <!-- 在庫 -->
  </colgroup>
  <thead>
    <tr>
      <th>商品名</th>
      <th>説明</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>新鮮な青森産のりんごです。</td>
      <td>200円</td>
      <td>50個</td>
    </tr>
  </tbody>
</table>

メディアクエリとの組み合わせ

CSS での条件分岐

/* デスクトップ用 */
.responsive-table {
  width: 100%;
}

.col-name { width: 20%; }
.col-description { width: 50%; }
.col-price { width: 15%; }
.col-stock { width: 15%; }

/* タブレット用 */
@media (max-width: 768px) {
  .col-name { width: 25%; }
  .col-description { width: 45%; }
  .col-price { width: 15%; }
  .col-stock { width: 15%; }
}

/* スマートフォン用 */
@media (max-width: 480px) {
  .col-name { width: 30%; }
  .col-description { width: 40%; }
  .col-price { width: 15%; }
  .col-stock { width: 15%; }
}

モバイルファーストなテーブル設計

スマートフォンでの表示を優先

重要な情報の優先表示

/* モバイル用（デフォルト） */
.table-mobile {
  width: 100%;
}

.col-name { 
  width: 40%; 
  font-weight: bold;
}
.col-price { 
  width: 25%; 
  text-align: right;
}
.col-action { 
  width: 35%; 
  text-align: center;
}

/* 説明列はモバイルでは非表示 */
.col-description { 
  display: none; 
}

/* デスクトップでは説明列も表示 */
@media (min-width: 768px) {
  .col-name { width: 25%; }
  .col-description { 
    display: table-cell; 
    width: 35%; 
  }
  .col-price { width: 20%; }
  .col-action { width: 20%; }
}

高度なテーブル幅調整テクニック

固定ヘッダーと列幅の組み合わせ

スクロール可能なテーブル

CSS での実装

.table-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
}

.fixed-header-table {
  width: 100%;
  border-collapse: collapse;
}

.fixed-header-table thead {
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
  z-index: 10;
}

.col-fixed-1 { width: 150px; }
.col-fixed-2 { width: 200px; }
.col-flex { width: auto; }

HTML構造

<div class="table-container">
  <table class="fixed-header-table">
    <colgroup>
      <col class="col-fixed-1">
      <col class="col-fixed-2">
      <col class="col-flex">
    </colgroup>
    <thead>
      <tr>
        <th>ID</th>
        <th>名前</th>
        <th>詳細情報</th>
      </tr>
    </thead>
    <tbody>
      <!-- 多数の行データ -->
    </tbody>
  </table>
</div>

テキストの折り返し制御

長いテキストの処理

折り返しの制御

.text-wrap {
  word-wrap: break-word;      /* 長い単語を折り返し */
  word-break: break-all;      /* 文字単位で折り返し */
  white-space: normal;        /* 通常の空白処理 */
}

.text-nowrap {
  white-space: nowrap;        /* 折り返しなし */
  overflow: hidden;           /* はみ出た部分を隠す */
  text-overflow: ellipsis;    /* ...で省略表示 */
}

.text-ellipsis {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

HTML での適用

<table>
  <colgroup>
    <col style="width: 150px;">
    <col style="width: 200px;">
    <col style="width: 150px;">
  </colgroup>
  <tr>
    <td class="text-nowrap">短いテキスト</td>
    <td class="text-wrap">とても長いテキストで複数行に折り返される可能性がある内容</td>
    <td class="text-ellipsis">省略表示される長いテキスト</td>
  </tr>
</table>

テーブル幅調整のベストプラクティス

設計時の考慮事項

コンテンツに応じた幅設定

データの性質別設定

/* ID列：固定幅（数字のみ） */
.col-id {
  width: 80px;
  text-align: center;
}

/* 名前列：中程度の固定幅 */
.col-name {
  width: 150px;
}

/* 説明列：可変幅（内容が長い） */
.col-description {
  width: auto;
  min-width: 200px;
}

/* 日付列：固定幅（フォーマット統一） */
.col-date {
  width: 120px;
  text-align: center;
}

/* 操作列：固定幅（ボタン配置） */
.col-actions {
  width: 100px;
  text-align: center;
}

優先度に応じた幅配分

情報の重要度を考慮

/* 重要な情報：大きな幅 */
.priority-high {
  width: 30%;
}

/* 通常の情報：中程度の幅 */
.priority-medium {
  width: 25%;
}

/* 補助的な情報：小さな幅 */
.priority-low {
  width: 15%;
}

ユーザビリティの向上

読みやすさの改善

行の高さと列幅のバランス

.readable-table {
  border-collapse: collapse;
  line-height: 1.6;
}

.readable-table td,
.readable-table th {
  padding: 12px 8px;
  vertical-align: top;
  border: 1px solid #ddd;
}

/* 適切な列幅で読みやすさを向上 */
.col-readable-name {
  width: 20%;
  min-width: 120px;
}

.col-readable-content {
  width: 60%;
  line-height: 1.8;
}

アクセシビリティの考慮

スクリーンリーダー対応

<table>
  <caption>商品一覧表</caption>
  <colgroup>
    <col style="width: 20%;">
    <col style="width: 50%;">
    <col style="width: 15%;">
    <col style="width: 15%;">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col">説明</th>
      <th scope="col">価格</th>
      <th scope="col">在庫</th>
    </tr>
  </thead>
  <tbody>
    <!-- データ行 -->
  </tbody>
</table>

トラブルシューティング

よくある問題と解決法

幅が指定通りにならない

原因1：内容がはみ出している

/* 解決法：強制的に幅を固定 */
.force-width {
  width: 200px;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

原因2：table-layout が auto になっている

/* 解決法：fixed レイアウトを使用 */
.fixed-layout {
  table-layout: fixed;
  width: 100%;
}

スマートフォンで表示が崩れる

対策1：最小幅の設定

.mobile-friendly {
  min-width: 300px;
}

.mobile-friendly td {
  min-width: 60px;
  padding: 8px 4px;
}

対策2：横スクロールの実装

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

印刷時の問題

印刷用CSS

@media print {
  .print-table {
    width: 100%;
    font-size: 12px;
  }
  
  .print-table .col-wide {
    width: 40%;
  }
  
  .print-table .col-narrow {
    width: 20%;
  }
}

まとめ

HTMLテーブルで列ごとの幅を指定する方法には、いくつかのアプローチがあります。

基本的な指定方法

  • th/td要素への直接指定：簡単だが保守性に劣る
  • CSSクラス：保守性が高く再利用可能
  • colgroup要素：効率的で構造が明確

幅の指定単位

  • px指定：固定幅、精密な制御が可能
  • %指定：可変幅、レスポンシブ対応
  • em指定：文字サイズ基準、テキスト中心のテーブル

レスポンシブ対応

  • メディアクエリとの組み合わせ
  • モバイルファーストな設計
  • 重要な情報の優先表示

高度なテクニック

  • 固定ヘッダーとの組み合わせ
  • テキストの折り返し制御
  • table-layout: fixed の活用

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました