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

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>データ1</td></tr>
	<tr><td>データ2</td></tr>
	<tr><td>結合なし</td><td>データ3</td></tr>
</table>
表示例
ヘッダーは行方向に結合しています
このエレメントは列方向に結合していますデータ1
データ2
結合なしデータ3

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

<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 を参照してください。