<table>~<table>の中の複数行は
グループ化することができます。
下記の図だと見出しがあって、
表の一番上の行がヘッダーです。
一番下の行がフッターで、
それ以外は内容の部分です。
それらを<thead><tbody><tfoot>タグを
使いグループ化することができます。
下記のソースコードで使われている<th>タグは
テーブル内の見出しを表す時に使います。
今回のサンプルコードでは、航空券、電車代など
旅費の項目のテキストを囲むときに使用しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
*{margin:0;padding:0;} #container{ width:640px; height:400px; background-color:#ffffff; margin:0 auto;} table,th,td{ border:1px solid black; border-collapse:collapse;} thead{background-color:#f0f0f0;} tfoot{background-color:aquamarine;} th{text-align:left;} td{text-align:right;} |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <table> <caption>旅費の計算</caption> <thead> <tr> <th>内訳</th> <th>金額</th> </tr> </thead> <tbody> <tr> <th>航空券</th> <td>170,000円</td> </tr> <tr> <th>電車代</th> <td>10,000円</td> </tr> <tr> <th>食費</th> <td>30,000円</td> </tr> <tr> <th>宿代</th> <td>60,000円</td> </tr> <tr> <th>備品</th> <td>50,000円</td> </tr> <tr> <th>お土産</th> <td>30,000円</td> </tr> <tr> <th>保険料</th> <td>30,000円</td> </tr> </tbody> <tfoot> <tr> <th>合計</th> <td>380,000円</td> </tr> </tfoot> </table> </div> </body> </html> |
表の説明を表すのにつかう<caption>タグ
その表の内容を表す題名をつけておけば。その表が
どんなものか分かりやすかったり、音声ブラウザでも
分かりやすくなります。場所としては<table>～</table>の
中に<caption>タグを使って書きます。そうすると
上の図のように「旅費の計算」と表示されます。
ちなみに<thead>、<tbody>、<tfoot>タグは
省略しても動きますが、表の作りを明確にするために
書いた方が良いと思います。
table要素のCSS
テーブルを作成する際には参考にしてください。
| プロパティ | 説明 | 値 | 内容 |
|---|---|---|---|
| table-layout | テーブルの列幅の表示の仕方 | auto | 列幅を自動にて、レイアウトを作る *デフォルト値 |
| fixed | 列幅を固定でレイアウトを作る | ||
| caption-side | キャプションの表示位置を設定 | top | 表の上に表示 *デフォルト値 |
| bottom | 表の下に表示 | ||
| left | 表の左に表示 | ||
| right | 表の右に表示 | ||
| border-collapse | 隣り合わせのセルのborderを重ねて表示するか、間を空けて表示をするか | collapse | borderを重ねて表示 |
| separate | borderの間を空けて表示 | ||
| border-spacing | border-collapse:collapese指定時、その間隔のサイズを指定する。 | px,emとか | ボーダーの間隔の数値 |
| empty-cells | 空白セルの時、 borderを表示するか否か |
show | 空白セルの時、borderを表示 |
| hide | 空白セルの時、borderを非表示 |