table-layout / テーブル
caption-side: top; キャプションを上に表示
caption-side: bottom; キャプションを下に表示
caption-side: left; キャプションを左に表示
caption-side: right; キャプションを右に表示
empty-cells: hide; 空セルもボーダーを表示しない
empty-cells: show; 空セルもボーダーを表示する
table-layout: fixed; 行単位で読み込む
・table-layoutの記述方法
table_a{
width: 500px;
table-layout: fixed;
}
[ table実例(css) 記述例 サンプル ]
[ table実例(xhtml/html) 記述例 サンプル ]
- [ table memo ]
- caption-side / empty-cells / border-spacing: *px; はIE6.0に対応していません。
- * xhtml/html
- summary 表説明
- cellspacing セル間隔
- cellpadding セル内余白
- valign 文字位置
- colspan、rowspan セル結合
- table実例のcss、xhtml/htmlは上記を参照してください。
- caption-side: 継承あり
- empty-cells: 継承あり
- table-layout: 継承なし
[ table 実例 サンプル ]
text / テキスト
line-height: 120%; 行間の調節
letter-spacing: 10px; 文字間の間隔を指定
text-align: center; 行揃え(中央)
text-align: left; 行揃え(左・デフォルト)
text-align: right; 行揃え(右)
text-decoration: blink; 点滅
text-decoration: overline; 上線
text-decoration: underline; 下線
text-decoration: underline overline; 上下線
text-decoration: line-through; 取り消し線
text-decoration: none; なし
* text-indent: 1em; 文字のインデント(字下げ)位置を指定
text-kashida-space: 20%; アラビア文字のテキスト余白比率を指定
text-overflow: ellipsis; テキストがオーバーフローした際は...を表示
text-overflow: clip; テキストがオーバーフローした際は非表示
text-transform: capitalize; 先頭文字を大文字に変換
text-transform: uppercase; 全大文字に変換
text-transform: lowercase; 全小文字に変換
text-underline-position: above; 縦書き文章の下線(右側)
text-underline-position: auto; 縦書き文章の下線(writing-modeの値がtb-rlにのみ右側。それ以外は左側)
text-underline-position: auto-pos; autoと同様
text-underline-position: below; 縦書き文章の下線(左側)
vertical-align: text-top; 文字の水平位置を指定(上)
vertical-align: middle; 文字の水平位置を指定(中)
vertical-align: text-bottom; 文字の水平位置を指定(下)
white-spacing: normal; 空白の間隔を指定
word-spacing: normal; 単語の間隔を指定
word-spacing: 0.5em; 単語の間隔を指定
* writing-mode: tb-rl; 文章を縦書き
- [ text memo ]
- text-shadow / text-align: justify; / text-decoration: blink;(IE不可) は対応ブラウザが限られています。
- writing-mode:tb-rl;(縦書き)はcss3では実装の可能性がありますが、Mozilla Firefox 1.5やOpera 9.1では反映しません。(IEでは可)
- またtext-indentに関してもMozilla Firefox 1.5やOpera 9.1では使用できません。
- vertical-alignは画像に対しても指定可能です。
