スポンサーリンク
スポンサーリンク

table内のコンテンツをグループにしてみる

<table>~<table>の中の複数行は
グループ化することができます。

下記の図だと見出しがあって、
表の一番上の行がヘッダーです。
一番下の行がフッターで、
それ以外は内容の部分です。
それらを<thead><tbody><tfoot>タグを
使いグループ化することができます。

table_groop

下記のソースコードで使われている<th>タグは
テーブル内の見出しを表す時に使います。

今回のサンプルコードでは、航空券、電車代など
旅費の項目のテキストを囲むときに使用しています。

表の説明を表すのにつかう<caption>タグ

その表の内容を表す題名をつけておけば。その表が
どんなものか分かりやすかったり、音声ブラウザでも
分かりやすくなります。場所としては<table>~</table>の
中に<caption>タグを使って書きます。そうすると
上の図のように「旅費の計算」と表示されます。

ちなみに<thead>、<tbody>、<tfoot>タグは
省略しても動きますが、表の作りを明確にするために
書いた方が良いと思います。

table要素のCSS

テーブルを作成する際には参考にしてください。

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を非表示

コメント

タイトルとURLをコピーしました