HTML テーブル本体をマスターする

はじめに

HTML では、<tbody> タグは HTML テーブルの本体を示すために使用され、テーブル内の行のセットで構成されます。この実験では、<tbody> タグを使用して簡単な HTML テーブルを作成する手順を案内します。

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) 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/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/basic_elems -.-> lab-70854{{"HTML テーブル本体"}} html/layout -.-> lab-70854{{"HTML テーブル本体"}} html/doc_flow -.-> lab-70854{{"HTML テーブル本体"}} html/tables -.-> lab-70854{{"HTML テーブル本体"}} html/complex_tbl -.-> lab-70854{{"HTML テーブル本体"}} html/tbl_access -.-> lab-70854{{"HTML テーブル本体"}} end

テーブルタグを作成する

好きなコードエディタで、index.html という名前の空の HTML ファイルを作成します。

HTML ファイルの <body> セクションに <table> タグを作成します。

<body>
  <table></table>
</body>

テーブルヘッダー `<thead>` タグを追加する

<table> タグの中に、<thead> タグを作成し、その中に <th> タグを使ってヘッダー行を追加します。

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
</table>

テーブル本体 `<tbody>` タグを追加する

<table> タグの中に、<tbody> タグを作成し、その中に <td> タグを使って行を追加します。

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

テーブルフッター `<tfoot>` タグを追加する（オプション）

<table> タグの中に、<tfoot> タグを作成し、その中に <td> タグを使ってフッター行を追加します。

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Total: 2 People</td>
    </tr>
  </tfoot>
</table>

テーブルを装飾する

CSS を使ってテーブルを装飾します。必要に応じて <thead>、<tbody>、および <tfoot> も装飾します。

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }

  th,
  td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
    color: #444;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tfoot td {
    text-align: right;
    font-weight: bold;
  }
</style>

まとめ

この実験では、<tbody> タグを使って行と列を持つ HTML テーブルを作成する方法を学びました。手順に従って、ヘッダー、本体、およびフッターセクションがある単純なテーブルを作成し、CSS を使ってテーブルを装飾してよりプロフェッショナルに見せました。<tbody> タグは、HTML で複雑なテーブルを構築するための便利なツールであり、動的で対話型のデータビジュアライゼーションを作成するために他のテーブル要素と併用されることがよくあります。

HTML テーブル本体