2013/11/16

テーブル(表)用タグ一覧(縦横に結合用属性とかも)

<table></table>
テーブルの一番外枠を作成。
<caption></caption>
tableタグの直下の子要素として設置してキャプション(タイトルや説明)をつける。
<colgroup></colgroup>
tableタグの直下の子要素として設置して表の縦列(カラム)をグループ化。
captionより後に設置。
thead、tbody、tfootより前に設置。
縦の列に一気にスタイルを適用したい時にも使える。
属性
span グループ化する縦の列数。
<col></col>
span属性のないcolgroup内に設置して表の縦列に属性やスタイルを指定。
グループ化せずスタイルや属性を指定したい時に。
属性
span 縦の列数。
<thead></thead>
tableタグの直下の子要素として設置してヘッダー行を表す。
caption、colgroupより後に設置。
tbody、tfootより前に設置。
<tbody></tbody>
tableタグの直下の子要素として設置してボディ部分を表す。
caption、colgroup、theadより後に設置。
<tfoot></tfoot>
tableタグの直下の子要素として設置してフッタ部分を表す。(カラムの要約的な使い方)
caption、colgroupより後に設置。
<tr></tr>
tableまたはthead、tbody、tfootタグ直下に置いて横1行を定義。
<th></th>
trタグ直下に置いて見出しセルを定義。
属性
colspan 方向に結合する数。
rowspan 方向に結合する数。
<td></td>
trタグ直下に置いて見出しデータセルを定義。
属性
colspan 方向に結合する数。
rowspan 方向に結合する数。

サンプルコード

<table> <caption>ラブライブメンバー</caption> <colgroup span="1" id="c1"> <colgroup> <col span="2" id="c2"> </colgroup> <thead> <tr> <th>学年</th> <th>名字</th> <th>名前</th> </tr> </thead> <tbody> <tr> <th rowspan="3">1年</th> <td>星空</td> <td>名前</td> </tr> <tr> <td>小泉</td> <td>花陽</td> </tr> <tr> <td>西木野</td> <td>真姫</td> </tr> <tr> <th rowspan="3">2年</th> <td>高坂</td> <td>穂乃果</td> </tr> <tr> <td>南</td> <td>ことり</td> </tr> <tr> <td>園田</td> <td>海未</td> </tr> <tr> <th rowspan="3">3年</th> <td>絢瀬</td> <td>絵里</td> </tr> <tr> <td>東條</td> <td>希</td> </tr> <tr> <td>矢澤</td> <td>にこ</td> </tr> </tbody> <tfoot> <tr> <th>昇順に並べてあります</th> <td colspan="2">漢字表記です</td> </tr> </tfoot> </table>

出来る限りいっぱいタグや属性を指定。

動作サンプル

470 views