HTML テーブル：データの作成と構造化

はじめに

HTML テーブルは、行と列から構成される構造化された表形式でデータを表示するために使用されます。これは、製品比較、財務報告、スケジュールなどの情報を明確かつ整理された方法で提示するために不可欠です。

この実験では、HTML テーブルの基本的な構成要素を学びます。まず基本的なテーブル構造を作成し、徐々に行、ヘッダー、データセルを追加して、完全で機能的なテーブルを構築していきます。

テーブル構造のための table タグを作成する

このステップでは、テーブルのメインコンテナを作成します。<table> タグは、すべての HTML テーブルのルート要素であり、他のすべてのテーブル関連要素を囲みます。

まず、基本的な HTML ドキュメント構造を設定しましょう。左側のファイルエクスプローラーで、~/project ディレクトリにある index.html ファイルを見つけて開きます。

以下のボイラープレートコードを index.html に追加してください。このコードは、標準的な HTML5 ドキュメントを定義し、<body> 内に空の <table> 要素を含みます。

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

コードを追加した後、インターフェース上部にある Web 8080 タブをクリックしてページをプレビューできます。テーブルはまだ空なので何も表示されませんが、ファイルが正しく提供されていることを確認できます。

テーブル行のための tr タグを追加する

このステップでは、テーブルに行を追加します。「table row」の略である<tr>タグによって、テーブル内のすべての水平行が定義されます。ヘッダーやデータセルなど、行内のすべてのコンテンツは、<tr>要素内に配置する必要があります。

テーブルに 2 つの行を追加しましょう。最初の行には列ヘッダーを、2 番目の行にはデータを配置する予定です。

index.htmlファイルを、<table>タグ内に 2 つの<tr>要素が含まれるように変更してください。

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr></tr>
      <tr></tr>
    </table>
  </body>
</html>

ファイルを保存してください。Web 8080タブを確認しても、行にはまだコンテンツや境界線が含まれていないため、目に見える変更は何も表示されません。

ヘッダーセル用の th タグを挿入する

このステップでは、テーブルのヘッダーセルを定義します。ヘッダーセルは「table header」を意味する<th>タグを使用して作成されます。これらのタグは<tr>要素内に配置され、通常は太字で中央揃えのテキストとして表示され、通常のデータセルと区別されます。

テーブルの最初の行に「Name」と「Age」の 2 つのヘッダーを追加しましょう。

最初の<tr>タグ内に 2 つの<th>要素を追加して、index.htmlファイルを更新してください。

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr></tr>
    </table>
  </body>
</html>

これで、Web 8080タブに切り替えると、「Name」と「Age」のヘッダーが表示されます。

データセル用の td タグを使用する

このステップでは、テーブルに実際のデータを追加します。標準的なデータセルは「table data」を意味する<td>タグで作成されます。これらのタグは<tr>要素内に配置され、列ヘッダーに対応する情報を含みます。

「Alice」という名前で「30」歳の人物のデータ行を追加しましょう。このデータはテーブルの 2 番目の行に入ります。

2 番目の<tr>タグ内に 2 つの<td>要素を追加して、index.htmlファイルを更新してください。

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

ファイルを保存し、Web 8080タブを確認してください。これで、2 番目の行に「Alice」と「30」というデータが表示され、それぞれのヘッダーの下に配置されているのが確認できます。

視認性のためにテーブルに border 属性を追加する

このステップでは、テーブルの構造を可視化します。デフォルトでは、HTML テーブルは境界線なしでレンダリングされます。可視化のために境界線をすばやく追加するには、<table>タグにborder属性を使用できます。

テーブルに 1 ピクセルの境界線を追加しましょう。index.htmlの開始<table>タグをborder="1"を含めるように変更してください。

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

ファイルを保存した後、Web 8080タブをリフレッシュしてください。テーブル全体と各セルに明確な境界線が表示され、行と列の構造がはっきりとわかるようになります。border属性はシンプルですが、現代のウェブデザインではスタイリングに CSS が使用されており、より多くの制御と柔軟性を提供します。

まとめ

おめでとうございます！基本的な HTML テーブルの作成に成功しました。

この実験では、以下の方法を学びました。

<table>タグを使用してテーブルコンテナを作成する。
<tr>タグを使用してテーブルの行を定義する。
<th>タグを使用して列のヘッダーセルを作成する。
<td>タグを使用してデータセルを追加する。
テーブル構造を可視化するためにborder属性を追加する。

これらは、ウェブページに表形式のデータを表示するための基本的な要素です。この基礎を基に、より複雑でスタイルのあるテーブルを作成することができます。