Menu
CoddyTech

テーブルの基本

CoddyのHTMLジャーニー「基礎」セクションの一部。レッスン 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列の表を使用しています。最初の行には見出しセルがあり、その後の行には通常のデータセルがあります。この構造により、読みやすく理解しやすいシンプルなグリッドレイアウトが作成されます。

challenge icon

チャレンジ

簡単

次の構造を持つテーブルを含むHTMLドキュメントを作成してください。

  1. テーブルを定義する<table>タグ。
  2. 2つのヘッダーセル(<th>)を持つ、ヘッダー用のテーブル行(<tr>)。最初のヘッダーセルにはName、2つ目にはAgeと記述します。
  3. 2つのデータセル(<td>)を持つテーブル行(<tr>)。最初のセルにはJohn、2つ目には30と記述します。
  4. 2つのデータセル(<td>)を持つ、もう1つのテーブル行(<tr>)。最初のセルにはJane、2つ目には25と記述します。

自分で試してみよう

<!DOCTYPE html>
<html>
    <body>
        <!-- ここにコードを書いてください -->
    </body>
</html>
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

基礎のすべてのレッスン

自分で練習してみよう: Webプレイグラウンド