学ぶ HTMLでのテーブルの作成と構造化 | HTMLフォームとユーザー入力

メニューを表示するにはスワイプしてください

テーブルは、スケジュール、カレンダー、財務記録、メニュー、価格表などの構造化されたデータの表示に使用。HTML にはテーブルを作成するための複数の要素が用意されている。

主なテーブル要素：

<table>：テーブルのコンテナ；
<tr>：行；
<th>：ヘッダーセル（太字、中央揃え）；
<td>：通常のデータセル。

以下に、シンプルなメニューテーブルを段階的に作成。

ステップ 1: HTML構造の設定

ページの基本的なHTML構造を作成します:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

ステップ 2: テーブルの定義

<body>要素内に、テーブルを定義するために<table>タグを追加します:

<table>
  <!-- Table content will go here -->
</table>

ステップ 3: テーブルキャプションの追加（任意）

テーブルにタイトルを付けたい場合は、<caption>タグを使用できます:

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

ステップ4：テーブルヘッダーの作成

次に、<thead> 要素内にテーブルヘッダーを追加します。各ヘッダーは <th> タグで定義されます：

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

ステップ5：テーブルにデータを入力

<tbody> 要素でテーブル行を囲み、<td> タグでデータを含むセルを定義します：

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>

完全なコード

すべての要素の関係性が明確になるよう、各要素をよく確認してください。

index.html

index.css

注意

デフォルトでは、HTMLテーブルには特定の視覚的スタイルがありません。テーブルの外観をカスタマイズするには、別のCSSファイルやHTMLファイルの<style>セクション内の<head>タグにCSSスタイルを追加します。

ただし、現時点ではHTMLのみに集中するため、CSSについて深く学ぶ必要はありません。 CSSスタイリングなしのテーブルの見た目を確認したい場合は、CSSスタイルをインポートしている4行目：<link rel="stylesheet" href="index.css" /> を削除してください。

1. ウェブページ上でテーブルを定義するために使用されるHTML要素は何ですか？

2. テーブル内の行を定義するために使用されるHTML要素はどれですか？

3. HTMLテーブルにおける`<th>`要素の目的は何ですか？

すべて明確でしたか？

フィードバックありがとうございます！

セクション 1. 章 20

AIに質問する

何でも質問するか、提案された質問の1つを試してチャットを始めてください