※表は、ページ(html)での設定でいいような気もしますが、時と場合によっては、一斉変更あるかもを想定してスタイルシートでの変更をあげておきます。
※プログラムからオートに表を作成する(BBSなど)には、この設定が必要になりますね。
※カラーリスト(ブラウザ対応色名)
※サイズ指定単位リスト
※線種リスト
1.枠線のデザイン
●指定例 table, th, td { border-style: solid; border-color: orange; border-width: 2px; } |
表全体、見出しセル、普通のセルの指定と宣言 線種:実線 線の色:オレンジ 線の太さ:1px |
2.1つの表を分けてそれぞれを指定
●指定例 table { border-color: blue; border-width: 10px; background-color: lightyellow; } th { background-color: yellow; border-color: green; border-width: 5px; } td { border-style: solid; border-color: orange; border-width: 2px; } |
表全体 見出しセル 普通のセル ※指定内容は1を参照 |
3.表(セル)のクラス分け
●特定な表(セル)のみ他の表(セル)とは別のスタイルにしたい場合
●webページのhtmlモードで | |
・別スタイルにしたい表(セル)にクラス名をつける ・同じクラス名のは複数あっても同じスタイルになる ●例:表 <table class=2> ●例:th(見出し)セル <th class=tokuberu> ●例:tdセル <td class=tokushu> |
|
●スタイルシート | |
●指定例:表 table { border-color: blue; border-width: 1px; } table.2 { border-width: 10px; background-color: lightblue; border-style: dotted; } |
テーブル全体の指定 2と名前をつけたテーブルの指定 ※セルも同じように指定 |
4.セル内の文字の表示位置指定
●特定な表(セル)のみ他の表(セル)とは別のスタイルにしたい場合
●横位置指定 | |
●指定例 th { text-align: left; } td { text-align: right; } td.tokushu { text-align: center } |
指定無しならセルの中央に表示される見出しセル(th)をわざと左寄せに指定 普通セルは指定無しなら左寄せになるが、それを右寄せに指定 tokushuというクラス名をつけたセルは、中央寄せに指定 (この場合、htmlのそのセルに"tokushu"というクラス名をつけておかないと反映されない<class=tokushu) |
●縦位置指定 | |
●指定例 th { text-align: left; } td { text-align: right; } td.tokushu { text-align: center } |
指定無しならセルの中央に表示される見出しセル(th)をわざと左寄せに指定 普通セルは指定無しなら左寄せになるが、それを右寄せに指定 tokushuというクラス名をつけたセルは、中央寄せに指定 (この場合、htmlのそのセルに"tokushu"というクラス名をつけておかないと反映されない<class=tokushu) |
●縦位置指定(下の記述例は左側2列をクラス分けして実際に指定している) | ||
td.1{ vertical-align: top; } |
上揃え | (htmlでは設定なし) |
td.2{ vertical-align: middle; } |
中央揃え | (このセルの行はhtmlでわざと下に設定) |
td.3{ vertical-align: bottom; } |
下揃え | (htmlでは設定なし) |