制作者の活動(PR)。
- 堀北真希ちゃんにうさみみを着けた女子大生キャラクタ。次ぎ
-
- 主な作品
-
人気女優をモデルにした制作者のオリジナルキャラクタのイラスト例とそれを組み込んだアニメーション動画
- サイト表紙
- しらぎくのウェブサイト作成入門
- CSS(カスケーディングスタイルシート)
- 表(テーブル)専用のプロパティ
表(テーブル)専用のプロパティ。
表(テーブル)関連の要素には、専用のプロパティが用意されています。
- これらのプロパティは表(テーブル)関連の要素以外の要素にも適用させる事は仕様上は可能ですが、その為にはdisplayプロパティを表(テーブル)形式の値にしなければなりません。しかしながら、これらの値をサポートしているブラウザは未だに殆ど無く、結局事実上表(テーブル)関連の要素以外の要素には無効となります(displayプロパティの説明では、表関連の表示形式は割愛しました)。
- 以下のプロパティは、基本的に特に指定したものを除いて<table>要素に当てるものです。
- ネットスケープ 4.xでは、以下のプロパティは全て無効です。ネットスケープ 4.xについては、参考事項として後述しておきました。
表(テーブル)専用のプロパティ・目次。
table-layoutプロパティ…表(テーブル)の表示方法(表の各列の幅の取り方)の指定。
table-layoutプロパティは、表の表示方法(表の各列の幅の取り方)を指定します。
table-layoutプロパティの値として現在有効なのは、以下の二つです。
auto- 表のセルの幅の取り方はブラウザ任せとなります(デフォルト値)。
fixed-
固定レイアウトアルゴリズムを採用します。
固定レイアウトアルゴリズムとは、予め決められている表の幅と一番上のセルの幅に合わせて表の各列の幅を決めていく方法です。
具体的には、以下のような感じになります。
- 表全体の幅と一部の列の幅が指定されている場合、まず幅を指定されている列に対して幅を確保します。
- 残りの列に対しては余った幅を等分します。
尚、以下の点に注意して下さい。
- 幅の値が矛盾する場合(各列の幅の合計が表に指定された幅より大きい場合など)についての措置は、仕様書では未定義です。ある列が消されたり、重なったりする可能性もあるそうです。
- 表の幅が指定されていない場合、固定アルゴリズムの指定は無効となり、「
auto」値と同じ処理になります。
border-collapseプロパティ…各セルの枠線の扱い。
border-collapseプロパティは、各セルの枠線の扱いを指定します。
具体的には、各セルの枠線を分離させる(枠線分離モデル)か、各セルの枠線をくっつける(枠線結合モデル)かです。
- 前者の場合、表示された表は矩形の枠を隙間を空けて並べたような表になり、後者の場合は縦横に線が引かれた網目状の表になります。
border-collapseプロパティが取れる値は以下の通りです。
collapse- 枠線結合モデルを採ります(デフォルト)。
- separate
- 枠線分離モデルを採ります。
- ブラウザのデフォルトスタイルでは、多くの場合separate値となりますが、仕様上のデフォルト値はcollapseとなります。
- このプロパティは下位要素にも継承されます。
border-spacingプロパティ…各セルの枠間の空白の幅。
border-spacingプロパティは枠線分離モデルを指定している場合の、枠と枠の間の空白の幅を指定します。
- <table>要素のcellspacingプロパティを実現したものです。
- cellspacingプロパティを指定している場合は、CSSの指定が優先されます。
- 尚、各セルにmarginプロパティを当てても、セル間の空白の幅を調節する事は出来ません。
border-spacingプロパティで使える単位はいろいろ使えますが、以下の単位だけ覚えておけばよいでしょう。
px- ピクセル単位です。
尚、仕様上のデフォルト値は「0px」ですが、実際に0pxだと枠線結合モデルとなるためか、実装は「1px」をデフォルトとしているようです。
- インターネットエクスプローラでは無効です。従ってインターネットエクスプローラではたとえこのプロパティが使われていてもcellspacing属性値を採ります。
empty-cellsプロパティ…空セルの扱い。
empty-cellsプロパティは、空のセルの枠線を表示させるかどうかを指定します。
empty-cellsプロパティが取れる値は以下の通りです。
show- 空セルも枠線を表示させます(デフォルト)。
hide- 空セルの枠線を非表示にします。
empty-cellsプロパティを使う上で注意すべき事。
- インターネットエクスプローラでは無効です。その他のブラウザでも実装に問題があるようです。
caption-sideプロパティ…<caption>要素の配置の指定。
caption-sideプロパティは、<caption>要素の配置される位置を指定します。
- caption-sideプロパティは<caption>要素或いは<caption>要素式のボックス(displayプロパティで指定出来る事になっておりますが、実際には殆ど実装されておりません)にのみ有効です。
<caption>要素は、表の本体とは分離しているため、表から見た位置をこのcaption-sideプロパティで指定します。
caption-sideプロパティが取れる具体的な値は以下の通りです。
- top
- 表の上に配置します(デフォルト)。
- bottom
- 表の下に配置します。
- left
- 表の左に配置します。
- right
- 表の右に配置します。
これに加えて、text-alignプロパティで横方向のテキスト配置を、vertical-alignプロパティで縦方向のテキスト配置をそれぞれ指定出来ます。
参考・ネットスケープ 4.xでのテーブルスタイル。
ネットスケープ 4.xでは、テーブルに関して、以下のようになります。
- 枠線
-
CSSでは変更出来ません。
枠線の太さは<table>要素のborder属性値に従います。
枠線の色は<table>要素のbordercolor属性(HTMLとしては非公式属性)で指定します。
- 枠と枠の間の隙間
- これもCSSでは変更出来ません。<table>要素のcellspacing属性に従います。
- 枠内の余白
-
CSSで変更出来ます。テーブルにCSSでスタイルを当てている場合は<table>要素のcellpadding属性は無効となります。
<table>要素に当たるセレクタにpaddingプロパティを用いて変更します。
- <th>要素や<td>要素に当たるセレクタに指定すると、正常に表示出来なくなります。
- 枠内の文字のスタイル
-
<caption>要素, <tr>要素及び<td>要素にスタイルを当てる事が出来ますが、一部プロパティが無効になる場合もあります。
但し、<caption>要素の表示位置をCSSで変更する事は出来ません。
しらぎくのウェブサイト作成入門サイトマップ
