備忘録的リファレンス

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

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

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

<table>

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

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

属性

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

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

<tr>、<td>

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

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

セルの結合

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

属性

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

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

<th>

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

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

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

属性

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

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

<colgroup>,<col>

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

<col>

属性

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

<caption>

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

フローコンテンツ

属性

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

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

captionテキスト

<thead>,<tbody>,<tfoot>

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

<thead>

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

属性

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

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

<tbody>

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

属性

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

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

<tfoot>

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

属性

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

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

Example

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

データテキスト


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

HTMLテキスト例

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