10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<table class=”dekotbl”>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</table>

CSSソース

.dekotbl {
border-collapse:collapse;
border:1px solid gray;
border-right:3px ridge gray; border-bottom:3px ridge gray;
}
.dekotbl td {
border:1px solid #000;
}

サンプル表示

セル1 セル2
セル3

解説

出っ張ったテーブルを表示するには、左上から光が当たり右と下に影が出来ていると錯覚させる方法が一般的です。
これにより、平面的なテーブルではなく出っ張って見える立体的なテーブルが擬似的に作れます。
やり方としては、左と上の枠線より1px以上太い枠線を右と下に指定します。さらに、右と下の枠線を山線にすると効果が上がります。
ここでの例では、左と上の枠線は太さ1pxの実線、右と上の枠線は太さ3pxの山線にしてあります。

HTMLソース

出っ張って見える様に表示したいテーブルにのみ適用させる為、テーブルにclassを指定します。
ここでは、<table class=”dekotbl”>としています。

CSSソース

■.dekotbl {~}
border-collapse:collapse;
これは、全ての枠線をくっつけて表示するという意味です。詳細はテーブルの枠線をくっつけるへ。

border:1px solid gray;
これは、全ての枠線に「太さ1pxで灰色な実線を表示する」という意味です。詳細はテーブルに直線の枠線を表示するへ。

border-right:3px ridge gray; border-bottom:3px ridge gray;
これが今回のキモです。
右と下の枠線を「太さ3pxで灰色な山線にする」という意味になります。
具体的にはborder-right:~;が右の枠線指定border-bottom:~;が下の枠線指定
右枠線と下枠線それぞれに3px(太さ3px)、ridge(山線)、gray(灰色)というのを指定しています。
これにより、上で説明した右と下に影が出来たように見えるテーブルが出来上がります。

■.dekotbl td {~}
border:1px solid #000;
これは、全セルの枠線を太さ1pxで灰色な実線にするという意味になります。

10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<table class=”stbl”>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td></td>
</tr>
</table>

CSSソース

.stbl {empty-cells:show;}
.stbl th, .stbl td {
border:1px solid #000;
}

サンプル表示

セル1 セル2
セル3

解説

何もしない状態では、<td>と</td>の間に何も書いてない場合、その部分の枠線が表示されません。
でも、何も書かれていないセルも見た目上枠線を表示したいという時にお試し下さい。

HTMLソース

空セルも枠線を表示したいテーブルにのみ適用させる為、テーブルにclassを指定します。
ここでは、<table class=”stbl”>としています。

CSSソース

empty-cells:show;
これは、空セルも表示するという意味です。そのまんまですね。
なので、枠線をくっつけたいテーブルにサンプルをコピー&ペーストするだけでOKです。

但し、古いブラウザでは対応していないものもあります。
この指定はCSS2という規格で規定された内容なので、IE6以前はそれに対応していなかった為です。
ということで、IE6以前のブラウザでも空セルの枠線を表示したい場合は<td>と</td>の間に全角の空白を書くしかありません。
半角の空白では無効なのでご注意を。

10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<table class=”ctbl”>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</table>

CSSソース

.ctbl {border-collapse:collapse;}
.ctbl th, .ctbl td {
border:1px solid #000;
}

サンプル表示

セル1 セル2

解説

HTMLソース

枠線をくっつけたいテーブルにのみ適用させる為、テーブルにidを指定します。
ここでは、<table id=”ctbl”>としています。

CSSソース

border-collapse:collapse;
これは、隣り合う枠線と枠線を重ねるという意味です。
なので、枠線をくっつけたいテーブルにサンプルをコピー&ペーストするだけでOKです。

10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<table class=”dtbl”>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</table>

CSSソース

.dtbl, .dtbl th, .dtbl td {
border:1px dotted #000;
}

サンプル表示

セル1 セル2

解説

HTMLソース

点線枠を表示させたいテーブルにのみ適用させる為、テーブルにidを指定します。
ここでは、<table id=”dtbl”>としています。

CSSソース

border:1px dotted #000;
これは、太さ1ピクセルの#000色の点線を表示するという意味です。
1pxが太さ、dottedが点線、#000が線の色を表しています。
なので、1pxの数字を増やせば太い線に。#000を別の色コードにすれば線の色が変わります。
また、dottedをdashedに変えると、点線が荒い点線に変わります。(IEではあまり変化がありませんが)

例)
border:3px dotted red;
太さ3pxの赤い点線枠

なお、.dtbl, .dtbl th, .dtbl tdについてですが、これはidがdtblのテーブル全体、dtblのthタグ、dtblのtdタグ全てに{}内のものを適用するという意味です。
つまりは、テーブルの外枠、thタグの周りの枠、tdタグの周りの枠全てに点線枠を引きますよということになります。
同じ指定をする時は、,で区切って並べれば1箇所にまとめられるので、慣れてきたらこういう記述法を取り入れてみると良いでしょう。

10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<table class=”btbl”>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</table>

CSSソース

.btbl, .btbl th, .btbl td {
border:1px solid #000;
}

サンプル表示

セル1 セル2

解説

HTMLソース

直線枠を表示させたいテーブルにのみ適用させる為、テーブルにidを指定します。
ここでは、<table id=”btbl”>としています。

CSSソース

border:1px solid #000;
これは、太さ1ピクセルの#000色の直線を表示するという意味です。
1pxが太さ、solidが直線、#000が線の色を表しています。
なので、1pxの数字を増やせば太い線に。#000を別の色コードにすれば線の色が変わります。

例)
border:3px solid red;
太さ3pxの赤い直線枠
なお、.btbl, .btbl th, .btbl tdについてですが、これはidがbtblのテーブル全体、btblのthタグ、btblのtdタグ全てに{}内のものを適用するという意味です。
つまりは、テーブルの外枠、thタグの周りの枠、tdタグの周りの枠全てに直線枠を引きますよということになります。
同じ指定をする時は、,で区切って並べれば1箇所にまとめられるので、慣れてきたらこういう記述法を取り入れてみると良いでしょう。