HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【初心者向け】HTMLでテーブルの見出しを作成する方法を徹底解説

HTMLでテーブルの見出しを作成するには？

HTMLで表（テーブル）の見出しセルを作成するには、<th>タグを使用します。<th>は「Table Header」の略で、テーブル内のヘッダーセル（見出しセル）を定義するためのタグです。

通常のデータセルに使う<td>タグと異なり、<th>タグで囲んだテキストは多くのブラウザで太字・中央揃えで表示されるのが特徴です。また、<th>を適切に使うことで、スクリーンリーダーなどの支援技術が表の構造を正しく認識でき、アクセシビリティの向上にもつながります。

<th>タグで使用できる主な属性

<th>タグには、以下のような属性を指定できます。「非推奨」とされている属性はHTML5では廃止予定のため、代わりにCSSでのスタイル指定が推奨されます。

属性 値 説明
abbr abbreviated_text 非推奨 － 見出しセルの内容の省略形を指定します。
align right
left
center
justify
char		 非推奨 － 見出しセル内のコンテンツの水平方向の配置を指定します。
axis 名前 非推奨 － この<th>のカテゴリ名を指定します。
bgcolor rgb(x,x,x)
#hexcode
色名		 非推奨 － 見出しセルの背景色を指定します。
char 文字 非推奨 － テキストを揃える基準となる文字を指定します。align="char" を指定した場合に使用されます。
charoff ピクセル または % 非推奨 － char属性で指定した基準文字からのオフセット（ピクセルまたはパーセント値）を指定します。align="char" を指定した場合に使用されます。
colspan 数値 見出しセルが横方向にまたぐ列の数を指定します。
headers ID そのセルが関連付けられる1つ以上の見出しセルを指定します。
height ピクセル 非推奨 － 見出しセルの高さを指定します。
nowrap nowrap 非推奨 － テキストの自動折り返しを禁止します。
rowspan 数値 見出しセルが縦方向にまたぐ行の数を指定します。
scope col
colgroup
row
rowgroup		 見出しセルで使用する属性で、この見出しの情報がどの範囲のセルに適用されるかを指定します。
valign top
middle
bottom
baseline		 非推奨 － コンテンツの垂直方向の配置を指定します。
width ピクセル または % 非推奨 － 見出しセルの幅を指定します。

実装例：テーブル見出しのコードサンプル

以下のコードを実行すると、HTMLでテーブルの見出しを作成する方法を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>
   <body>
      <h3>実行結果</h3>

      <table>
         <th>点数</th>
         <th>学生名</th>

         <tr>
            <td>600</td>
            <td>Amit</td>
         </tr>
         <tr>
            <td>400</td>
            <td>Anil</td>
         </tr>
      </table>

   </body>
</html>

補足：モダンなHTMLではCSSとの併用がおすすめ

上記のように、<th>タグだけで見出しセルは作成できますが、背景色や幅、配置などを細かく制御したい場合は、廃止予定の属性（bgcolor、width、alignなど）ではなくCSSでのスタイル指定を行いましょう。例えば、<style>ブロック内でth { background-color: #eee; }のように記述すれば、保守性の高いコードになります。

また、複雑な表では<thead>タグでヘッダー行を明示的にグループ化したり、scope属性を使って見出しとデータセルの関連を示すことで、より意味的で読みやすいマークアップが実現できます。

  1. HTMLで非表示のコメントを作成する方法

    HTMLで非表示のコメントを作成するには、<!-- を記述してコメントを開始し、--> で閉じます。このタグの間に書かれた内容はすべてブラウザ上では非表示になります。コメント機能は、後からコードを見直したり修正したりする必要がある開発者にとって非常に便利です。適切なコメントを残しておくことで、コードの意図や構造を簡単に理解できるようになります。コメントは「自分自身へのメモ」と捉えることもできます。同時に、HTMLコードを一時的に無効化したい場合にも活用でき、コメントアウトされた部分はブラウザに一切表示されません。サンプルコード以下のコードを実行して、HTMLにおける非表示コメントの

  2. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト