CSS border-collapse property

表（TABLE）に関するCSSプロパティの使い方をサンプルを交えてご紹介します。

border-collapse

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

書式

border-collapse: collapse

属性値

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

使用例と表示サンプル

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

<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を省略した場合は、縦の幅は横の幅と同じになります。

使用例

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

caption-side

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

なお、「JISX4051 日本語文書の組版方法」において、表のキャプションは表の上に配置するよう決められている。

11.6 表のキャプション及び注記処理

11.6.1 表のキャプション及び注記の配置位置及び組方向 表のキャプション及び注記の配置位置及び組方向は，次による。

a) キャプション及び注記の組方向は，表の全体の組方向と同一とする。

b) 表の全体が横書きのキャプションの配置位置は，表の全体の上側とし，表の全体の左右中央にそろえるか，又はキャプションの先頭を表の全体の左端からの指定された位置に配置する。表の全体が縦書きのキャプションの配置位置は，表の全体の右側とし，キャプションの先頭を表の全体の上端からの指定された位置に配置する。

書式

caption-side: align

属性値

align
表の見出しの位置を指定します。
値意味
top上（規定値）
right右
bottom下
left左
inherit継承

対応状況

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

1 topとbottomのみ対応

使用例

表の上にキャプションを配置する例を次に示す。

<table style="caption-side: top; border: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行

表の下にキャプションを配置する例を次に示す。

<table style="caption-side: bottom; border: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行 
<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: 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継承

使用例

<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上位のスタイルを継承

参考文献

World Wide Web Consortium (2022) CSS 2

日本産業標準調査会 (2022) 日本産業規格