HTMLでテーブルヘッダーを作成する方法【theadタグの使い方を解説】

HTMLでテーブルヘッダーを作成するには？

HTMLでテーブル（表）のヘッダーを作成するには、<thead>タグを使用します。<thead>タグは、テーブルにヘッダー部分を定義するための要素です。通常、本体を表す<tbody>タグやフッターを表す<tfoot>タグと組み合わせて使用し、テーブル全体を「ヘッダー」「ボディ」「フッター」という各パートに構造化します。

テーブルをこのように構造化しておくことで、印刷時にヘッダーやフッターを各ページに繰り返し表示させる、長いテーブルをスクロールしてもヘッダーを固定表示する、といった制御が容易になります。また、スクリーンリーダーなどの支援技術がテーブルの内容を正しく解釈できるようになるため、アクセシビリティの面でもメリットがあります。

<thead>タグで利用できる属性

<thead>タグは、かつて以下の属性をサポートしていました。ただし、これらはすべて非推奨（Deprecated）となっており、現在のHTML5では使用できません。

属性	値	説明
align	right left center justify char	非推奨－水平方向の視覚的な配置を指定します。
char	文字	非推奨－テキストを揃える基準となる文字を指定します。align="char" を指定した場合に使用されます。
charoff	ピクセルまたは %	非推奨－ char属性で指定した基準文字からのオフセット（ピクセル数またはパーセント値）を指定します。align="char" を指定した場合に使用されます。
valign	top middle bottom baseline	非推奨－垂直方向の配置を指定します。

※ 同様の見た目を実現したい場合は、代わりにCSSの text-align プロパティや vertical-align プロパティを使用してください。

コード例

以下のコードを実行すると、HTMLにおける<thead>タグの実装方法を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML thead Tag</title>
   </head>
   <body>
      <table style = "width:100%" border = "1">
         <thead>
            <tr>
               <td colspan = "4">これはテーブルのヘッダーです</td>
            </tr>
         </thead>
         <tfoot>
            <tr>
               <td colspan = "4">これはテーブルのフッターです</td>
            </tr>
         </tfoot>
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
            <tr>
               ...ここに4つのセルを持つ行が続きます...
            </tr>
         </tbody>

         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
            <tr>
               ...ここに4つのセルを持つ行が続きます...
            </tr>
         </tbody>
      </table>
   </body>
</html>

この例では、<thead>でヘッダー行を、<tfoot>でフッター行を定義し、<tbody>でデータ本体を2つのグループに分けて記述しています。colspan="4" を指定することで、ヘッダーとフッターのセルがテーブルの全4列にまたがって表示されます。

HTMLでテーブルに行を追加する方法【trタグの使い方と属性一覧】

HTMLでドキュメントのタイトルを追加する方法を解説

HTMLでテーブルの列を結合する方法｜colspan属性の使い方を解説
HTMLでテーブルの列を結合（マージ）するには、<td>タグにcolspan属性を使用します。この属性を指定することで、隣接するセル同士を横方向にまとめることができます。例えば、4行4列のテーブルがある場合でも、colspan属性を使えば、2つや3つのセルを簡単に結合できます。例1：基本となるテーブルを作成するまずは、colspan属性を使う前の状態として、3行3列のシンプルなテーブルをHTMLで作成してみましょう。 <!DOCTYPE html> <html> <head> &nbs
HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方
HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。rowspan属性：セルが縦方向（行）にまたがる行数を指定しますcolspan属性：セルが横方向（列）にまたがる列数を指定しますどちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan=2と指定すれば2行分、colspan=2と指定すれば2列分のセルが結合されます。例1：通常のテーブルを作成するまず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。<!DOCTYPE html> <html> &n