MENU
  1. ホーム
  2. HTML&CSS
  3. 【HTML】tableタグ（テーブル）の作り方：枠線・セル結合・レスポンシブ

【HTML】tableタグ（テーブル）の作り方：枠線・セル結合・レスポンシブ

HTML&CSS
html-table-tag

HTMLの<table>タグは、会社概要や料金表など整理されたデータを分かりやすくユーザーに伝える要素です。

本記事では、基本のタグ構造やセルの結合ルール、実務で求められるCSSデザイン、スマホ向けのレスポンシブ対応を解説します。

目次

HTMLのtable（表）の作り方とタグ一覧

Webサイトで「会社概要」や「料金プラン」など、データを整理して見やすく表示したい時に利用するのが<table>タグです。

ここでは、表を作る要素と実務で使えるtableの使い方・書き方を解説します。

まずは、表の作成に必要なタグ一覧を押さえていきましょう。

table（表）の作り方とタグ一覧
  • table・tr・th・tdタグの役割と基本構造
  • captionやthead/tbodyでのグループ化

table・tr・th・tdタグの役割と基本構造

HTMLの表は、Excelやスプレッドシートとは異なり、複数タグを組み合わせてブロックを積み上げるように作ります。

覚えるべき4つの必須タグの役割は以下の通りです。

  1. <table>
    表の「外枠」です。
    ここから表が始まるよ、という合図になります。
  2. <tr>
    表の「行（横の並び）」を作ります。
  3. <th>
    表の「見出しセル」を作ります。
    デフォルトで太字になり、中央寄せで表示されます。
  4. <td>
    表の「通常のデータセル」を作ります。
📊 基本のtable構造（会社概要）
会社名 株式会社サンプル
設立 2026年4月
<table>
  <tr> <!– 1行目の始まり –>
    <th>会社名</th> <!– 見出し –>
    <td>株式会社サンプル</td> <!– データ –>
  </tr>
</table>

※HTMLだけだと枠線が出ないため、見やすくするためにCSSで枠線を付けています。

HTMLコード表示
<div class="htbl1-wrapper">
  
  <div class="htbl1-demo-area">
    
    <div class="htbl1-box">
      <div class="htbl1-label">📊 基本のtable構造（会社概要）</div>
      
      <table class="htbl1-table">
        <tr>
          <th>会社名</th>
          <td>株式会社サンプル</td>
        </tr>
        <tr>
          <th>設立</th>
          <td>2026年4月</td>
        </tr>
      </table>

      <div class="htbl1-code">
        <span class="htbl1-hl-green"><table></span><br>
          <span class="htbl1-hl-blue"><tr></span> <!-- 1行目の始まり --><br>
            <span class="htbl1-hl-pink"><th></span>会社名<span class="htbl1-hl-pink"></th></span> <!-- 見出し --><br>
            <span class="htbl1-hl-yellow"><td></span>株式会社サンプル<span class="htbl1-hl-yellow"></td></span> <!-- データ --><br>
          <span class="htbl1-hl-blue"></tr></span><br>
        <span class="htbl1-hl-green"></table></span>
      </div>
      <p class="htbl1-note">※HTMLだけだと枠線が出ないため、見やすくするためにCSSで枠線を付けています。</p>
    </div>

  </div>
</div>
CSSコード表示
.htbl1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.htbl1-demo-area {
  display: flex;
  justify-content: center;
}

.htbl1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.htbl1-label {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

/* 基本のテーブル装飾 */
.htbl1-table {
  width: 100%;
  border-collapse: collapse; /* 枠線を1本にまとめる必須CSS */
  margin-bottom: 20px;
}

.htbl1-table th, .htbl1-table td {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
}

.htbl1-table th {
  background-color: #f1f3f5;
  width: 30%; /* 見出しの幅を固定 */
}

.htbl1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}

.htbl1-hl-green { color: #98c379; font-weight: bold; }
.htbl1-hl-blue { color: #61afef; font-weight: bold; }
.htbl1-hl-pink { color: #c678dd; font-weight: bold; }
.htbl1-hl-yellow { color: #e5c07b; font-weight: bold; }

.htbl1-note {
  font-size: 12px;
  color: #666;
  margin-top: 15px;
  line-height: 1.5;
}

captionやthead/tbodyでのグループ化

本格的な表を作る際には、タグを組み合わせて「表の構造」を明確にします。

  • <caption>：表の「タイトル」を付けます。
  • <thead>：表の「ヘッダー（見出し行のまとまり）」を示します。
  • <tbody>：表の「ボディ（データ行のまとまり）」を示します。
  • <colgroup>：列ごとにまとめてCSSスタイル（背景色や幅など）を適用する際に使います。
📱 スマートフォンプラン比較表
項目 プランA プランB
データ容量 3GB 20GB
月額料金 980円 2,980円
<table>
  <caption>プラン比較表</caption>
  <colgroup>…</colgroup>
  <thead>
    <tr> <th>項目</th>… </tr>
  </thead>
  <tbody>
    <tr> <th>容量</th>… </tr>
  </tbody>
</table>
HTMLコード表示
<div class="htbl2-wrapper">
  
  <div class="htbl2-demo-area">
    
    <div class="htbl2-box">
      
      <table class="htbl2-table">
        <caption>📱 スマートフォンプラン比較表</caption>
        
        <colgroup>
          <col class="htbl2-col-header"> <col class="htbl2-col-planA">  <col class="htbl2-col-planB">  </colgroup>

        <thead>
          <tr>
            <th>項目</th>
            <th>プランA</th>
            <th>プランB</th>
          </tr>
        </thead>
        
        <tbody>
          <tr>
            <th>データ容量</th>
            <td>3GB</td>
            <td>20GB</td>
          </tr>
          <tr>
            <th>月額料金</th>
            <td>980円</td>
            <td>2,980円</td>
          </tr>
        </tbody>
      </table>

      <div class="htbl2-code">
        <table><br>
          <span class="htbl2-hl-caption"><caption></span>プラン比較表<span class="htbl2-hl-caption"></caption></span><br>
          <span class="htbl2-hl-col"><colgroup>...</colgroup></span><br>
          <span class="htbl2-hl-thead"><thead></span><br>
            <tr> <th>項目</th>... </tr><br>
          <span class="htbl2-hl-thead"></thead></span><br>
          <span class="htbl2-hl-tbody"><tbody></span><br>
            <tr> <th>容量</th>... </tr><br>
          <span class="htbl2-hl-tbody"></tbody></span><br>
        </table>
      </div>

    </div>

  </div>
</div>
CSSコード表示
.htbl2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.htbl2-demo-area {
  display: flex;
  justify-content: center;
}

.htbl2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.htbl2-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

/* captionのスタイル */
.htbl2-table caption {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
  color: #333;
}

/* colgroupで列ごとに背景色などを指定 */
.htbl2-col-header { width: 30%; }
.htbl2-col-planA { background-color: #f8f9fa; }
.htbl2-col-planB { background-color: #e7f1ff; }

.htbl2-table th, .htbl2-table td {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}

/* thead内の見出しのみ装飾 */
.htbl2-table thead th {
  background-color: #333;
  color: #fff;
}

/* tbody内の見出しのみ装飾 */
.htbl2-table tbody th {
  background-color: #f1f3f5;
  text-align: left;
}

.htbl2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}

.htbl2-hl-caption { color: #e06c75; font-weight: bold; }
.htbl2-hl-col { color: #d19a66; font-weight: bold; }
.htbl2-hl-thead { color: #61afef; font-weight: bold; }
.htbl2-hl-tbody { color: #98c379; font-weight: bold; }

colspanとrowspanの使い方

Excelなどの表計算ソフトで使うセル結合があります。

HTMLの表組みにおいても、複数のセルを一つにまとめる技術は必須です。

例えば「月曜日から金曜日まで全部同じ予定」という場合、5つのセルを1つにまとめた方が見やすい表になります。

この結合を実現するのが、colspan（横の結合）とrowspan（縦の結合）という属性です。

ここでは、結合時のレイアウト崩れの原因と実務で使える結合ルールを解説します。

colspanとrowspanの使い方
  • 横の列を結合する
  • 縦の行を結合する
  • 複雑な結合と表のネスト

横の列を結合する

横方向（右方向）に隣り合うセルを結合するには、起点になる<th>や<td>に対してcolspan属性を使用します。

例えば、横に3つのセルを繋げたい場合は<td colspan="3">と記述します。

1行すべてを結合したい場合も、その行の総列数を指定すれば可能です。

❌ 悪い例（不要なtdを消し忘れ）
プラン名 初期費用 月額
無料プラン ずっと無料 消し忘れ
<tr>
  <td>無料プラン</td>
  <td colspan=”2″>ずっと無料</td>
  <td>消し忘れ</td> <!– これが原因！ –>
</tr>
⭕️ 良い例（はみ出さずに綺麗に結合）
プラン名 初期費用 月額
無料プラン ずっと無料
<tr>
  <td>無料プラン</td>
  <td colspan=”2″>ずっと無料</td>
  <!– 余分なtdは書かないのが正解 –>
</tr>
HTMLコード表示
<div class="htbl-col-wrapper">
  
  <div class="htbl-col-demo-area">
    
    <div class="htbl-col-box">
      <div class="htbl-col-label" style="color:#dc3545;">❌ 悪い例（不要なtdを消し忘れ）</div>
      
      <table class="htbl-col-table htbl-col-bad">
        <tr>
          <th>プラン名</th>
          <th>初期費用</th>
          <th>月額</th>
        </tr>
        <tr>
          <td>無料プラン</td>
          <td colspan="2" class="htbl-col-highlight">ずっと無料</td>
          <td>消し忘れ</td>
        </tr>
      </table>

      <div class="htbl-col-code htbl-col-code-bad">
        <tr><br>
          <td>無料プラン</td><br>
          <td <span class="htbl-col-hl-red">colspan="2"</span>>ずっと無料</td><br>
          <span class="htbl-col-hl-red"><td>消し忘れ</td></span> <!-- これが原因！ --><br>
        </tr>
      </div>
    </div>

    <div class="htbl-col-box">
      <div class="htbl-col-label" style="color:#198754;">⭕️ 良い例（はみ出さずに綺麗に結合）</div>
      
      <table class="htbl-col-table htbl-col-good">
        <tr>
          <th>プラン名</th>
          <th>初期費用</th>
          <th>月額</th>
        </tr>
        <tr>
          <td>無料プラン</td>
          <td colspan="2" class="htbl-col-highlight-good">ずっと無料</td>
        </tr>
      </table>

      <div class="htbl-col-code htbl-col-code-good">
        <tr><br>
          <td>無料プラン</td><br>
          <td <span class="htbl-col-hl-green">colspan="2"</span>>ずっと無料</td><br>
          <span class="htbl-col-hl-green"><!-- 余分なtdは書かないのが正解 --></span><br>
        </tr>
      </div>
    </div>

  </div>
</div>
CSSコード表示
.htbl-col-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-col-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.htbl-col-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.htbl-col-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}
.htbl-col-table {
  border-collapse: collapse;
  margin-bottom: 15px;
  /* 飛び出しを分かりやすくするため幅を固定 */
  width: 300px; 
}
.htbl-col-table th, .htbl-col-table td {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}
.htbl-col-table th { background-color: #f1f3f5; }

/* 悪い例の飛び出しアピール */
.htbl-col-bad {
  /* テーブル自体の幅を超えてしまうことを許容する */
  table-layout: fixed;
  width: auto; 
}
.htbl-col-bad td:last-child {
  background-color: #f8d7da;
  color: #dc3545;
  font-weight: bold;
  border: 2px dashed #dc3545;
}
.htbl-col-highlight {
  background-color: #fff3cd;
  font-weight: bold;
}
.htbl-col-highlight-good {
  background-color: #d1e7dd;
  color: #0f5132;
  font-weight: bold;
}

.htbl-col-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.htbl-col-code-bad { border-left: 4px solid #dc3545; }
.htbl-col-code-good { border-left: 4px solid #198754; }
.htbl-col-hl-red { color: #e06c75; font-weight: bold; }
.htbl-col-hl-green { color: #98c379; font-weight: bold; }

縦の行を結合する

縦方向（下方向）に隣り合うセルを結合するには、rowspan属性を使用します。

例えば、縦に2つのセルを繋げたい場合は<td rowspan="2">と記述します。

同じカテゴリの項目が複数行に渡って続く場合（「関東」の中に「東京」「神奈川」があるなど）に便利です。

🏢 縦の結合（カテゴリ分け）
エリア 支店名
関東 東京本店
横浜支店
関西 大阪支店
<tr>
  <td rowspan=”2″>関東</td> <!– 2行分を陣取る –>
  <td>東京本店</td>
</tr>
<tr>
  <!– ここは上から降りてきているため省略！ –>
  <td>横浜支店</td>
</tr>

※「関東」のセルが下の行まで侵食しているため、2行目のHTMLコードには `` が1つしか存在しない点に注目してください。

HTMLコード表示
<div class="htbl-row-wrapper">
  
  <div class="htbl-row-demo-area">
    
    <div class="htbl-row-box">
      <div class="htbl-row-label">🏢 縦の結合（カテゴリ分け）</div>
      
      <table class="htbl-row-table">
        <tr>
          <th>エリア</th>
          <th>支店名</th>
        </tr>
        <tr>
          <td rowspan="2" class="htbl-row-highlight">関東</td>
          <td>東京本店</td>
        </tr>
        <tr>
          <td>横浜支店</td>
        </tr>
        <tr>
          <td>関西</td>
          <td>大阪支店</td>
        </tr>
      </table>

      <div class="htbl-row-code">
        <tr><br>
          <td <span class="htbl-row-hl-blue">rowspan="2"</span>>関東</td> <!-- 2行分を陣取る --><br>
          <td>東京本店</td><br>
        </tr><br>
        <tr><br>
          <span class="htbl-row-hl-note"><!-- ここは上から降りてきているため省略！ --></span><br>
          <td>横浜支店</td><br>
        </tr>
      </div>
      <p class="htbl-row-note">※「関東」のセルが下の行まで侵食しているため、2行目のHTMLコードには `<td>` が1つしか存在しない点に注目してください。</p>
    </div>

  </div>
</div>
CSSコード表示
.htbl-row-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-row-demo-area {
  display: flex;
  justify-content: center;
}
.htbl-row-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
}
.htbl-row-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
}
.htbl-row-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.htbl-row-table th, .htbl-row-table td {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}
.htbl-row-table th { background-color: #f1f3f5; width: 40%; }
.htbl-row-highlight {
  background-color: #e7f1ff;
  color: #084298;
  font-weight: bold;
}

.htbl-row-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.htbl-row-hl-blue { color: #61afef; font-weight: bold; }
.htbl-row-hl-note { color: #5c6370; font-style: italic; }

.htbl-row-note {
  font-size: 12px;
  color: #666;
  margin-top: 15px;
  line-height: 1.5;
}

複雑な結合と表のネスト

実務では、colspanとrowspanを同時に使った複雑な表を作成することがあります。

また、表のセル（<td>）の中に、別の<table>を入れることもHTMLの文法上は可能です。

🧩 縦と横を組み合わせた複雑な結合
2026年度 売上目標
上半期 下半期
Web事業部 5,000万円 8,000万円
<tr>
  <th rowspan=”2″></th>
  <th colspan=”2″>売上目標</th>
</tr>
<tr>
  <!– 1マス目は上から侵食されているため無し –>
  <th>上半期</th>
  <th>下半期</th>
</tr>

※左上の空白セルは縦に結合し、右側のタイトルは横に結合しています。これ以上複雑になる場合は、表自体の見直し（分割など）を検討してください。

HTMLコード表示
<div class="htbl-mix-wrapper">
  
  <div class="htbl-mix-demo-area">
    
    <div class="htbl-mix-box">
      <div class="htbl-mix-label">🧩 縦と横を組み合わせた複雑な結合</div>
      
      <table class="htbl-mix-table">
        <tr>
          <th rowspan="2" class="htbl-mix-empty"></th>
          <th colspan="2" class="htbl-mix-hl-col">2026年度 売上目標</th>
        </tr>
        <tr>
          <th>上半期</th>
          <th>下半期</th>
        </tr>
        <tr>
          <th>Web事業部</th>
          <td>5,000万円</td>
          <td>8,000万円</td>
        </tr>
      </table>

      <div class="htbl-mix-code">
        <tr><br>
          <th <span class="htbl-mix-text-blue">rowspan="2"</span>></th><br>
          <th <span class="htbl-mix-text-green">colspan="2"</span>>売上目標</th><br>
        </tr><br>
        <tr><br>
          <!-- 1マス目は上から侵食されているため無し --><br>
          <th>上半期</th><br>
          <th>下半期</th><br>
        </tr>
      </div>
      <p class="htbl-mix-note">※左上の空白セルは縦に結合し、右側のタイトルは横に結合しています。これ以上複雑になる場合は、表自体の見直し（分割など）を検討してください。</p>
    </div>

  </div>
</div>
CSSコード表示
.htbl-mix-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-mix-demo-area {
  display: flex;
  justify-content: center;
}
.htbl-mix-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.htbl-mix-label {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}
.htbl-mix-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.htbl-mix-table th, .htbl-mix-table td {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}
.htbl-mix-table th { background-color: #f1f3f5; }

/* 結合部分の装飾 */
.htbl-mix-empty { background-color: #e9ecef !important; }
.htbl-mix-hl-col {
  background-color: #d1e7dd !important;
  color: #0f5132;
}

.htbl-mix-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #6c757d;
}
.htbl-mix-text-blue { color: #61afef; font-weight: bold; }
.htbl-mix-text-green { color: #98c379; font-weight: bold; }

.htbl-mix-note {
  font-size: 12px;
  color: #666;
  margin-top: 15px;
  line-height: 1.5;
}

tableの幅・高さ・配置を調整する

HTMLの標準機能だけで作った表は、中のテキストの長さに合わせてブラウザが幅や高さを計算するため、潰れたり、無駄に間延びしたりと不格好なサイズになります。

美しい表組みを作るためには、CSSを使って表のレイアウトや画面内での位置をコントロールする技術が不可欠です。

tableの幅・高さ・配置を調整する
  • 表全体やセルごとの幅・高さを指定・固定する
  • 表やテキストを中央寄せ・右寄せにする
  • セル内の余白とセル間の隙間

表全体やセルごとの幅・高さを指定・固定する

表全体を画面いっぱいに広げたい時は、CSSでwidth: 100%;を指定します。

また、行の高さを広げたい場合はセル（thやtd）に対してpaddingを設定するのが基本です。

❌ 悪い例（文字の長さに幅が負ける）
項目名（幅30%指定） 値が入ります
長いデータが来た時 あああああああああああああああああああああああああああああああああああああああああああ
th { width: 30%; }
/* table-layoutを指定していないため、
   長文に押し出されて30%が無視されている */
⭕️ 良い例（fixedで幅を完全に固定）
項目名（幅30%指定） 値が入ります
長いデータが来た時 あああああああああああああああああああああああああああああああああああああああああああ
table {
  width: 100%;
  table-layout: fixed; /* 魔法のコード */
}
th { width: 30%; } /* これで絶対に30%になる */
HTMLコード表示
<div class="htbl-lay1-wrapper">
  
  <div class="htbl-lay1-demo-area">
    
    <div class="htbl-lay1-box">
      <div class="htbl-lay1-label" style="color:#dc3545;">❌ 悪い例（文字の長さに幅が負ける）</div>
      
      <div class="htbl-lay1-scroll">
        <table class="htbl-lay1-table htbl-lay1-bad">
          <tr>
            <th class="htbl-lay1-th-30">項目名（幅30%指定）</th>
            <td>値が入ります</td>
          </tr>
          <tr>
            <th class="htbl-lay1-th-30">長いデータが来た時</th>
            <td class="htbl-lay1-long-text">あああああああああああああああああああああああああああああああああああああああああああ</td>
          </tr>
        </table>
      </div>

      <div class="htbl-lay1-code htbl-lay1-code-bad">
        th { width: 30%; }<br>
        <span class="htbl-lay1-hl-red">/* table-layoutを指定していないため、<br>
           長文に押し出されて30%が無視されている */</span>
      </div>
    </div>

    <div class="htbl-lay1-box">
      <div class="htbl-lay1-label" style="color:#198754;">⭕️ 良い例（fixedで幅を完全に固定）</div>
      
      <table class="htbl-lay1-table htbl-lay1-good">
        <tr>
          <th class="htbl-lay1-th-30">項目名（幅30%指定）</th>
          <td>値が入ります</td>
        </tr>
        <tr>
          <th class="htbl-lay1-th-30">長いデータが来た時</th>
          <td class="htbl-lay1-long-text-good">あああああああああああああああああああああああああああああああああああああああああああ</td>
        </tr>
      </table>

      <div class="htbl-lay1-code htbl-lay1-code-good">
        table {<br>
          width: 100%;<br>
          <span class="htbl-lay1-hl-green">table-layout: fixed; /* 魔法のコード */</span><br>
        }<br>
        th { width: 30%; } /* これで絶対に30%になる */
      </div>
    </div>

  </div>
</div>
CSSコード表示
.htbl-lay1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.htbl-lay1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.htbl-lay1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

/* 悪い例の表が突き抜けた時、ブログ全体が崩れないように横スクロールさせる枠 */
.htbl-lay1-scroll {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 15px;
}

.htbl-lay1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

.htbl-lay1-table {
  width: 100%; /* 全体の幅を100%にする */
  border-collapse: collapse;
}

.htbl-lay1-table th, .htbl-lay1-table td {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
}
.htbl-lay1-table th { background-color: #f1f3f5; }

/* 共通でthに幅30%を指定 */
.htbl-lay1-th-30 {
  width: 30%;
}

/* ❌ 悪い例：長文でレイアウトが崩れる（table-layout: auto） */
.htbl-lay1-bad {
  table-layout: auto; /* これが初期値 */
}
.htbl-lay1-long-text {
  background-color: #f8d7da;
  color: #842029;
  white-space: nowrap !important; 
}

/* ⭕️ 良い例：幅が守られる */
.htbl-lay1-good {
  /* ★表のレイアウト崩れを防ぐ最強のCSS */
  table-layout: fixed !important; 
  margin-bottom: 15px;
}
.htbl-lay1-long-text-good {
  background-color: #d1e7dd;
  color: #0f5132;
  /* table-layout: fixed の下で確実に折り返すための指定 */
  word-break: break-all !important;
  white-space: normal !important;
}

.htbl-lay1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}

.htbl-lay1-code-bad { border-left: 4px solid #dc3545; }
.htbl-lay1-code-good { border-left: 4px solid #198754; }

.htbl-lay1-hl-red { color: #e06c75; font-weight: bold; }
.htbl-lay1-hl-green { color: #98c379; font-weight: bold; }

widthやheightの使い方を詳しく知りたい人は「【html&css】width（横幅）とheight（高さ）の指定とボックスモデル」を一読ください。

【html&css】width（横幅）とheight（高さ）の指定とボックスモデル

表やテキストを中央寄せ・右寄せにする

表のレイアウトを整える際、「セルの中の文字」の配置と「表（table）そのもの」の配置は、異なるCSSを使って制御します。

  • セル内のテキスト配置
    text-alignプロパティを使います。
    左寄せはleft、中央寄せはcenter、右寄せはrightです。
  • 表自体の配置（センタリング）
    表そのものを画面の真ん中に置きたい場合は、表の幅を固定した上で、margin: 0 auto;を使用します。
📐 表自体の中央寄せ と テキストの配置
左寄せ 中央寄せ 右寄せ
100 200 300
/* 1. 表自体を画面の中央に寄せる */
table {
  width: 80%; /* 100%だと中央寄せの意味がないため幅を絞る */
  margin: 0 auto; /* 左右の余白を自動にして中央に置く */
}

/* 2. セル内のテキストの配置を変える */
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

※昔の <table align="center"> は絶対に使わず、必ずCSSで制御してください。

HTMLコード表示
<div class="htbl-lay2-wrapper">
  
  <div class="htbl-lay2-demo-area">
    
    <div class="htbl-lay2-box">
      <div class="htbl-lay2-label">📐 表自体の中央寄せ と テキストの配置</div>
      
      <table class="htbl-lay2-table-center">
        <tr>
          <th class="htbl-lay2-txt-left">左寄せ</th>
          <th class="htbl-lay2-txt-center">中央寄せ</th>
          <th class="htbl-lay2-txt-right">右寄せ</th>
        </tr>
        <tr>
          <td class="htbl-lay2-txt-left">100</td>
          <td class="htbl-lay2-txt-center">200</td>
          <td class="htbl-lay2-txt-right">300</td>
        </tr>
      </table>

      <div class="htbl-lay2-code">
        <span class="htbl-lay2-hl-note">/* 1. 表自体を画面の中央に寄せる */</span><br>
        table {<br>
          width: 80%; /* 100%だと中央寄せの意味がないため幅を絞る */<br>
          <span class="htbl-lay2-hl-blue">margin: 0 auto;</span> /* 左右の余白を自動にして中央に置く */<br>
        }<br><br>
        <span class="htbl-lay2-hl-note">/* 2. セル内のテキストの配置を変える */</span><br>
        .left   { <span class="htbl-lay2-hl-green">text-align: left;</span> }<br>
        .center { <span class="htbl-lay2-hl-green">text-align: center;</span> }<br>
        .right  { <span class="htbl-lay2-hl-green">text-align: right;</span> }
      </div>
      <p class="htbl-lay2-note">※昔の <code><table align="center"></code> は絶対に使わず、必ずCSSで制御してください。</p>
    </div>

  </div>
</div>
CSSコード表示
.htbl-lay2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.htbl-lay2-demo-area {
  display: flex;
  justify-content: center;
}

.htbl-lay2-box {
  background-color: #e9ecef; /* 中央寄せが分かりやすいように親をグレーにする */
  border: 1px solid #ced4da;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.htbl-lay2-label {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

/* ★表自体の中央寄せ */
.htbl-lay2-table-center {
  width: 80%; /* 100%未満の幅を指定する */
  /* ここが表を中央に寄せるコード */
  margin: 0 auto; 
  border-collapse: collapse;
  background-color: #fff;
  margin-bottom: 20px;
}

.htbl-lay2-table-center th, .htbl-lay2-table-center td {
  border: 1px solid #adb5bd;
  padding: 10px;
  font-size: 14px;
}
.htbl-lay2-table-center th { background-color: #dee2e6; }

/* ★セル内のテキスト配置 */
.htbl-lay2-txt-left { text-align: left; }
.htbl-lay2-txt-center { text-align: center; }
.htbl-lay2-txt-right { text-align: right; }

.htbl-lay2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.htbl-lay2-hl-blue { color: #61afef; font-weight: bold; }
.htbl-lay2-hl-green { color: #98c379; font-weight: bold; }
.htbl-lay2-hl-note { color: #5c6370; font-style: italic; }

.htbl-lay2-note {
  font-size: 12px;
  color: #666;
  margin-top: 15px;
  line-height: 1.5;
  text-align: center;
}

セル内の余白とセル間の隙間

表のデザインを綺麗に見せるためには、「余白」のコントロールが重要です。

  • セル内の余白
    枠線と文字の間の隙間です。
    paddingプロパティをthやtdに対して指定します。
  • 表の外側の余白
    表と上下左右にある他の要素（見出しや段落など）との距離です。
    <table>タグ自体にmarginプロパティを指定します。
❌ 悪い例（初期状態の隙間とキツキツのセル）
項目名 セルの内側に余白がないため
非常に息苦しいデザインです。
<table cellspacing=”0″>
<!– HTMLの属性で余白を消すのは非推奨！ –>
⭕️ 良い例（CSSで美しく整えた表）
項目名 セルとセルの間の隙間が消え、
内側にはpaddingでゆとりがあります。
table {
  border-collapse: collapse; /* 隙間を消し一本線にする */
}
th, td {
  padding: 15px; /* セル内側の余白をしっかり取る */
}
HTMLコード表示
<div class="htbl-lay3-wrapper">
  
  <div class="htbl-lay3-demo-area">
    
    <div class="htbl-lay3-box">
      <div class="htbl-lay3-label" style="color:#dc3545;">❌ 悪い例（初期状態の隙間とキツキツのセル）</div>
      
      <table class="htbl-lay3-table-bad">
        <tr>
          <th>項目名</th>
          <td>セルの内側に余白がないため<br>非常に息苦しいデザインです。</td>
        </tr>
      </table>

      <div class="htbl-lay3-code htbl-lay3-code-bad">
        <table <span class="htbl-lay3-hl-red">cellspacing="0"</span>><br>
        <!-- HTMLの属性で余白を消すのは非推奨！ -->
      </div>
    </div>

    <div class="htbl-lay3-box">
      <div class="htbl-lay3-label" style="color:#198754;">⭕️ 良い例（CSSで美しく整えた表）</div>
      
      <table class="htbl-lay3-table-good">
        <tr>
          <th>項目名</th>
          <td>セルとセルの間の隙間が消え、<br>内側にはpaddingでゆとりがあります。</td>
        </tr>
      </table>

      <div class="htbl-lay3-code htbl-lay3-code-good">
        table {<br>
          <span class="htbl-lay3-hl-green">border-collapse: collapse;</span> /* 隙間を消し一本線にする */<br>
        }<br>
        th, td {<br>
          <span class="htbl-lay3-hl-green">padding: 15px;</span> /* セル内側の余白をしっかり取る */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.htbl-lay3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.htbl-lay3-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.htbl-lay3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.htbl-lay3-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* ❌ 悪い例：初期状態のシミュレーション */
.htbl-lay3-table-bad {
  width: 100%;
  border: 1px solid #999;
  /* border-collapseを指定しないと、枠線同士に隙間ができる */
  border-spacing: 2px; /* ブラウザ標準の隙間の再現 */
  margin-bottom: 15px;
}
.htbl-lay3-table-bad th, .htbl-lay3-table-bad td {
  border: 1px solid #999;
  /* paddingを指定しないとキツキツになる */
  padding: 2px;
  font-size: 13px;
  background-color: #f8d7da;
}

/* ⭕️ 良い例：基本装飾 */
.htbl-lay3-table-good {
  width: 100%;
  /* ★表の隙間を消し去る必須CSS */
  border-collapse: collapse;
  margin-bottom: 15px;
}
.htbl-lay3-table-good th, .htbl-lay3-table-good td {
  border: 1px solid #ccc;
  /* ★セル内側にゆとりを持たせる必須CSS */
  padding: 15px; 
  font-size: 14px;
  line-height: 1.6;
}
.htbl-lay3-table-good th { background-color: #e7f1ff; color: #084298; width: 30%;}
.htbl-lay3-table-good td { background-color: #fff; }

.htbl-lay3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.htbl-lay3-code-bad { border-left: 4px solid #dc3545; }
.htbl-lay3-code-good { border-left: 4px solid #198754; }

.htbl-lay3-hl-red { color: #e06c75; font-weight: bold; }
.htbl-lay3-hl-green { color: #98c379; font-weight: bold; }

paddingやmarginの使い方を詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

tableをおしゃれにデザイン・装飾する

Webサイトに合わせてユーザーに情報を分かりやすく伝えるには、表を装飾するスキルが不可欠です。

ここでは、線の引き方、見やすくする色の設定、表の角を丸くできない問題の解決策を解説します。

tableをおしゃれにデザイン・装飾する
  • 枠線・罫線の太さ・色・消す方法
  • 背景色・背景画像・文字色の変更
  • ストライプや角丸

枠線・罫線の太さ・色・消す方法

表の見た目を決定づける要素が枠線です。

borderプロパティを使って、線の太さ・種類・色をコントロールできます。

逆に、デザインによっては特定の線を消すことで、スッキリした表を作ることも可能です。

❌ 悪い例（隙間だらけの二重線）
名前 田中 太郎
部署 営業部
table, th, td {
  border: 1px solid #333;
}
/* border-collapse: collapse; を
   書き忘れるとこうなります！ */
⭕️ 良い例（横線だけのモダンな表）
名前 田中 太郎
部署 営業部
table {
  border-collapse: collapse;
}
th, td {
  /* 下線だけを引き、他は「線なし」にする */
  border-bottom: 1px solid #ddd;
}
HTMLコード表示
<div class="htbl-css1-wrapper">
  
  <div class="htbl-css1-demo-area">
    
    <div class="htbl-css1-box">
      <div class="htbl-css1-label" style="color:#dc3545;">❌ 悪い例（隙間だらけの二重線）</div>
      
      <table class="htbl-css1-table-bad">
        <tr>
          <th>名前</th>
          <td>田中 太郎</td>
        </tr>
        <tr>
          <th>部署</th>
          <td>営業部</td>
        </tr>
      </table>

      <div class="htbl-css1-code htbl-css1-code-bad">
        table, th, td {<br>
          border: 1px solid #333;<br>
        }<br>
        <span class="htbl-css1-hl-red">/* border-collapse: collapse; を<br>
           書き忘れるとこうなります！ */</span>
      </div>
    </div>

    <div class="htbl-css1-box">
      <div class="htbl-css1-label" style="color:#198754;">⭕️ 良い例（横線だけのモダンな表）</div>
      
      <table class="htbl-css1-table-good">
        <tr>
          <th>名前</th>
          <td>田中 太郎</td>
        </tr>
        <tr>
          <th>部署</th>
          <td>営業部</td>
        </tr>
      </table>

      <div class="htbl-css1-code htbl-css1-code-good">
        table {<br>
          <span class="htbl-css1-hl-green">border-collapse: collapse;</span><br>
        }<br>
        th, td {<br>
          /* 下線だけを引き、他は「線なし」にする */<br>
          <span class="htbl-css1-hl-green">border-bottom: 1px solid #ddd;</span><br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.htbl-css1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-css1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.htbl-css1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
}
.htbl-css1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

/* ❌ 悪い例：border-collapse忘れ */
.htbl-css1-table-bad {
  width: 100%;
  margin-bottom: 15px;
  /* border-collapse をあえて書かない */
}
.htbl-css1-table-bad th, .htbl-css1-table-bad td {
  border: 2px solid #dc3545; /* 失敗が目立つように太めの赤線 */
  padding: 10px;
  text-align: left;
}
.htbl-css1-table-bad th { background-color: #f8d7da; }

/* ⭕️ 良い例：横線だけのモダンデザイン */
.htbl-css1-table-good {
  width: 100%;
  margin-bottom: 15px;
  /* ★表の隙間をなくす必須コード */
  border-collapse: collapse; 
}
.htbl-css1-table-good th, .htbl-css1-table-good td {
  /* ★縦線を消し、下線だけを引く */
  border: none;
  border-bottom: 1px solid #ced4da;
  padding: 12px 10px;
  text-align: left;
}
.htbl-css1-table-good th {
  background-color: #f8f9fa;
  color: #333;
  width: 30%;
}

.htbl-css1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.htbl-css1-code-bad { border-left: 4px solid #dc3545; }
.htbl-css1-code-good { border-left: 4px solid #198754; }

.htbl-css1-hl-red { color: #e06c75; font-weight: bold; }
.htbl-css1-hl-green { color: #98c379; font-weight: bold; }

背景色・背景画像・文字色の変更

表を見やすくするには、見出し（<th>）とデータ（<td>）の違いをハッキリさせることが重要です。

background-colorを使って背景色を変えたり、colorを使って文字色を変えることで、ユーザーの視線を誘導します。

場合によっては、表全体にうっすらと背景画像を敷くことも可能です。

🎨 背景色と文字色のコントラスト
プラン 料金 特徴
Basic 無料 お試し利用に最適
Pro 1,980円 すべての機能が解放
/* ヘッダー行（上部）の見出し */
thead th {
  background-color: #084298; /* 濃い青 */
  color: #ffffff; /* 白文字に反転（必須） */
}

/* 左側の見出し */
tbody th {
  background-color: #e7f1ff; /* 薄い青 */
  color: #333; /* 文字は黒のままでOK */
}

※見出し（th）に色をつけるだけで、どこが情報の基準なのかが一目でわかるようになります。

HTMLコード表示
<div class="htbl-css2-wrapper">
  
  <div class="htbl-css2-demo-area">
    
    <div class="htbl-css2-box">
      <div class="htbl-css2-label">🎨 背景色と文字色のコントラスト</div>
      
      <table class="htbl-css2-table">
        <thead>
          <tr>
            <th>プラン</th>
            <th>料金</th>
            <th>特徴</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Basic</th>
            <td>無料</td>
            <td>お試し利用に最適</td>
          </tr>
          <tr>
            <th>Pro</th>
            <td>1,980円</td>
            <td>すべての機能が解放</td>
          </tr>
        </tbody>
      </table>

      <div class="htbl-css2-code">
        /* ヘッダー行（上部）の見出し */<br>
        thead th {<br>
          <span class="htbl-css2-hl-blue">background-color: #084298;</span> /* 濃い青 */<br>
          <span class="htbl-css2-hl-blue">color: #ffffff;</span> /* 白文字に反転（必須） */<br>
        }<br><br>
        /* 左側の見出し */<br>
        tbody th {<br>
          <span class="htbl-css2-hl-green">background-color: #e7f1ff;</span> /* 薄い青 */<br>
          color: #333; /* 文字は黒のままでOK */<br>
        }
      </div>
      <p class="htbl-css2-note">※見出し（th）に色をつけるだけで、どこが情報の基準なのかが一目でわかるようになります。</p>
    </div>

  </div>
</div>
CSSコード表示
.htbl-css2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-css2-demo-area {
  display: flex;
  justify-content: center;
}
.htbl-css2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.htbl-css2-label {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.htbl-css2-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.htbl-css2-table th, .htbl-css2-table td {
  border: 1px solid #dee2e6;
  padding: 12px;
  font-size: 14px;
  text-align: center;
}

/* 上部の見出し（濃い色＋白文字） */
.htbl-css2-table thead th {
  background-color: #084298;
  color: #ffffff; /* 視認性のために白にする */
}

/* 左側の見出し（薄い色＋黒文字） */
.htbl-css2-table tbody th {
  background-color: #e7f1ff;
  color: #084298;
}

.htbl-css2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.htbl-css2-hl-blue { color: #61afef; font-weight: bold; }
.htbl-css2-hl-green { color: #98c379; font-weight: bold; }

.htbl-css2-note {
  font-size: 13px;
  color: #666;
  margin-top: 15px;
  line-height: 1.5;
}

ストライプや角丸

データ行が何十行も続くような表では、行ごとに色を変えるストライプ柄にすると、ユーザーが「今どの行を読んでいるのか」を見失いづらくなります。

これは:nth-child(even)（偶数行）などを活用します。

また、表全体を柔らかい印象にするため、表の角を丸くするデザインも人気があります。

🦓 ストライプ ＆ 優しい角丸テーブル
ID タスク名 担当者
001 デザイン作成 山田
002 コーディング 佐藤
003 テスト確認 鈴木
/* 1. ストライプ（偶数行の色を変える） */
tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* 2. 角丸を確実に効かせる最強のハック（divで囲む） */
.table-wrap {
  border: 2px solid #0d6efd;
  border-radius: 8px;
  overflow: hidden; /* 中の表の直角を切り落とす */
}
table {
  border-collapse: collapse;
  border: none; /* 表自体の線は消して親のdivに任せる */
}

※表をdivタグで囲み、そのdivに対して角丸を設定することで、WordPressテーマの干渉を受けずに確実に美しい角丸テーブルを作ることができます。

HTMLコード表示
<div class="htbl-css3-wrapper">
  
  <div class="htbl-css3-demo-area">
    
    <div class="htbl-css3-box">
      <div class="htbl-css3-label">🦓 ストライプ ＆ 優しい角丸テーブル</div>
      
      <div class="htbl-css3-table-wrap">
        <table class="htbl-css3-table-round">
          <thead>
            <tr>
              <th>ID</th>
              <th>タスク名</th>
              <th>担当者</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>001</td>
              <td>デザイン作成</td>
              <td>山田</td>
            </tr>
            <tr>
              <td>002</td>
              <td>コーディング</td>
              <td>佐藤</td>
            </tr>
            <tr>
              <td>003</td>
              <td>テスト確認</td>
              <td>鈴木</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="htbl-css3-code">
        /* 1. ストライプ（偶数行の色を変える） */<br>
        tbody tr<span class="htbl-css3-hl-pink">:nth-child(even)</span> {<br>
          background-color: #f8f9fa;<br>
        }<br><br>
        /* 2. 角丸を確実に効かせる（divで囲む） */<br>
        <span class="htbl-css3-hl-yellow">.table-wrap</span> {<br>
          border: 2px solid #0d6efd;<br>
          border-radius: 8px;<br>
          <span class="htbl-css3-hl-yellow">overflow: hidden;</span> /* 中の表の直角を切り落とす */<br>
        }<br>
        table {<br>
          border-collapse: collapse;<br>
          border: none; /* 表自体の線は消して親のdivに任せる */<br>
        }
      </div>
      <p class="htbl-css3-note">※表をdivタグで囲み、そのdivに対して角丸を設定することで、確実に美しい角丸テーブルを作ることができます。</p>
    </div>

  </div>
</div>
CSSコード表示
.htbl-css3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-css3-demo-area {
  display: flex;
  justify-content: center;
}
.htbl-css3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.htbl-css3-label {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* ============================
   表を囲むdivに枠線と角丸をつける
   ============================ */
.htbl-css3-table-wrap {
  border: 2px solid #0d6efd;
  border-radius: 8px;
  /* ★超重要：中のセル(th,td)の直角な角がはみ出るので、親のdivで切り落とす */
  overflow: hidden; 
  margin-bottom: 20px;
  background-color: #fff;
}

.htbl-css3-table-round {
  width: 100% !important;
  /* div側で枠を作っているので、中のtableはcollapseでOK */
  border-collapse: collapse !important; 
  margin: 0 !important;
  border: none !important;
}

.htbl-css3-table-round th, .htbl-css3-table-round td {
  /* 外枠はdivにつけたので、セル同士の区切り線（下線）だけ引く */
  border: none !important;
  border-bottom: 1px solid #dee2e6 !important;
  padding: 12px !important;
  font-size: 14px;
  text-align: center;
}

/* 最後の行の下線を消して、外枠と被らないようにする */
.htbl-css3-table-round tbody tr:last-child td {
  border-bottom: none !important;
}

.htbl-css3-table-round thead th {
  background-color: #0d6efd !important;
  color: white !important;
}

/* ★ストライプ（偶数行の背景色を変える） */
.htbl-css3-table-round tbody tr:nth-child(even) td {
  background-color: #f1f3f5 !important;
}

.htbl-css3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.htbl-css3-hl-pink { color: #c678dd; font-weight: bold; }
.htbl-css3-hl-yellow { color: #e5c07b; font-weight: bold; }

.htbl-css3-note {
  font-size: 13px;
  color: #666;
  margin-top: 15px;
  line-height: 1.5;
}

tableのレスポンシブ化とスクロール

Web制作において、PCの画面で作った表をスマートフォンの画面でどう見せるかは頭を悩ませる問題の一つです。

大きな表をスマホに表示させようとすると、文字が潰れて読めなくなったり、画面の横幅を突き抜けてサイト全体のレイアウトを破壊します。

あらゆるデバイスで画面のサイズに合わせるためには、CSSを使ったレイアウト制御が必須です。

ここでは、実務で求められる「スクロール」と「固定」を解説します。

tableのレスポンシブ化とスクロール
  • 画面幅に合わせて横スクロールさせる
  • 見出し行や特定の列を固定する
  • セル内のテキストの改行・折り返しを制御する

画面幅に合わせて横スクロールさせる

スマホ対応における解決策が「表の幅はキープし、はみ出た部分を横スクロールさせる」という手法です。

横スクロールさせるには、<table>を<div>タグなどの「親の箱」で囲み、親の<div>に対してoverflow-x: auto;とwhite-space: nowrap;を指定するのがよいです。

↔️ スマホ対応：横スクロールテーブル
プラン名 初期費用 月額料金 データ容量 通話オプション サポート体制
スタンダード 3,000円 1,980円 20GB 5分かけ放題 チャットのみ
プレミアム 0円 3,980円 無制限 完全かけ放題 電話・対面
<!– HTMLの構造 –>
<div class=”scroll-wrap”>
  <table>…</table>
</div>

/* CSSの書き方 */
.scroll-wrap {
  overflow-x: auto; /* 横にはみ出たらスクロール */
  white-space: nowrap; /* 文字を途中で折り返させない */
}

※表をスワイプ（パソコンの場合は横スクロール）してみてください。サイト全体のレイアウトは崩れず、表の中だけが動きます。

HTMLコード表示
<div class="htbl-res1-wrapper">
  
  <div class="htbl-res1-demo-area">
    
    <div class="htbl-res1-box">
      <div class="htbl-res1-label">↔️ スマホ対応：横スクロールテーブル</div>
      
      <div class="htbl-res1-scroll-wrap">
        <table class="htbl-res1-table">
          <tr>
            <th>プラン名</th>
            <th>初期費用</th>
            <th>月額料金</th>
            <th>データ容量</th>
            <th>通話オプション</th>
            <th>サポート体制</th>
          </tr>
          <tr>
            <td>スタンダード</td>
            <td>3,000円</td>
            <td>1,980円</td>
            <td>20GB</td>
            <td>5分かけ放題</td>
            <td>チャットのみ</td>
          </tr>
          <tr>
            <td>プレミアム</td>
            <td>0円</td>
            <td>3,980円</td>
            <td>無制限</td>
            <td>完全かけ放題</td>
            <td>電話・対面</td>
          </tr>
        </table>
      </div>

      <div class="htbl-res1-code">
        <!-- HTMLの構造 --><br>
        <span class="htbl-res1-hl-blue"><div class="scroll-wrap"></span><br>
          <table>...</table><br>
        <span class="htbl-res1-hl-blue"></div></span><br><br>
        /* CSSの書き方 */<br>
        .scroll-wrap {<br>
          <span class="htbl-res1-hl-green">overflow-x: auto;</span> /* 横にはみ出たらスクロール */<br>
          <span class="htbl-res1-hl-green">white-space: nowrap;</span> /* 文字を途中で折り返させない */<br>
        }
      </div>
      <p class="htbl-res1-note">※表をスワイプ（パソコンの場合は横スクロール）してみてください。サイト全体のレイアウトは崩れず、表の中だけが動きます。</p>
    </div>

  </div>
</div>
CSSコード表示
.htbl-res1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-res1-demo-area {
  display: flex;
  justify-content: center;
}
.htbl-res1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  /* スマホの狭い画面をシミュレート */
  width: 100%;
  max-width: 350px; 
  border-radius: 4px;
}
.htbl-res1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #0d6efd;
}

/* ★横スクロールの親箱 */
.htbl-res1-scroll-wrap {
  width: 100%;
  overflow-x: auto; /* 横スクロールの許可 */
  -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロールさせる */
  margin-bottom: 15px;
  border: 1px solid #ccc;
  
  /* スクロールできることを視覚的に伝えるための薄い影（実務でよく使われるおもてなし） */
  box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.2); 
}

.htbl-res1-table {
  /* テーブル自体は中身に合わせて広がるようにする */
  width: max-content; 
  border-collapse: collapse;
}

.htbl-res1-table th, .htbl-res1-table td {
  border: 1px solid #ccc;
  padding: 12px;
  font-size: 14px;
  text-align: center;
  /* ★表の中の文字を折り返させないことで、幅を確保する */
  white-space: nowrap;
}
.htbl-res1-table th {
  background-color: #e7f1ff;
  color: #084298;
}

.htbl-res1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.htbl-res1-hl-blue { color: #61afef; font-weight: bold; }
.htbl-res1-hl-green { color: #98c379; font-weight: bold; }
.htbl-res1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

見出し行や特定の列を固定する

巨大な表をスクロールできるようにしたのは良いものの、下の方や右の方へスクロールしていくと、「この数字、何の項目だっけ？」と見出しが見えなくなって迷子になります。

そこで、上の見出し行や一番左の項目の列をスクロールしても画面に追従して固定させる技術が求められます。

position: sticky;を使えば数行で実装できます。

固定するセル（thやtd）には、background-color（背景色）を指定することです。

さらに、要素の重なり順を制御するz-indexを指定して、他のセルよりも手前に表示されるように設定するのがよいです。

📌 ヘッダー（上）＆ 左列の固定
社員名 4月 5月 6月 7月 8月
山田 太郎 達成未達達成達成達成
佐藤 花子 達成達成達成達成未達
鈴木 一郎 未達未達達成未達未達
田中 次郎 達成達成未達達成達成
/* 上のヘッダーを固定 */
.fixed-top {
  position: sticky;
  top: 0;
  background-color: #0d6efd;
  z-index: 10 !important; /* 強制的に手前へ */
}

/* 左の列を固定 */
.fixed-left {
  position: sticky;
  left: 0;
  background-color: #f8f9fa;
  z-index: 10 !important; /* 強制的に手前へ */
}
HTMLコード表示
<div class="htbl-res2-wrapper">
  
  <div class="htbl-res2-demo-area">
    
    <div class="htbl-res2-box">
      <div class="htbl-res2-label">📌 ヘッダー（上）＆ 左列の固定</div>
      
      <div class="htbl-res2-scroll-area">
        <table class="htbl-res2-table">
          <thead>
            <tr>
              <th class="htbl-res2-fixed-corner">社員名</th>
              <th class="htbl-res2-fixed-top">4月</th>
              <th class="htbl-res2-fixed-top">5月</th>
              <th class="htbl-res2-fixed-top">6月</th>
              <th class="htbl-res2-fixed-top">7月</th>
              <th class="htbl-res2-fixed-top">8月</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="htbl-res2-fixed-left">山田 太郎</th>
              <td>達成</td><td>未達</td><td>達成</td><td>達成</td><td>達成</td>
            </tr>
            <tr>
              <th class="htbl-res2-fixed-left">佐藤 花子</th>
              <td>達成</td><td>達成</td><td>達成</td><td>達成</td><td>未達</td>
            </tr>
            <tr>
              <th class="htbl-res2-fixed-left">鈴木 一郎</th>
              <td>未達</td><td>未達</td><td>達成</td><td>未達</td><td>未達</td>
            </tr>
            <tr>
              <th class="htbl-res2-fixed-left">田中 次郎</th>
              <td>達成</td><td>達成</td><td>未達</td><td>達成</td><td>達成</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="htbl-res2-code">
        /* 上のヘッダーを固定 */<br>
        .fixed-top {<br>
          position: sticky;<br>
          top: 0;<br>
          background-color: #0d6efd;<br>
          <span class="htbl-res2-hl-yellow">z-index: 10 !important; /* 強制的に手前へ */</span><br>
        }<br><br>
        /* 左の列を固定 */<br>
        .fixed-left {<br>
          position: sticky;<br>
          left: 0;<br>
          background-color: #f8f9fa;<br>
          <span class="htbl-res2-hl-yellow">z-index: 10 !important; /* 強制的に手前へ */</span><br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.htbl-res2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-res2-demo-area {
  display: flex;
  justify-content: center;
}
.htbl-res2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
}
.htbl-res2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #198754;
}

/* 縦横スクロール用の枠 */
.htbl-res2-scroll-area {
  width: 100%;
  height: 200px;
  overflow: auto; /* 縦横どちらもスクロール許可 */
  border: 1px solid #ccc;
  margin-bottom: 15px;
}

.htbl-res2-table {
  width: max-content !important;
  border-collapse: separate !important;
  border-spacing: 0 !important; /* separateの隙間を消す */
  margin: 0 !important;
}

.htbl-res2-table th, .htbl-res2-table td {
  border: 1px solid #dee2e6;
  padding: 10px 15px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}

/* 上のヘッダーの固定 */
.htbl-res2-fixed-top {
  position: sticky !important;
  top: 0 !important;
  background-color: #0d6efd !important; 
  color: white !important;
  z-index: 10 !important; 
  /* separateによる枠線の重なり調整 */
  border-top: none !important;
}

/* 左の列の固定 */
.htbl-res2-fixed-left {
  position: sticky !important;
  left: 0 !important;
  background-color: #f8f9fa !important; 
  z-index: 10 !important;
  border-left: none !important;
}

/* 左上の角の固定 */
.htbl-res2-fixed-corner {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  background-color: #0b5ed7 !important; 
  color: white !important;
  z-index: 20 !important; 
  border-top: none !important;
  border-left: none !important;
}

.htbl-res2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.htbl-res2-hl-pink { color: #c678dd; font-weight: bold; }
.htbl-res2-hl-yellow { color: #e5c07b; font-weight: bold; }

セル内のテキストの改行・折り返しを制御する

スマホの画面で表を綺麗に見せるには、セルの中のテキストの改行・折り返しをコントロールすることです。

  • 絶対に改行させない
    日付や金額、短い見出しなど、途中で切れると読みにくいものはwhite-space: nowrap;で1行にします。
  • 長文やURLを枠内で折り返す
    備考欄の長文や、英語の連続などは枠を押し広げないようにoverflow-wrap: break-word;を指定して折り返させます。

「固定したい短い情報」と「長くなる可能性がある情報」を明確に分け、クラスを使ってセルごとに改行ルールのメリハリをつけるのがよいです。

📝 折り返し（wrap）と禁止（nowrap）のメリハリ
日付 担当者 作業内容（詳細メモ）
2026/04/01 田中 太郎 本日はサーバーのメンテナンスを実施しました。エラーログ（https://example.com/very-long-error-log-url-test-12345）の確認も完了しています。
/* 日付など、絶対に改行させない列 */
.nowrap-cell {
  white-space: nowrap;
}

/* 備考欄など、長文を綺麗に折り返す列 */
.wrap-cell {
  min-width: 200px; /* ある程度の幅を確保する */
  white-space: normal; /* nowrapを打ち消す */
  overflow-wrap: break-word; /* URLなども強制折り返し */
}
HTMLコード表示
<div class="htbl-res3-wrapper">
  
  <div class="htbl-res3-demo-area">
    
    <div class="htbl-res3-box">
      <div class="htbl-res3-label">📝 折り返し（wrap）と禁止（nowrap）のメリハリ</div>
      
      <div class="htbl-res3-scroll-wrap">
        <table class="htbl-res3-table">
          <tr>
            <th>日付</th>
            <th>担当者</th>
            <th>作業内容（詳細メモ）</th>
          </tr>
          <tr>
            <td class="htbl-res3-nowrap">2026/04/01</td>
            <td class="htbl-res3-nowrap">田中 太郎</td>
            <td class="htbl-res3-wrap-text">
              本日はサーバーのメンテナンスを実施しました。エラーログ（https://example.com/very-long-error-log-url-test-12345）の確認も完了しています。
            </td>
          </tr>
        </table>
      </div>

      <div class="htbl-res3-code">
        /* 日付など、絶対に改行させない列 */<br>
        .nowrap-cell {<br>
          <span class="htbl-res3-hl-red">white-space: nowrap;</span><br>
        }<br><br>
        /* 備考欄など、長文を綺麗に折り返す列 */<br>
        .wrap-cell {<br>
          min-width: 200px; /* ある程度の幅を確保する */<br>
          <span class="htbl-res3-hl-green">white-space: normal;</span> /* nowrapを打ち消す */<br>
          <span class="htbl-res3-hl-green">overflow-wrap: break-word;</span> /* URLなども強制折り返し */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.htbl-res3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-res3-demo-area {
  display: flex;
  justify-content: center;
}
.htbl-res3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
}
.htbl-res3-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.htbl-res3-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #ccc;
  margin-bottom: 15px;
}

.htbl-res3-table {
  /* テーブル全体の基本ルールとしてnowrapをかける */
  white-space: nowrap; 
  border-collapse: collapse;
}

.htbl-res3-table th, .htbl-res3-table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  font-size: 13px;
}
.htbl-res3-table th { background-color: #f1f3f5; }

/* 日付や名前は改行禁止（すでに全体にかかっているので強調用） */
.htbl-res3-nowrap {
  background-color: #f8d7da; /* 分かりやすく赤色背景 */
  color: #842029;
}

/* ★長文の備考欄用の折り返し設定 */
.htbl-res3-wrap-text {
  /* 文字が読める最低限の幅を確保しておく */
  min-width: 250px; 
  /* 親のnowrapを上書きして、改行を許可する */
  white-space: normal; 
  /* 長いURLでも枠を突き破らないように強制折り返し */
  overflow-wrap: break-word; 
  
  background-color: #d1e7dd; /* 分かりやすく緑色背景 */
  color: #0f5132;
  line-height: 1.5;
}

.htbl-res3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.htbl-res3-hl-red { color: #e06c75; font-weight: bold; }
.htbl-res3-hl-green { color: #98c379; font-weight: bold; }

tableとdivとの使い分け

HTMLの<table>タグは、データをマス目に表示するだけでなく、JavaScriptと組み合わせることでWebアプリケーションのような動きを持たせられます。

ここでは、動的なテーブル操作の手法や便利な変換ツールの注意点、Web制作における「tableとdivの使い分け」について解説します。

tableとdivとの使い分け
  • JavaScriptのソート（並び替え）や行の追加
  • エクセルからの変換やジェネレーターの活用
  • div（Grid/Flexbox）との使い分け

divタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾

JavaScriptのソート（並び替え）や行の追加

商品一覧や会員リストなど、データ量が多い表ではユーザーがデータを並び替えられる機能や画面遷移なしでデータを追加する機能が求められます。

これらはHTMLとCSSでは実現できないため、JavaScriptを組み合わせて実装します。

⚡ 動的な行追加とソート機能
名前 ▼ 点数 ▼
鈴木85
佐藤92
// 行を追加する処理の基本
const tbody = document.getElementById(‘tbodyのID‘);
const newRow = tbody.insertRow(); // tbodyの中に追加！
newRow.innerHTML = `<td>${name}</td><td>${score}</td>`;

※「名前 ▼」や「点数 ▼」をクリックすると、JavaScriptがDOMを読み取って並び替えを行います。

HTMLコード表示
<div class="htbl-adv1-wrapper">
  
  <div class="htbl-adv1-demo-area">
    
    <div class="htbl-adv1-box">
      <div class="htbl-adv1-label">⚡ 動的な行追加とソート機能</div>
      
      <div class="htbl-adv1-form">
        <input type="text" id="htbl-adv1-input-name" placeholder="名前を入力">
        <input type="number" id="htbl-adv1-input-score" placeholder="点数を入力">
        <button type="button" onclick="addRow()" class="htbl-adv1-btn">追加</button>
      </div>

      <table class="htbl-adv1-table" id="htbl-adv1-myTable">
        <thead>
          <tr>
            <th onclick="sortTable(0)" class="htbl-adv1-sortable">名前 ▼</th>
            <th onclick="sortTable(1)" class="htbl-adv1-sortable">点数 ▼</th>
          </tr>
        </thead>
        <tbody id="htbl-adv1-tbody">
          <tr><td>鈴木</td><td>85</td></tr>
          <tr><td>佐藤</td><td>92</td></tr>
        </tbody>
      </table>

      <div class="htbl-adv1-code">
        // 行を追加する処理の基本<br>
        const tbody = document.getElementById('<span class="htbl-adv1-hl-blue">tbodyのID</span>');<br>
        const newRow = tbody.<span class="htbl-adv1-hl-green">insertRow()</span>; // tbodyの中に追加！<br>
        newRow.innerHTML = `<td>${name}</td><td>${score}</td>`;
      </div>
      <p class="htbl-adv1-note">※「名前 ▼」や「点数 ▼」をクリックすると、JavaScriptがDOMを読み取って並び替えを行います。</p>
    </div>

  </div>
</div>
CSSコード表示
.htbl-adv1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-adv1-demo-area {
  display: flex;
  justify-content: center;
}
.htbl-adv1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
}
.htbl-adv1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #d63384;
}

.htbl-adv1-form {
  display: flex;
  gap: 5px;
  margin-bottom: 15px;
}
.htbl-adv1-form input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 0;
}
.htbl-adv1-btn {
  background-color: #d63384;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.htbl-adv1-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}
.htbl-adv1-table th, .htbl-adv1-table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: center;
}
.htbl-adv1-table th {
  background-color: #f1f3f5;
}
.htbl-adv1-sortable {
  cursor: pointer;
  user-select: none;
}
.htbl-adv1-sortable:hover {
  background-color: #e2e6ea;
}

.htbl-adv1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.htbl-adv1-hl-blue { color: #61afef; font-weight: bold; }
.htbl-adv1-hl-green { color: #98c379; font-weight: bold; }
.htbl-adv1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }
JavaScriptコード表示
// 行を追加する関数
function addRow() {
  const nameInput = document.getElementById('htbl-adv1-input-name');
  const scoreInput = document.getElementById('htbl-adv1-input-score');
  if(!nameInput.value || !scoreInput.value) {
    alert('名前と点数を両方入力してください');
    return;
  }
  const tbody = document.getElementById('htbl-adv1-tbody');
  const newRow = tbody.insertRow();
  newRow.innerHTML = `<td>${nameInput.value}</td><td>${scoreInput.value}</td>`;
  
  // 入力欄をクリア
  nameInput.value = '';
  scoreInput.value = '';
}

// 簡易的なソート関数
function sortTable(colIndex) {
  const table = document.getElementById('htbl-adv1-myTable');
  const tbody = document.getElementById('htbl-adv1-tbody');
  let rows = Array.from(tbody.rows);
  let isAscending = table.getAttribute('data-sort-dir') === 'asc';
  
  rows.sort((a, b) => {
    let valA = a.cells[colIndex].textContent;
    let valB = b.cells[colIndex].textContent;
    // 数値なら数値として比較
    if(!isNaN(valA) && !isNaN(valB)) {
      return isAscending ? valB - valA : valA - valB;
    }
    return isAscending ? valB.localeCompare(valA) : valA.localeCompare(valB);
  });

  // 方向を切り替えて再追加
  table.setAttribute('data-sort-dir', isAscending ? 'desc' : 'asc');
  rows.forEach(row => tbody.appendChild(row));
}

エクセルからの変換やジェネレーターの活用

何十行もある料金表やスペック表を手作業で<tr>や<td>と打ち込んでいくのは非効率です。

実務では、Excelやスプレッドシートで作成した表のデータをHTMLに変換できるオンライン変換ツールを積極的に活用します。

このインラインスタイルをWebサイトに貼り付けると、WordPressテーマのCSSが効かなくなり、スマホで見た時に幅が固定されて画面を突き破るなど修復不可能なレイアウト崩壊を引き起こします。

ジェネレーターを使う時は、設定で「インラインスタイルを出力しない」にチェックを入れるか、出力されたコードからstyle="..."の部分を削除してから使用してください。

❌ 悪い例（ジェネレーターの罠）
<!– 幅や色が直書きされており、CSSで上書き不能 –>
<table style=”width: 800px; border: none;”>
  <tr>
    <td style=”background-color: yellow;”>商品A</td>
  </tr>
</table>

※幅が800pxに固定されているため、スマホ（幅400pxなど）で見た瞬間に画面を突き破ってバグります。

⭕️ 良い例（クリーンなHTML）
<!– 装飾は一切せず、classだけを付与する –>
<table class=”product-table”>
  <tr>
    <td>商品A</td>
  </tr>
</table>

<!– デザインは外部CSSに任せる！ –>

※ジェネレーターを使う目的は「構造（trやtd）のタイピングをサボるため」であり、デザインまで任せてはいけません。

HTMLコード表示
<div class="htbl-adv2-wrapper">
  
  <div class="htbl-adv2-demo-area">
    
    <div class="htbl-adv2-box">
      <div class="htbl-adv2-label" style="color:#dc3545;">❌ 悪い例（ジェネレーターの罠）</div>
      
      <div class="htbl-adv2-code htbl-adv2-code-bad">
        <!-- 幅や色が直書きされており、CSSで上書き不能 --><br>
        <table <span class="htbl-adv2-hl-red">style="width: 800px; border: none;"</span>><br>
          <tr><br>
            <td <span class="htbl-adv2-hl-red">style="background-color: yellow;"</span>>商品A</td><br>
          </tr><br>
        </table>
      </div>
      <p class="htbl-adv2-note">※幅が800pxに固定されているため、スマホ（幅400pxなど）で見た瞬間に画面を突き破ってバグります。</p>
    </div>

    <div class="htbl-adv2-box">
      <div class="htbl-adv2-label" style="color:#198754;">⭕️ 良い例（クリーンなHTML）</div>
      
      <div class="htbl-adv2-code htbl-adv2-code-good">
        <!-- 装飾は一切せず、classだけを付与する --><br>
        <table <span class="htbl-adv2-hl-green">class="product-table"</span>><br>
          <tr><br>
            <td>商品A</td><br>
          </tr><br>
        </table><br><br>
        <!-- デザインは外部CSSに任せる！ -->
      </div>
      <p class="htbl-adv2-note" style="color:#198754;">※ジェネレーターを使う目的は「構造（trやtd）のタイピングをサボるため」であり、デザインまで任せてはいけません。</p>
    </div>

  </div>
</div>
CSSコード表示
.htbl-adv2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-adv2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.htbl-adv2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.htbl-adv2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
}

.htbl-adv2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.htbl-adv2-code-bad { border-left: 4px solid #dc3545; }
.htbl-adv2-code-good { border-left: 4px solid #198754; }

.htbl-adv2-hl-red { color: #e06c75; font-weight: bold; text-decoration: underline; }
.htbl-adv2-hl-green { color: #98c379; font-weight: bold; }

.htbl-adv2-note {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
  line-height: 1.5;
}

div（Grid/Flexbox）との使い分け

現在、レイアウトは<div>とCSS GridやFlexboxを使って行います。

しかし、「データの表組み（スペック表、料金表、カレンダーなど）」を表現するために<table>を使うのは、現在でもありdivで代用してはいけません。

検索エンジンに「これは整理されたデータです」と正しく伝えるには<table>が必須だからです。

  • <table>を使うべき時
    行と列に意味がある「マトリクス状のデータ」を表現する時。（例：エクセルで管理するようなデータ）
  • <div>(Grid/Flexbox) を使うべき時
    PCでは横並びだが、スマホではカード型にして縦に積むなど、画面サイズによって表示方法を変えたい場合。
📊 データを比較するなら「table」
A社B社
価格1,000円1,200円
納期翌日3日後

※縦と横の「交差する部分」に意味があるデータは、絶対にtableタグを使います。SEO的にもこれが正解です。

📱 柔軟な配置に変えるなら「div (Grid)」
Basic
1,000円
Pro
2,500円

※スマホでは縦積み、PCでは横並びの「カード型レイアウト」にする場合などは、tableではなくdivとCSS Grid（またはFlexbox）を使用します。

HTMLコード表示
<div class="htbl-adv3-wrapper">
  
  <div class="htbl-adv3-demo-area">
    
    <div class="htbl-adv3-box">
      <div class="htbl-adv3-label" style="color:#0d6efd;">📊 データを比較するなら「table」</div>
      
      <table class="htbl-adv3-table">
        <tr>
          <th></th><th>A社</th><th>B社</th>
        </tr>
        <tr>
          <th>価格</th><td>1,000円</td><td>1,200円</td>
        </tr>
        <tr>
          <th>納期</th><td>翌日</td><td>3日後</td>
        </tr>
      </table>
      <p class="htbl-adv3-note">※縦と横の「交差する部分」に意味があるデータは、絶対にtableタグを使います。SEO的にもこれが正解です。</p>
    </div>

    <div class="htbl-adv3-box">
      <div class="htbl-adv3-label" style="color:#d63384;">📱 柔軟な配置に変えるなら「div (Grid)」</div>
      
      <div class="htbl-adv3-grid">
        <div class="htbl-adv3-card">
          <div class="htbl-adv3-card-title">Basic</div>
          <div class="htbl-adv3-card-price">1,000円</div>
        </div>
        <div class="htbl-adv3-card" style="background-color: #ffe6f0;">
          <div class="htbl-adv3-card-title">Pro</div>
          <div class="htbl-adv3-card-price" style="color:#d63384;">2,500円</div>
        </div>
      </div>
      <p class="htbl-adv3-note" style="color:#d63384;">※スマホでは縦積み、PCでは横並びの「カード型レイアウト」にする場合などは、tableではなくdivとCSS Grid（またはFlexbox）を使用します。</p>
    </div>

  </div>
</div>
CSSコード表示
.htbl-adv3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.htbl-adv3-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.htbl-adv3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.htbl-adv3-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* tableのスタイル */
.htbl-adv3-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}
.htbl-adv3-table th, .htbl-adv3-table td {
  border: 1px solid #dee2e6;
  padding: 8px;
  text-align: center;
  font-size: 14px;
}
.htbl-adv3-table th { background-color: #e7f1ff; color: #084298; }

/* Gridのスタイル */
.htbl-adv3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PCでは2列 */
  gap: 15px;
  margin-bottom: 10px;
}
/* スマホサイズのシミュレーション（画面幅が狭いと1列になるイメージ） */
@media (max-width: 400px) {
  .htbl-adv3-grid {
    grid-template-columns: 1fr; /* スマホでは縦に積む */
  }
}

.htbl-adv3-card {
  border: 1px solid #dee2e6;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  background-color: #f8f9fa;
}
.htbl-adv3-card-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}
.htbl-adv3-card-price {
  font-size: 20px;
  font-weight: bold;
}

.htbl-adv3-note {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
  line-height: 1.5;
}

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 基本構造
    表全体を<table>、行を<tr>、見出しセルを<th>、データセルを<td>で構築する。
  • グループ化
    タイトルは<table>直下の<caption>に書き、ヘッダー行は<thead>、データ行は<tbody>でまとめる。
  • セル結合
    横結合はcolspan、縦結合はrowspan を使い、結合によって押し出されたセルはHTML上から削除する。
  • レイアウト固定
    長文によって表の幅が崩れるのを防ぐため、CSSでtable-layout: fixed;を指定する。
  • 非推奨の属性
    alignやcellspacingなど、見た目を操作するHTMLタグの属性は廃止予定のため、CSSで指定する。
  • 隙間の削除
    デフォルトの二重線やセル間の隙間を消すには、CSSでborder-collapse: collapse;を指定する。
  • 角丸のハック
    collapse状態では角丸（border-radius）が効かないため、表を<div>で囲み、親の<div>に対して角丸とoverflow: hidden;を指定する。
  • 横スクロール
    スマホ対応として表を横スクロールさせる場合、<table>自体ではなく、表を囲んだ親の<div>にoverflow-x: auto;を指定する。
  • 見出しの固定
    スクロール時にヘッダーなどを固定するにはposition: sticky;を使い、文字透けを防ぐために背景色とz-indexをセットで設定する。
  • divとの使い分け
    Webサイトの「レイアウト枠」としてtableを使うのはNGだが、「意味のあるデータ群（表）」を表現する際はtableを使うのがSEOの観点からよい。

よくある質問（FAQ）

HTMLで基本的な表を作るにはどのタグを使いますか？

表全体を囲む<table>、横の行を作る<tr>、見出しのセルを作る<th>、通常のデータセルを作る<td>の4つのタグを組み合わせて作ります。

「まず<tr>で行を作り、その中に<th>や<td>を横に並べていく」という順番で記述していくのが基本ルールです。

セルとセルを結合するにはどうすればいいですか？

横方向（列）に繋げたい場合はcolspan属性、縦方向（行）に繋げたい場合はrowspan属性を<th>や<td>の中に記述します。

結合する際、忘れてはいけないのが「結合して陣取った分のセルは、HTMLのコード上から削除する」ということです。

これを忘れると表のレイアウトが崩壊します。

表の枠線がダサい二重線になってしまいます。1本の綺麗な線にするには？

ブラウザの初期設定ではセル同士に隙間があるため、枠線を引くと二重線になります。

これを1本線にするには、HTMLに直接属性を書くのではなく、CSSで<table>タグに対してborder-collapse: collapse;を指定してください。

表自体を画面の中央に配置するにはどう書きますか？

古い解説記事にある<table align="center">という書き方は現在「非推奨（廃止予定）」となっており、使ってはいけません。

正しくは、CSSを使って表の幅を指定した上で、左右の余白を自動計算するmargin: 0 auto;を指定します。

これで表そのものが画面の中央に配置されます。

スマホで見たときに表がはみ出したり、レイアウトが崩れたりするのを防ぐには？

スマホの画面に表を収めようとすると文字が潰れるため、「表はそのままのサイズを保ち、はみ出た部分を横スクロールさせる」のが安全なスマホ対応です。

実装するには、<table>を<div>タグで囲み、親の<div>に対してoverflow-x: auto;とwhite-space: nowrap;を指定します。

これでサイト全体を崩すことなく、表の中だけをスクロールさせられます。

HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次