HTML で効果的な表のフッターを作成する

はじめに

HTML では、<tfoot> タグを使用して表のフッターコンテンツをグループ化できます。表のフッターには、要約情報、解説ノートまたはコメントが含まれる場合があります。<tfoot> タグは <table> タグの子要素の 1 つであり、<thead> および <tbody> タグと併用されます。この実験では、<tfoot> タグを使用して 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/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/layout -.-> lab-70862{{"HTML の表のフッター"}} html/tables -.-> lab-70862{{"HTML の表のフッター"}} html/complex_tbl -.-> lab-70862{{"HTML の表のフッター"}} html/tbl_access -.-> lab-70862{{"HTML の表のフッター"}} end

基本的な表構造を作成する

表のヘッダー、表の本体、表のフッターセクションを含む基本的な表構造を作成します。

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Table Footer</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

上記のコードでは、Name、Age、Gender の 3 つの列を持つ基本的な表構造を作成しました。また、表に 3 行のデータも追加しました。<tfoot> タグには、3 つの列 (colspan="3") にまたがる 1 つのセル (<td>) を持つ 1 行だけが含まれています。

表のフッターにコンテンツを追加する

基本的な表構造を作成したら、<tfoot> タグにコンテンツを追加できます。

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

この例では、表の中の人々の平均年齢を含む行を <tfoot> タグに追加しました。行の最初のセルは 2 つの列にまたがり (colspan="2")、「Average Age:」というテキストを表示します。2 番目のセルは実際の平均年齢値を表示します。

表のフッターに CSS を適用する

<tfoot> タグとその子要素に CSS スタイルを適用して、表のフッターの外観を調整できます。

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
    <style>
      tfoot {
        background-color: #ccc;
        font-weight: bold;
        text-align: center;
      }
      tfoot td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

この例では、CSS の tfoot セレクタを使用して、<tfoot> タグに背景色、フォントの太さ、テキストの整列のスタイルを適用しました。また、tfoot td セレクタを使用して、表のフッターセクション内のセルにパディングを適用しました。

まとめ

<tfoot> タグは、表のフッターコンテンツをグループ化するために使用されます。完全な表構造を作成するために、<thead> および <tbody> タグと併用されます。HTML と CSS を使用して、<tfoot> タグとその子要素にコンテンツとスタイルを追加できます。