【HTML】tdタグでテーブルや表のデータセルを定義する

このページについて

このページではHTMLで使えるtdタグの使い方を解説しています。

tableタグを生成することができるページを公開しました。まだ色々と機能不足で基礎的なコードしか生成できませんが、今後もちまちま更新予定です。

tdタグはtableタグの中でのみ使えるタグです。これは「テーブルのデータを入力・表示するセルを定義」っていう機能を持っています。さらに細かいことを言うとtrタグの中でのみ使用可能です。つまりtable>tr>tdという関係性になります。

tdタグは常にtrタグの中に入れて使うので、以下のようになります。

<table>
<tr><td>セル1</td><td>セル2</td></tr>
</table>

これを実際にブラウザで表示すると以下のようになりますが、CSSで色々といじっているので見た目は異なると思います。

セル1

セル2

trタグは行を定義し、その中にtdタグを入れてデータを表示するという使い方になります。なのでtrとtdはセットで覚えてしまいましょう。

tdタグで使える属性の一覧と簡単な機能を掲載します。

colspan	複数のtdセルを横方向に結合します
headers	セルが関連している1つ以上のヘッダーセル(thタグ)のIDを指定します
rowspan	複数のtdセルを縦方向に結合します

headers属性はテーブル内にthタグで作成したヘッダーセルと、tdタグを関連付けるために使用されます。これはスクリーンリーダに適しています。

colspan属性とrowspan属性は必要に応じてセルを統合したりすることができるため、使うことができれば色々と表現の幅が広がります。