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位スーパーマリオブラザーズ3384万本
3位ドラゴンクエストIII そして伝説へ…380万本
2016年9月3日現在

 
 

まとめ

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

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

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

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








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