HTML テーブルの定義と作成

はじめに

HTML テーブルは、Web ページ上に表形式のデータを表示するために一般的に使用されます。この実験では、<table>、<tr>、<td>、および <th> タグを使用して基本的な HTML テーブルを作成する方法を学びます。

注: index.html でコーディングを練習し、Visual Studio Code で HTML を記述する方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/basic_elems -.-> lab-70852{{"HTML テーブルの定義"}} html/layout -.-> lab-70852{{"HTML テーブルの定義"}} html/doc_flow -.-> lab-70852{{"HTML テーブルの定義"}} html/tables -.-> lab-70852{{"HTML テーブルの定義"}} html/tbl_access -.-> lab-70852{{"HTML テーブルの定義"}} end

テーブルの作成

まず、index.html という新しい HTML ファイルを作成し、基本構造を設定しましょう。<body> タグの中に、<table> 要素を作成します。この要素には、テーブルのすべての行と列が含まれます。

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

行の定義

次に、<tr> タグを使用してテーブルの行を定義します。各行には 1 つ以上のセルが含まれます。単一のセルを作成するには、<td> タグを使用します。

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <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>
  </body>
</html>

テーブルヘッダーの追加

場合によっては、テーブルにヘッダー行を追加したい場合があります。このためには、<td> タグの代わりに <th> タグを使用します。

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <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>
  </body>
</html>

罫線とスタイルの追加

デフォルトでは、HTML テーブルは最小限のスタイル設定で、罫線がありません。テーブルに罫線を追加するには、CSS の border プロパティを使用します。

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <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>
  </body>
</html>

まとめ

このチュートリアルを追うことで、基本的な HTML テーブルを作成し、CSS を使ってスタイルを付ける方法を学びました。セルに colspan や rowspan などの属性を追加したり、<caption> や <thead> などの追加タグを使うことで、テーブルをさらにカスタマイズできます。これらのツールを使えば、ウェブページにデータを表示するための複雑で情報に富んだテーブルを作成できます。