備忘録的プログラミングリファレンス

td, th タグエレメント

フローコンテンツ

　td, th タグエレメントは、<table> エレメントにおける表においてデータや項目名が入るセルの役割をする HTML タグエレメントです。
　これらのタグはフローコンテンツの特徴をもち、横に並んで表示されます。
　<tr> の子エレメントとして使用します。

　<td>、<th>、<tr> と table エレメントが表を作成する基本なエレメントになります。
　td がデータの入るセル、th がヘッダーやフッターの項目名が入るセルの役割をします。<tr> は行を作成します。

td, th タグエレメント
<table>
	<tr><th>動物名</th><th>特徴</th></tr>
	<tr><td>キリン</td><td>首が長い</td></tr>
	<tr><td>ゾウ</td><td>鼻が長い</td></tr>
	<tr><td>ライオン</td><td>百獣の王</td></tr>
</table>
表示例
動物名特徴
キリン首が長い
ゾウ鼻が長い
ライオン百獣の王

詳しくはExampleを参照してください。

　複数の <td>、<th> エレメントは結合することができます。以下のエレメントの結合を参照してください。

　列ごとにスタイルシートを反映するには colgroup, col タグエレメントを使用します。

- ad -

エレメントの結合

　複数の <td>、<th> エレメントは行方向や列方向に結合することができます。

　行方向に結合するには colspan 属性に結合数を指定します。列方向に結合するには rowspan 属性を用いいます。

  • colspan=　　　水平方向の結合
  • rowspan=　　　垂直方向の結合
td, th タグエレメント
<table>
	<tr><th colspan="2">ヘッダーは行方向に結合しています</th></tr>
	<tr><td rowspan="2">このエレメントは列方向に結合しています</td><td>データ１</td></tr>
	<tr><td>データ２</td></tr>
	<tr><td>結合なし</td><td>データ３</td></tr>
</table>
表示例
ヘッダーは行方向に結合しています
このエレメントは列方向に結合していますデータ１
データ２
結合なしデータ３

　結合されるエレメントは定義しないようにします。

<td> の属性

　<table> におけるデータを入れるセルとして利用します。

グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。

<th> の属性

　<table> における項目名を入れるセルとして利用します。主にヘッダーに用いられます。

グローバル属性を持ちます。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。


Example

　テキストによる表データを <table> エレメントによる表に変換します。

　以下の「データテキスト」欄に、テキストによる行列データを編集して「変換」ボタンをクリックしてください。「HTMLテキスト例」にテキストデータに基づいたHTMLテキストの例が表示されます。
　一行ごとが行データになります。さらに個々のデータは「データの区切り文字」によって分けます。「データの区切り文字」の初期値は半角カンマ,です。

データテキスト


エレメントの属性は各エレメントの説明を参照してください。<table>エレメントの属性

HTMLテキスト例

ブラウザでの見え方（このページのスタイルが反映されています）

- ad -

JavaScript

<td>, <th> の定義に関しては HTMLTableCellElement を参照してください。

関連（Related）