表(テーブル、セル)

※表は、ページ(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では設定なし)