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>
次に、隣のセルの枠線と重ねて表示する表の例を示します。
<table border="1" style="border-collapse:collapse">
<tr>
<td>border-collapse</td>
<td>collapse</td>
</tr>
</table>
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>
caption-side
スタイルシート属性caption-sideは、表(テーブル)の見出しの位置を指定します。
書式
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 border="1" style="caption-side: top">
<caption>caption</caption>
<tr>
<td>cell #1</td>
</tr>
</table>
<table border="1" style="caption-side: right">
<caption>caption</caption>
<tr>
<td>cell #1</td>
</tr>
</table>
<table border="1" style="caption-side: bottom">
<caption>caption</caption>
<tr>
<td>cell #1</td>
</tr>
</table>
<table border="1" style="caption-side: left">
<caption>caption</caption>
<tr>
<td>cell #1</td>
</tr>
</table>
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>
<table border="1" style="empty-cells: hide">
<tr>
<td>cell #1</td>
<td></td>
<td>cell #3</td>
</tr>
</table>
table-layout
スタイルシート属性table-layoutは、表(テーブル)の横幅を指定します。
書式
table-layout: layout
属性値
- layout
- 表の横幅を指定します。
値 | 意味 |
auto | 自動(規定値) |
fixed | 固定 |
inherit | 上位のスタイルを継承 |
参考文献
World Wide Web Consortium (2022) CSS 2