border-collapse

スタイルシート属性 border-collapse は、表(テーブル)の枠線との間の大きさを指定します。

書式

border-collapse: collapse

属性値

collapse
以下の値から選びます。
説明
collapse隣のセルの枠線と重ねて表示
separate隣のセルの枠線と離して表示(規定値)
inherit上位のスタイルを継承

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0.4
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例と表示サンプル

次に、隣のセルの枠線と離して表示する表の例を示します。

<table border="1" style="border-collapse:separate">
 <tr><td>border-collapse</td><td>separate</td></tr>
</table>
border-collapseseparate

次に、隣のセルの枠線と重ねて表示する表の例を示します。

<table border="1" style="border-collapse:collapse">
 <tr><td>border-collapse</td><td>collapse</td></tr>
</table>

border-collapsecollapse

border-spacing

スタイルシート属性border-spacingは、表 (テーブル) の枠線との間の大きさを指定します。

書式

border-spacing: horizontal vertical

属性値

horizontal
横の幅を10pxのように数値と単位で指定します。
vertical
縦の幅を10pxのように数値と単位で指定します。verticalを省略した場合は、縦の幅は横の幅と同じになります。

対応状況

Webブラウザ対応状況
Internet Explorer 6.0×
Internet Explorer 8
FireFox 3.0.4
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

<table border="1" style="border-spacing: 30px 15px">
<tr><td>cell #1</td></tr>
</table>
cell #1

caption-side

スタイルシート属性caption-sideは、表(テーブル)の見出しの位置を指定します。

書式

caption-side: align

属性値

align
表の見出しの位置を指定します。
意味
top上(規定値)
right
bottom
left
inherit継承

対応状況

Webブラウザ対応状況
Internet Explorer 6.0×
Internet Explorer 81
FireFox 3.0.4
Google Chrome 0.31
Opera 9.621
Safari 3.2.11

1 topとbottomのみ対応

使用例

<table border="1" style="caption-side: top">
<caption>caption</caption>
<tr><td>cell #1</td></tr>
</table>
caption
cell #1
<table border="1" style="caption-side: right">
<caption>caption</caption>
<tr><td>cell #1</td></tr>
</table>
caption
cell #1
<table border="1" style="caption-side: bottom">
<caption>caption</caption>
<tr><td>cell #1</td></tr>
</table>
caption
cell #1
<table border="1" style="caption-side: left">
<caption>caption</caption>
<tr><td>cell #1</td></tr>
</table>
caption
cell #1

empty-cells

スタイルシート属性empty-cellsは、表(テーブル)の空のセルの表示方法を指定します。

書式

empty-cells: display

属性値

display
表の空のセルの表示方法を指定します。
意味
show表示する
hide表示しない
inherit継承

対応状況

Webブラウザ対応状況
Internet Explorer 6.0×
Internet Explorer 8
FireFox 3.0.4
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

<table border="1" style="empty-cells: show">
<tr><td>cell #1</td><td></td><td>cell #3</td></tr>
</table>
cell #1cell #3
<table border="1" style="empty-cells: hide">
<tr><td>cell #1</td><td></td><td>cell #3</td></tr>
</table>
cell #1cell #3

table-layout

スタイルシート属性table-layoutは、表(テーブル)の横幅を指定します。

書式

table-layout: layout

属性値

layout
表の横幅を指定します。
意味
auto自動(規定値)
fixed固定
inherit上位のスタイルを継承