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

<table>,<tr>,<td>,<th>,<caption>,<colgroup>,<col>,<thead>,<tbody>,<tfoot>

 表が作成できます。主に表の作成には<table>,<tr>,<td>,<th>を使います。
その表に<caption>によって見出しを加えることができます。
<colgroup>,<col>によって表の列ごとにスタイルや操作を変更することができます。

 表には明確なヘッダーとフッターを加えることができます。そのためには、<thead>,<tbody><tfoot>を利用します。

<table>

<table>は表が作成できます。以下の<tr>、<th>、<td>タグを組み合わせて使います。

<table>タグエレメントの例
<table>
	<tr><td>キリン</td><td>首が長い</td></tr>
	<tr><td>ゾウ</td><td>鼻が長い</td></tr>
	<tr><td>ライオン</td><td>百獣の王</td></tr>
</table>

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

属性

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

AttributeValueExtra information
idID,cssのセレクターにもなる
class複数のエレメントが対象にできる、cssのセレクター
borderあらかじめ罫線を表示

JavaScript

 <table> の定義に関しては HTMLTableElement を参照してください。

Example

 <table> エレメントだけでは表の作成はできませんが、作成例を先に示します。

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

データテキスト


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

HTMLテキスト例

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

<tr>、<td>

 <tr>は<table>表における列要素(縦方向)を作成します。
 <td>は<table>表におけるセルを作成します。複数で行要素(横方向)を作成します。 <tr>の子要素として作成しなければ行列のある表として成り立ちません。

使い方はHTMLテキスト例を参照してください。

セルの結合

 <tr>、<td>の各要素は結合することができます。
colspan=   水平方向の結合
rowspan=   垂直方向の結合

属性

どちらもグローバル属性を持ちます。ここではclass名のみ示します。

cssに使います。同名のclassは同じスタイルが適応されます。

JavaScript

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

<tr> の定義に関しては HTMLTableRowElement を参照してください。

<th>

フローコンテンツ 但し書きあり

 <TABLE>表における項目名部分を明示します。

使い方はHTMLテキスト例を参照してください。

JavaScript

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

属性

グローバル属性を持ちます。ここではclass名のみ示します。

cssに使います。同名のclassは同じスタイルが適応されます。

<colgroup>,<col>

 表の列要素(column)を一纏めにし、スタイルやスクリプトの指定には便利になります。<colgroup> で宣言をし、<col>で列のまとまり数が指定できます。
 必ず、<caption>の後、<tr>、<th>、<thead>、<tfoot>、<tbody>の前に編集しなければなりません。

<col>

属性

 グローバル属性を持ちます。colごとにidやclass名が指定できます。

JavaScript

 <colgroup>,<col> エレメントの定義については HTMLTableColElement を参照してください。

<caption>

 表の見出しや説明文を作成します。<table>タグの直後に記述する必要があります。

フローコンテンツ

属性

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

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

captionテキスト

JavaScript

 <caption> エレメントの定義については HTMLTableCaptionElement を参照してください。

<thead>,<tbody>,<tfoot>

 表の行を、ヘッダ、フッタ、ボディ要素として明確に定義できます。

<thead>

 表の行をヘッダとして明確に定義できます。

属性

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

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

<tbody>

 表の行にヘッダやフッタを定義したら必要になります。

属性

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

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

<tfoot>

 表の行をフッタとして明確に定義できます。

属性

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

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

JavaScript

 <thead>,<tbody>,<tfoot> エレメントの定義については HTMLTableSectionElement を参照してください。