LabEx
ログイン登録

基本属性を持つ HTML テーブルを作成する

CSSBeginner
オンラインで実践に進む

はじめに

この実験では、学生たちは基本的な HTML テーブルタグと属性を使って HTML テーブルを作成し操作する方法を学びます。この実験では、HTML テーブルのコア構造を理解することに焦点が当てられており、<table>、<tr>、<td>、<th>のような必須タグが含まれており、これらは Web ページ上で構造化されたグリッド形式でデータを整理し提示するために不可欠です。

参加者は、基本的なテーブルの作成、ヘッダーとボディセクションの追加、colspan と rowspan を使ったセルのマージ、および基本的なスタイリング属性の適用を含む包括的な学習コースを通じて進歩します。実験が終了するまでに、学生たちは構造的に整った HTML テーブルを構築し、HTML テーブル要素とそれに関連する属性を使ってデータを効果的に表現する方法を理解する実践的なスキルを身につけるでしょう。

HTML テーブルの構造と基本的なタグを理解する

このステップでは、HTML テーブルを作成するために使用される基本構造と基本タグを学びます。HTML テーブルは、Web ページ上で構造化されたグリッド形式でデータを整理し表示するために不可欠です。

HTML テーブルは、いくつかの重要なタグを使用して作成されます。

  • <table>：テーブル全体のメインコンテナ
  • <tr>：テーブルの行を定義します
  • <td>：標準的なテーブルセル（データセル）を定義します
  • <th>：テーブルのヘッダーセルを定義します

これらの基本的なテーブルタグを示すために、簡単な例を作成しましょう。WebIDE を開き、~/projectディレクトリにbasic_table.htmlという名前の新しいファイルを作成します。

touch ~/project/basic_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic HTML Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>San Francisco</td>
      </tr>
    </table>
  </body>
</html>

テーブル構造を分解してみましょう。

  1. <table border="1">は、表示可能な境界線付きのテーブルコンテナを作成します。border属性は省略可能です。
  2. 最初の<tr>は、列タイトル用の<th>ヘッダーセルを含んでいます。
  3. その後の<tr>要素は、実際のコンテントを持つ<td>データセルを含んでいます。

注：WebIDE で HTML ファイルをプレビューする方法について詳しく学ぶ。

HTML table structure example

忘れないでください。

  • 各<tr>は、テーブルの 1 行を表します。
  • <th>は、ヘッダーセル（通常は太字で中央揃え）に使用されます。
  • <td>は、標準的なデータセルに使用されます。
  • border属性は、テーブル構造を視覚化するのに役立ちます（実際のアプリケーションでは CSS を使用することが好ましいですが）。

行と列を持つ単純なテーブルを作成する

このステップでは、複数の行と列を持つより複雑なテーブルを作成する方法を学びます。前のステップを基に、異なる行数と列数のテーブルをどのように構築するかを検討し、情報を効果的に表示します。

WebIDE を開き、~/projectディレクトリにproduct_table.htmlという名前の新しいファイルを作成します。複数の行と列を持つテーブルの作成方法を示すために、商品在庫テーブルを作成します。

touch ~/project/product_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Product Inventory Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Product ID</td>
        <td>Product Name</td>
        <td>Price</td>
        <td>Quantity</td>
      </tr>
      <tr>
        <td>001</td>
        <td>Laptop</td>
        <td>$999.99</td>
        <td>50</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Smartphone</td>
        <td>$599.99</td>
        <td>75</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Tablet</td>
        <td>$299.99</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>

複数の行と列を持つテーブルを作成する際のポイント：

  1. 各<tr>（テーブルの行）は、テーブル内の水平方向の行を表します。
  2. 各<tr>の中には、複数の<td>（テーブルデータ）要素があり、列を作成します。
  3. 各<tr>内の<td>要素の数が列数を決定します。
  4. 一貫したレイアウトのために、すべての行は同じ列数を持つ必要があります。
  5. border属性は、テーブル構造を視覚化するのに役立ちます。

次のように 4 列のテーブルを作成したことに注目してください。

  • 最初の行を列ヘッダーとしています。
  • 商品情報を含む追加の 3 行。
  • 各行は、列に対応する 4 つのセルを含んでいます。

Web ブラウザでの例の出力は、商品在庫の詳細を表示する 4x4 のグリッドを表示します。

Product inventory table example

テーブルのヘッダーとボディセクションを追加する

このステップでは、セマンティック HTML タグ<thead>、<tbody>、<tfoot>を使用してテーブルの構造を改善し、テーブルの内容をより効果的に整理する方法を学びます。これらのタグは、HTML テーブルの読みやすさとアクセシビリティを向上させるのに役立ちます。

WebIDE を開き、~/projectディレクトリにstudent_grades.htmlという名前の新しいファイルを作成します。テーブルセクションタグの使用方法を示す学生成績テーブルを作成します。

touch ~/project/student_grades.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Student Grades Table</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Math</th>
          <th>Science</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Alice Johnson</td>
          <td>85</td>
          <td>90</td>
          <td>175</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Bob Smith</td>
          <td>78</td>
          <td>82</td>
          <td>160</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Charlie Brown</td>
          <td>92</td>
          <td>88</td>
          <td>180</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Class Average</td>
          <td>85</td>
          <td>86.67</td>
          <td>171.67</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

テーブルセクションに関するポイント：

  1. <thead>：列タイトルを持つヘッダー行を含む
  2. <tbody>：主なデータ行を含む
  3. <tfoot>：要約またはフッター行を含む
  4. ヘッダーセルには<th>を、<td>ではなく使用する
  5. これらのセマンティックタグは、テーブルの構造とアクセシビリティを向上させるのに役立つ

この例では、以下が示されています。

  • <th>を使用した列タイトルを持つヘッダー行
  • <tbody>内の複数のデータ行
  • <tfoot>内のクラス平均を持つフッター行

Web ブラウザでの例の出力は、ヘッダー、ボディ、フッター用の明確なセクションを持つ構造化されたテーブルを表示します。

Student grades table example

colspan と rowspan を使ってテーブルセルをマージする

このステップでは、colspan と rowspan 属性を使ってテーブルセルを水平方向と垂直方向にマージする方法を学びます。これらの属性を使うことで、複数のセルを結合して、より複雑で柔軟なテーブルレイアウトを作成できます。

WebIDE を開き、~/project ディレクトリに event_schedule.html という名前の新しいファイルを作成します。セルマージを示すイベントスケジュールテーブルを作成します。

touch ~/project/event_schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Conference Event Schedule</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Time</th>
          <th>Room A</th>
          <th>Room B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>9:00 AM</td>
          <td rowspan="2">Keynote Speech</td>
          <td>Workshop 1</td>
        </tr>
        <tr>
          <td>10:00 AM</td>
          <td>Workshop 2</td>
        </tr>
        <tr>
          <td>11:00 AM</td>
          <td colspan="2">Lunch Break</td>
        </tr>
        <tr>
          <td>12:00 PM</td>
          <td>Panel Discussion</td>
          <td>Networking Session</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

colspan と rowspan に関するポイント：

  1. colspan：列にわたってセルを水平方向にマージする
    • 例：<td colspan="2"> は、セルを 2 列にまたがるように設定します
  2. rowspan：行にわたってセルを垂直方向にマージする
    • 例：<td rowspan="2"> は、セルを 2 行にまたがるように設定します
  3. これらの属性を使用する場合、他の行の対応するセルを削除する

この例では：

  • 「基調講演」は、A 会場で 2 行にまたがっています
  • 「昼食休憩」は、両会場で 2 列にまたがっています
  • その他のセルは、標準的な単一セルレイアウトを維持しています

Web ブラウザでの例の出力は、マージされたセルを持つテーブルが表示され、よりコンパクトで整理されたスケジュールが表示されます。

HTML table with merged cells example

テーブルの属性をスタイリッシュに設定してカスタマイズする

このステップでは、インライン CSS と HTML 属性を使って HTML テーブルをスタイリッシュにカスタマイズする方法を学びます。適切なスタイリングは、テーブルの読みやすさと視覚的な魅力を向上させることができます。

WebIDE を開き、~/projectディレクトリにstyled_table.htmlという名前の新しいファイルを作成します。さまざまなスタイリング手法を使ったテーブルを作成します。

touch ~/project/styled_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Styled Product Catalog</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
      }
      th {
        background-color: #4caf50;
        color: white;
        padding: 10px;
        text-align: left;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      tr:hover {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Wireless Headphones</td>
          <td>$99.99</td>
          <td>50</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Smart Watch</td>
          <td>$199.99</td>
          <td>30</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Bluetooth Speaker</td>
          <td>$79.99</td>
          <td>75</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

示されている主なスタイリング手法：

  1. border-collapse：テーブルセル間の余白を削除する
  2. カスタムフォントと文字装飾
  3. 色付きのヘッダー行
  4. :nth-child(even)を使った交互の行の色
  5. テーブル行のホバーエフェクト
  6. セルのパディングとボーダーのスタイリング

スタイリングオプションには：

  • <style>タグ内のインライン CSS
  • 別の CSS ファイル（大型プロジェクトでは推奨）
  • style属性を使ったインラインスタイル
  • レイアウト、色、インタラクティビティ用の CSS プロパティ

Web ブラウザでの例の出力は、ホバーと色のエフェクトがあり、プロフェッショナルなスタイルで読みやすいテーブルが表示されます。

Styled HTML table example

まとめ

この実験では、参加者は<table>、<tr>、<td>、<th>などの必須 HTML タグを使って HTML テーブルを作成する基本を学びました。この実験では、学習者がテーブル構造を理解し、行と列を持つ基本的なテーブルを作成し、ヘッダーの追加、セルのマージ、テーブル属性のカスタマイズの技術を探求するように導きました。

実践演習では、<table>行の定義、ヘッダーとデータセルの作成、borderなどの属性を使ってテーブルの可視化を強化するなどの重要な概念を網羅して、Web ページに構造化されたグリッド状のデータ表示を構築する方法を示しました。参加者は、さまざまな Web デザインシナリオで情報を効果的に表示できる意味論的で整理された HTML テーブルを構築する実践的な経験を得ました。

関連 CSS コース
初心者向け CSS

初心者向け CSS

cssweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development