学ぶ 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スタイルを追加します。

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

CSSについてさらに学びたい場合は、 CSS Fundamentals コースをご覧ください。