★このページでは、CSSの基本的な仕様について解説しています。

テーブルに関する設定は、IE6.0以前、Netscape6.2以前など主要なブラウザで未対応の場合が多いようです。

各プロパティの対応状況については、それぞれの項目を参照して下さい。

　

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL10. テーブルに関する設定　その2 ★ 枠線の表示、非表示とセル間隔

　

１．隣接する枠線の表示、非表示 （IE4.0やNetscapeなど、対応していないブラウザやバージョンがあります。）

border-collapse: <値>;

テーブルは表全体を囲む四角の中に、セルを囲む四角が升目状に配置されているわけですが、このためそれぞれの枠線が隣り合って二重になる場合が生じます。その時、2本とも表示するのか、片方だけ表示するのかを指定することが出来ます。このプロパティに指定できる<値>は、以下の２つです。

separate ... 隣接する2本を、どちらも表示する。（デフォルト）

collapse ... 隣接する2本のうち、優先順位の高いものの設定に応じて1本のみ表示する。

　

※隣接する2本に異なった設定がされている場合の優先順位は以下の通りです。

※「border-color:」のみが異なる場合は、設定されている要素によって優先順位が決まります。

　

※上の例で、CSS外部ファイルとHTMLのサンプル部分は以下のように書かれています。

body { background-color: #9b9bff;
color: #036; 
}

table { width: 200px;
height: 120px; 
border: 3px outset; 
border-collapse: separate (collapse);
}

td { border: 1px solid; 
text-align: center; 
font-weight: bold; 
font-size: 20pt; 
}

サンプル部分のHTML記述

<table> 
<tr> 
   <td> 1.</td> 
   <td> 2.</td> 
   <td> 3. </td> 
</tr> 
<tr> 
   <td> 4. </td> 
   <td> 5. </td> 
   <td> 6. </td> 
</tr> 
</table> 

　

　

　

２．空セルの枠線の表示、非表示 （IE6.0やNetscape4.7以前など、対応していないブラウザやバージョンがあります。）

empty-cells: <値>;

内容が入っていないセルや、「visibility: hidden;」に指定されていて、視覚的に空白となるセルの枠線の表示、非表示を設定できます。このプロパティに指定できる<値>は、以下の２つです。なお、「border-collapse: collapse;」に指定されている時は、この設定は無視されます。

hide ... 空セルの枠線を表示しない。（デフォルト）

show ... 空セルの枠線を表示する。

(下のサンプルは画像です。IE6.0は対応していないので、実際には「show」を指定しても無視されて枠線は表示されません。)

　

※上の例で、CSS外部ファイルとHTMLのサンプル部分は以下のように書かれています。

body { background-color: #9b9bff;
color: #036; 
}

table { width: 200px;
height: 120px; 
border: 3px outset; 
border-collapse: separate;
}

td { border: 1px solid; 
text-align: center; 
font-weight: bold; 
font-size: 20pt; 
empty-cells: hide (show);
}

サンプル部分のHTML記述

<table> 
<tr> 
   <td> </td> 
   <td> 2.</td> 
   <td> 3. </td> 
</tr> 
<tr> 
   <td> 4. </td> 
   <td> 5. </td> 
   <td> </td> 
</tr> 
</table> 

　

　

　

３．セル間隔 （IE6.0やNetscape4.7以前など、対応していないブラウザやバージョンがあります。）

border-spacing: <上下左右>;

border-spacing: <左右> <上下>;

HTMLでは「cellspacing="数値"」で指定していたセル間隔を（cf. 初級篇1.Vol4-2★罫線とスペースに関する設定）、CSSで設定できます。<値>が１つの時は上下左右同じ幅で、半角スペースを入れて２つ並べた時は、それぞれ「左右」「上下」の幅として表示されます。これらの<値>は、「数値+単位」で指定します。なお、これは隣接する枠線どうしの幅を設定するということですから、「border-collapse: collapse;」に指定されている場合は無視されます。

※上の例で、CSS外部ファイルとHTMLのサンプル部分は以下のように書かれています。

(このサンプルは画像です。IE6.0は対応していないので、実際にはセル間隔を指定しても無視されて表示には反映されません。)

body { background-color: #9b9bff;
color: #036; 
}

table { width: 200px;
height: 120px; 
border: 3px outset; 
border-collapse: separate;
border-spacing: 10px;
}

td { border: 1px solid; 
text-align: center; 
font-weight: bold; 
font-size: 20pt; 
}

サンプル部分のHTML記述

<table> 
<tr> 
   <td> 1.</td> 
   <td> 2.</td> 
   <td> 3.</td> 
</tr> 
<tr> 
   <td> 4.</td> 
   <td> 5.</td> 
   <td> 6.</td> 
</tr> 
</table> 

　

　

初級篇2.VOL10. テーブルに関する設定・その1 <<

>> 初級篇2.VOL11. リストマークに関する設定・その1

　

　

2007.2.15.+2.23.-2.24.