【初心者向け】HTMLのtfootタグでテーブルにフッターを追加する方法
HTMLでは、<tfoot>タグを使用することで、テーブルにフッター（表の末尾部分）を追加できます。tfootタグは、<thead>タグ（ヘッダー）や<tbody>タグ（本体）と組み合わせて使うことで、テーブルを「ヘッダー」「ボディ」「フッター」の各パートに明確に分割することができます。
tfootタグの主な属性
かつてtfootタグには以下のような属性が用意されていましたが、現在これらはすべて非推奨（Deprecated）となっており、HTML5ではスタイルの指定はCSSで行うことが推奨されています。
| 属性 | 値 | 説明 |
|---|---|---|
| align | right left center justify char | 非推奨 － 水平方向の視覚的な配置を指定します。 |
| char | character | 非推奨 － 揃えの基準となる文字を指定します。align = "char" の場合に使用されます。 |
| charoff | ピクセル または % | 非推奨 － char属性で指定した最初の文字に対するオフセット（ピクセルまたはパーセンテージ）を指定します。 |
| valign | top middle bottom baseline | 非推奨 － 垂直方向の配置を指定します。 |
実装例：テーブルフッターを作成するコード
次のコードを実行すると、HTMLでテーブルのフッターを持つテーブルを作成できます。<tfoot>が<tbody>より先に記述されている点に注目してください。ブラウザ上では正しく表の末尾に表示されます。
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style = "width:100%">
<thead>
<tr>
<td colspan = "4">これはテーブルのヘッダーです</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">これはテーブルのフッターです</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>セル 1</td>
<td>セル 2</td>
<td>セル 3</td>
<td>セル 4</td>
</tr>
<tr>
...4つのセルを含む行がさらに続きます...
</tr>
</tbody>
<tbody>
<tr>
<td>セル 1</td>
<td>セル 2</td>
<td>セル 3</td>
<td>セル 4</td>
</tr>
<tr>
...4つのセルを含む行がさらに続きます...
</tr>
</tbody>
</table>
</body>
</html>ポイントまとめ
<tfoot>はテーブルのフッター（合計値や注釈など）を表すためのセマンティックな要素です。- HTMLの仕様上、
<tfoot>は<tbody>よりも前に記述することが可能です。 - alignやvalignなどの旧属性は非推奨のため、見た目を調整したい場合はCSSを使用しましょう。
-
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