テーブルの基本
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 48/60。
HTMLにおいて、テーブルはデータを行と列に整理する方法です。テーブルは、スケジュール、統計、またはグリッド形式で提示できるその他の種類の情報など、構造化された形式でデータを表示するために一般的に使用されます。テーブルを作成するには、<table>タグを、テーブルの行を表す<tr>、テーブルのデータ（セル）を表す<td>、テーブルの見出しを表す<th>などの他のタグと一緒に使用します。
HTMLテーブルの基本的な構造は以下の通りです：
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table><table>: テーブルを定義するタグです。
<tr>: テーブルの行を定義するタグです。
<th>: ヘッダーセルを定義するタグです。ヘッダーセルは通常、列や行のタイトルに使用され、デフォルトで太字で表示されます。
<td>: テーブル内の標準的なセルを定義するタグです。
このテーブルがブラウザでどのようにレンダリングされるかを以下に示します：
| ヘッダー 1 | ヘッダー 2 |
|---|---|
| 行 1、セル 1 | 行 1、セル 2 |
| 行 2、セル 1 | 行 2、セル 2 |
この例では、2行2列のテーブルがあります。最初の行にはヘッダーセルが含まれ、続く行には通常のデータセルが含まれます。この構造により、読みやすく理解しやすいシンプルなグリッドレイアウトが作成されます。
チャレンジ
簡単次の構造を持つテーブルを含むHTMLドキュメントを作成してください：
- テーブルを定義するための
<table>タグ。 - 2つのヘッダーセル（
<th>）を持つヘッダー用のテーブル行（<tr>）。最初のヘッダーセルは "Name"、2番目は "Age" とします。 - 2つのデータセル（
<td>）を持つテーブル行（<tr>）。最初のセルは "John"、2番目は "30" とします。 - 2つのデータセル（
<td>）を持つもう一つのテーブル行（<tr>）。最初のセルは "Jane"、2番目は "25" とします。
チートシート
HTMLのテーブルは、<table>タグを使用してデータを行と列に整理します。
<table>: テーブルを定義します<tr>: テーブルの行を定義します<th>: ヘッダーセルを定義します（デフォルトで太字で表示されます）<td>: 標準的なデータセルを定義します
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを書いてください -->
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
