tdタグとは?|HTMLの表(テーブル)にデータセルを作成しよう

tdタグとは?|HTMLの表(テーブル)にデータセルを作成しよう
博士
今回は、表(テーブル)の中にデータセルを作成していくぞ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<td>タグとは

 

<td>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 セクショニング・ルート
利用場所 tr要素の子要素として
内容 フロー・コンテンツ


 
 
<td>タグは、表のデータセルを作成する際に使用するタグです。
HTMLの表の基本的な構造は、<table>~</table>の中に、<tr>~</tr>で表の横行を定義して、さらにその中に<th>~</th><td>~</td>でセルを定義します。
 
 
リンゴ
<td>は「table data」の略です。
 
 

使用例

 
 

表示例

名前 担当
ジョン ボーカル・ギター
ポール ボーカル・ベース
ジョージ ギター
リンゴ ドラム
 
 

rowspan属性

th要素、td要素にrowspan属性を指定すると、そのセルから指定された数だけ下方向のセルを連結し、1つのセルとして表示できるようになります。
 
 

使用例

 
 

表示例

順位 タイトル メーカー
1位 スーパーマリオブラザーズ 任天堂
2位 スーパーマリオブラザーズ3
3位 ドラゴンクエストIII そして伝説へ… エニックス

 
 
また、rowspan属性の値に「0」を指定すると、そのセルから行グループの終わりのセルまでが連結されます。
グループ化が行われていない場合は、表の終わりのセルまでが連結されます。
 
 
博士
この指定に対応していないブラウザもあるぞ。
 
 

スポンサーリンク

colspan属性

th要素、td要素にcolspan属性を指定すると、そのセルから指定された数だけ横方向のセルを連結し、1つのセルとして表示できるようになります。
 
 

使用例

 
 

表示例

順位 タイトル 売上本数
1位 スーパーマリオブラザーズ 681万本
2位 スーパーマリオブラザーズ3 384万本
3位 ドラゴンクエストIII そして伝説へ… 380万本
2016年9月3日現在

 
 

まとめ

<td>タグは、表のデータセルを作成する際に使用するタグです。
 
 

博士
次回は、<th>タグで見出しセルを作成するぞ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








tdタグとは?|HTMLの表(テーブル)にデータセルを作成しよう