Search

Table - テーブル

  1. border-collapse〔テーブルの枠線の表示方法〕
  2. border-spacing〔テーブルのセルの間隔〕
  3. caption-side〔表題の表示位置〕
  4. empty-cells〔空のセルの枠線表示有無〕
  5. table-layout〔テーブルの横幅の計算方法〕

border-collapse
テーブルの枠線の表示方法

unknown

border-collapse: collapse | separate

border-collapseプロパティは、テーブルの枠線の表示方法を指定します。 table要素および"display:inline-table"の要素にのみ指定可能です。 デフォルト値は、collapse（結合ボーダーモデル）です。

border-collapseプロパティの値
値説明
collapse結合ボーダーモデル（デフォルト値）。
separate分離ボーダーモデル。
inherit親要素のスタイルを継承する。
※border-collapseプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。
サンプルを見る
<style type="text/css">
	table.col {
		border-spacing:5px;
		border-collapse:collapse;
	}
	table.sep {
		border-collapse:separate;
		border-spacing:5px;
	}
</style>

<table class="col" border="1">
	<tr><th>値</th><th>説明</th>
	<tr><td>border-collapse:collapse;</td><td>隣接する境界線は結合して表示。</td></tr>
</table>

<br>

<table class="sep" border="1">
	<tr><th>値</th><th>説明</th>
	<tr><td>border-collapse:separate;</td><td>境界線は分離して表示。</td></tr>
</table>
値説明
border-collapse:collapse;隣接する境界線は結合して表示。

値説明
border-collapse:separate;境界線は分離して表示。

border-spacing
テーブルのセルの間隔

unknown

border-spacing: <length> <length>

border-spacingプロパティは、border-collapseプロパティの値にseparate（分離境界モデル）を指定したテーブルにおいて、隣接するセル同士の間隔を指定します。 table要素および"display:inline-table"の要素にのみ指定可能です。 デフォルト値は、0です。 <長さ>は、値が1つなら「上下左右間隔」、2つなら「左右間隔 上下間隔」という指定になります。

border-spacingプロパティの値
値説明
<長さ>
<長さ> <長さ>		em、pxなど。
※%指定不可。
※負の値指定不可。
inherit親要素のスタイルを継承する。
※border-spacingプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。
サンプルを見る
<style type="text/css">
	table.spa0 {
		border-collapse:separate;
		border-spacing:0;
	}
	table.spa5 {
		border-collapse:separate;
		border-spacing:5px;
	}
</style>

<table class="spa0" border="1">
	<tr><th>値</th><th>説明</th>
	<tr><td>border-spacing:0;</td><td>セルの枠線の間隔なし。</td></tr>
</table>

<br>

<table class="spa5" border="1">
	<tr><th>値</th><th>説明</th>
	<tr><td>border-spacing:5px;</td><td>セルの枠線の間隔を5pxあける。</td></tr>
</table>
値説明
border-spacing:0;セルの枠線の間隔なし。

値説明
border-spacing:5px;セルの枠線の間隔を5pxあける。

caption-side
表題の表示位置

unknown

caption-side: top | right | bottom | left
IE未対応

caption-sideプロパティは、テーブルの表題を、テーブルの上下左右どの位置に表示するかを指定します。 caption要素および"display:table-caption"の要素にのみ指定可能です。 デフォルト値は、top（テーブルの上）です。

caption-sideプロパティの値
値説明
topテーブルの上に表示。
bottomテーブルの下に表示。
leftテーブルの左に表示。
rightテーブルの右に表示。
inherit親要素のスタイルを継承する。
※border-spacingプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。
サンプルを見る
<table border="1">
	<caption style="caption-side:top;">表題</caption>
	<tr><th>値</th><th>説明</th>
	<tr><td>caption-side:top;</td><td>テーブルの上。</td></tr>
</table>

<br><br>

<table border="1">
	<caption style="caption-side:bottom;">表題</caption>
	<tr><th>値</th><th>説明</th>
	<tr><td>caption-side:bottom;</td><td>テーブルの下。</td></tr>
</table>

<br><br>

<table border="1">
	<caption style="caption-side:left;">表題</caption>
	<tr><th>値</th><th>説明</th>
	<tr><td>caption-side:left;</td><td>テーブルの左。</td></tr>
</table>

<br><br>

<table border="1">
	<caption style="caption-side:right;">表題</caption>
	<tr><th>値</th><th>説明</th>
	<tr><td>caption-side:right;</td><td>テーブルの右。</td></tr>
</table>
表題
値説明
caption-side:top;テーブルの上。


表題
値説明
caption-side:bottom;テーブルの下。


表題
値説明
caption-side:left;テーブルの左。


表題
値説明
caption-side:right;テーブルの右。

empty-cells
空のセルの枠線表示有無

unknown

empty-cells: show | hide

empty-cellsプロパティは、空のセルの枠線の表示・非表示を指定します。 tr要素・td要素および"display:table-cell"の要素にのみ指定可能です。 デフォルト値は、show（枠線を表示する）です。

empty-cellsプロパティの値
値説明
show枠線を表示する（デフォルト値）。
hide枠線を非表示にする。
inherit親要素のスタイルを継承する。
※empty-cellsプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。
サンプルを見る
<style type="text/css">
	table.ec_show {
		empty-cells:show;
	}
	table.ec_hide td {
		empty-cells:hide;
	}
</style>

<table class="ec_show" border="1">
	<tr><th>値</th><th>説明</th>
	<tr><td>empty-cells:show;</td><td>空のセルの枠線を表示。</td></tr>
	<tr><td></td><td></td></tr>
	<tr><td></td><td></td></tr>
</table>

<br>

<table class="ec_hide" border="1">
	<tr><th>値</th><th>説明</th>
	<tr><td>empty-cells:hide;</td><td>空のセルの枠線を非表示。</td></tr>
	<tr><td></td><td></td></tr>
	<tr><td></td><td></td></tr>
</table>
値説明
empty-cells:show;空のセルの枠線を表示。

値説明
empty-cells:hide;空のセルの枠線を非表示。

table-layout
テーブルの横幅の計算方法

unknown

table-layout: auto | fixed

table-layoutプロパティは、テーブルの横幅の計算方法を指定します。 table要素および"display:inline-table"の要素にのみ指定可能です。 デフォルト値は、auto（自動表組みアルゴリズム）です。

table-layoutプロパティの値
値説明
auto自動表組みアルゴリズムを用いる（デフォルト値）。
fixed固定表組みアルゴリズムを用いる。
inhrit親要素のスタイルを継承する。
※table-layoutプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。
サンプルを見る
<style type="text/css">
	table.auto {
		table-layout:auto;
		width:200px;
	}
	table.fixed {
		table-layout:fixed;
		width:200px;
	}
	table.auto td,
	table.fixed td {
		width:100px;
	}
</style>

<table class="auto" border="1">
	<tr><th>値</th><th>説明</th>
	<tr><td>table-layout:auto;</td><td>自動表組みアルゴリズム。</td></tr>
</table>

<br>

<table class="fixed" border="1">
	<tr><th>値</th><th>説明</th>
	<tr><td>table-layout:fixed;</td><td>固定表組みアルゴリズム。</td></tr>
</table>
値説明
table-layout:auto;自動表組みアルゴリズム。

値説明
table-layout:fixed;固定表組みアルゴリズム。

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2024 PHP & JavaScript Room All Rights Reserved.

pagetop