HTML テーブルの見出し：手順ガイド

はじめに

HTML では、<caption> タグを使用して表に見出しやタイトルを追加します。この手順に従った実験では、HTML で表を作成し、それに見出しを追加するプロセスを案内します。

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

基本的なテーブルを作成する

最初の手順では、table タグを使用してデータを含む基本的な表を作成します。以下は例です。

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

テーブルに見出しを追加する

表に見出しを追加するには、<table> タグのオープンタグの直後で表の行の前に <caption> タグを挿入するだけです。以下は例です。

<table>
  <caption>
    Employee Information
  </caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

見出しを装飾する

見出しを装飾するには、<caption> タグ内で style 属性を使用します。以下は例です。

<table>
  <caption style="color: blue; font-size: 20px;">
    Employee Information
  </caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

まとめ

HTML では、<caption> タグを使用して表に見出しやタイトルを追加します。<caption> タグは、<table> タグのオープンタグの直後で、<table> タグ内で使用されます。見出しは、表に関する簡単な説明を提供する短い説明です。それは、表の目的を理解するのに役立ちます。表に見出しを追加するには、<table> タグのオープンタグの直後で表の行の前に <caption> タグを挿入するだけです。<caption> タグ内で style 属性を使用することで、見出しを装飾することができます。