table、tr、td、th
行、データセル、見出しセルを使って基本的なテーブルを作成します。
「table、tr、td、th」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
HTMLテーブル
テーブルは、データを行と列で表示します。ページレイアウトではなく、表形式のデータに使います。
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Alice</td>
<td>95</td>
</tr>
<tr>
<td>Bob</td>
<td>87</td>
</tr>
</table>table、tr、td要素
テーブルの基本要素：
<table>— テーブルのコンテナー<tr>— テーブルの行<td>— テーブルのデータセル<th>— テーブルの見出しセル（デフォルトで太字・中央揃え）
thとtdの違い
見出しセルには<th>を使います。<th>には意味論的な意味があるためです：
<table>
<tr>
<th>Language</th> <!-- header: bold + centered by default -->
<th>Year Created</th>
<th>Type</th>
</tr>
<tr>
<td>HTML</td> <!-- data cell -->
<td>1991</td>
<td>Markup</td>
</tr>
</table>基本的なテーブル構造
最小限ですが完全なテーブル：
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Widget Pro</td>
<td>$49.99</td>
<td>In Stock</td>
</tr>
<tr>
<td>Widget Lite</td>
<td>$19.99</td>
<td>Out of Stock</td>
</tr>
</table>CSSによるテーブルの境界線
ブラウザーはデフォルトでは、境界線なしでテーブルを表示します。CSSで追加します：
table {
border-collapse: collapse; /* merge double borders into one */
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 0.75rem 1rem;
text-align: left;
}
th {
background-color: #f5f5f5;
font-weight: 600;
}テーブルをレイアウトに使わない理由
1990年代には、ページレイアウトにテーブルが使われていました。これは現在では古く、問題のある方法です：
- スクリーンリーダーはテーブルをデータとして解釈するため、レイアウト用テーブルはユーザーを混乱させます
- テーブルは小さな画面では柔軟に対応できません
- CSS GridとFlexboxによって、レイアウトに必要なすべての用途が置き換えられました
<table>は実際の表形式データにのみ使います
レスポンシブなテーブル
テーブルは小さな画面からはみ出します。横スクロールできるように、テーブルをラップします：
<div class="table-wrapper" style="overflow-x: auto;">
<table>
<!-- table content -->
</table>
</div>
/* Or use CSS: */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}空のセル
空のセルは意図的に扱います：
<tr>
<td>Alice</td>
<td>95</td>
<td></td> <!-- Empty: renders blank -->
</tr>
/* CSS to style empty cells */
td:empty::before {
content: '—';
color: #999;
}theadとtbodyのプレビュー
テーブルでは、<thead>と<tbody>を使って見出し行とデータ行を分けます。詳しくは次のレッスンで説明します：
<table>
<thead>
<tr><th>Name</th><th>Score</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>95</td></tr>
</tbody>
</table>colとcolgroupによる列のスタイル設定
<colgroup>と<col>を使うと、列全体にスタイルを適用できます：
<table>
<colgroup>
<col style="width: 200px; background: #f9f9f9;">
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
<tr>
<th>Name</th>
<th>Score</th>
<th>Grade</th>
</tr>
</table>CSSによるゼブラストライプ
読みやすくするために、行の色を交互に変えます：
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #e3f2fd;
}
/* nth-child(even) for even rows instead */確認問題
テーブルにおけるtdとthの違いは何ですか？
振り返り：table、tr、td、th
テーブルの基本：
<table>— テーブルのコンテナー<tr>— テーブルの行<td>— データセル<th>— 見出しセル（意味論的な要素で、デフォルトでは太字）- 境界線をきれいに表示するには、
border-collapse: collapseを使います - テーブルはデータ専用であり、ページレイアウトには使いません
よくある質問
「table、tr、td、th」レッスンは無料ですか？
はい。「table、tr、td、th」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「table、tr、td、th」で何を学びますか？
行、データセル、見出しセルを使って基本的なテーブルを作成します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「table、tr、td、th」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。