CSS: <table>関連スタイルシート適用例

2005年10月27日 12:08 | | コメント(0) | トラックバック(1)

<table> タグには、以下の専用スタイルシートがある。ここでは、これらの適用例をメモっておく。

caption-side

書式

caption-side: 位置;

位置には、top(上)、bottom(下)、right(右)、left(左)、inherit(継承)のいずれかを指定する。

使用例

コードは以下の通り。 

<table border="1">
<caption style="caption-side:位置;">位置</caption>
<tr>
<td>項目１</td><td>項目２</td><td>項目３</td>
</tr>
<tr>
<td>項目４</td><td>項目５</td><td>項目６</td>
</tr>
</table>

使用例は以下の通り。ブラウザのバージョンによっては、正しく表示されない。IE6では全て上に表示される。

top
項目１項目２項目３
項目４項目５項目６
bottom
項目１項目２項目３
項目４項目５項目６
right
項目１項目２項目３
項目４項目５項目６
left
項目１項目２項目３
項目４項目５項目６

table-layout

書式

table-layout: レイアウト方法;

レイアウト方法には、auto(規定値：自動)、fixed(固定)、inherit(継承)のいずれかを指定する。

使用例

コードは以下の通り。 

<table border="1" style="table-layout: レイアウト方法;">
<caption>レイアウト方法</caption>
<tr>
<td>項目１</td><td>項目２</td><td>項目３</td>
</tr>
<tr>
<td>項目４</td><td>項目５</td><td>項目６</td>
</tr>
</table>

使用例は以下の通り。fixedを指定して、widthを指定するとその幅で固定されるが、widthを指定しない場合、横幅いっぱいまで広がるようだ (IE6)。

auto
項目１項目２項目３
項目４項目５項目６
fixed
項目１項目２項目３
項目４項目５項目６

border-collapse

書式

border-collapse: 枠線の表示形式;

枠線の表示形式には、collapse(隣のセルの枠線と重ねて表示)、separate(隣のセルとすこし離して表示)、inherit(継承)のいずれかを指定する。

使用例

コードは以下の通り。 

<table border="1" style="border-collapse: 枠線の表示形式;">
<caption>枠線の表示形式</caption>
<tr>
<td>項目１</td><td>項目２</td><td>項目３</td>
</tr>
<tr>
<td>項目４</td><td>項目５</td><td>項目６</td>
</tr>
</table>

使用例は以下の通り。

collapse
項目１項目２項目３
項目４項目５項目６
separate
項目１項目２項目３
項目４項目５項目６

border-spacing

書式

border-spacing: 幅;

幅には、5pxのような数値を指定する。このスタイルシートは、border-collapse:separate; を指定した場合の隙間の幅である。"5px 3px;" のような指定もできる。この場合、縦が5px、横が3pxとなる。

使用例

コードは以下の通り。 

<table border="1" style="border-collapse:separate;
                            border-spacing:幅;">
<caption>幅</caption>
<tr>
<td>項目１</td><td>項目２</td><td>項目３</td>
</tr>
<tr>
<td>項目４</td><td>項目５</td><td>項目６</td>
</tr>
</table>

使用例は以下の通り。IE6では、未対応のようだ。

1px
項目１項目２項目３
項目４項目５項目６
10px
項目１項目２項目３
項目４項目５項目６

empty-cells

書式

empty-cells: モード;

モードには、show(表示する)、hide(表示しない)、inherit(継承)のいずれかを指定する。中身がないセルの枠線を表示するかしないかの指定である。

使用例

コードは以下の通り。 

<table border="1" style="empty-cells: モード;">
<caption>モード</caption>
<tr>
<td>項目１</td><td>項目２</td><td>項目３</td>
</tr>
<tr>
<td>項目４</td><td>項目５</td><td>項目６</td>
</tr>
</table>

使用例は以下の通り。IE6は未対応のようだ。

show
項目１項目２項目３
項目５項目６
hide
項目１項目２項目３
項目５項目６

カテゴリ:

前の記事:Excel 関数 ISBLANK：未入力の場合に何も表示しない方法
次の記事:HTML: <span class="code">&lt;table&gt;</span>タブの属性

トラックバック(1)

このブログ記事に対するトラックバックURL: http://itsmemo.com/mt/mt-tb.cgi/23

※スパム防止のため、管理人がトラックバック内容確認後、公開されます。

にほんブログ村BLOG - ブログ村・村長(そんちょう)の一気読み　10/27-2 (2005年10月27日 15:04)

にほんブログ村に新規登録してくださった参加メンバーの方のプロフィール一覧です。 それぞれのブロガーがブログ村の中で新しいブログ仲間と出会って、みんなが豊... 続きを読む

コメントする