Home > ★Lesson⇒ menu  ★html_Lesson⇒  01Spell Lesson > 02sample  ★css_Lesson⇒  01Spell Lesson№1 > 02Spell Lesson№2 > 03sample 

●CSSのサンプル例→ > №01 > №02 > №03 > №04 > №05 > №06 > №00 > END

05css_table(テーブル)

05css_table(テーブル)

01width/height

widthプロパティ、heightプロパティで、幅や高さを指定します。 ここでは、テーブルやセルに対する幅や高さの設定を紹介します。 適用要素(width)：すべての要素（置換要素以外のインライン要素とtr要素、thead要素、tbody要素、tfoot要素を除く） 適用要素(height)：すべての要素（置換要素以外のインライン要素とcol要素、colgroup要素を除く）

値 解説
実数値+単位 幅や長さを数値（px等の単位をつけて）で設定
%値 幅や長さを親ボックスに対する割合で設定
auto 幅や長さをブラウザに依存して設定（初期値）
※CSS 

CSS
table {
	width: 300px;
	height: 100px;
	border: 1px solid #cccccc;
}
th.left,td.left {
	width: 100px;
	height: 50px;
	border: 1px solid #cccccc;
}
th.right,td.right {
	width: 200px;
	height: 50px;
	border: 1px solid #cccccc;
}

※HTML
<table>
<tr>
	<th class="left">見出し</th>
	<th class="right">見出し</th>
</tr>
<tr>
	<td class="left">データ</td>
	<td class="right">データ</td>
</tr>
</table>
※★sample
★①01width/heightサンプル

▲Ｔｏｐ

02padding

paddingプロパティは、ボックスの枠線と文字列（内容）の間隔を設定します。 ここでは、セルに対するパディングの設定を紹介します。 適用要素：すべての要素（tr要素、thead要素、要素、tfoot要素、col要素、colgroup要素を除く）

値 解説
実数値+単位 パディングを実数値（px等の単位をつけて）で設定
%値 パディングを親ボックスの幅に対する割合で設定
※CSS 

指定方法
padding: 10px;（上下左右）
padding: 10px 20px;（上下）（左右）
padding: 10px 20px 10px;（上）（左右）（下）
padding: 10px 20px 10px 20px;（上）（右）（下）（左）

CSS
td {
	padding: 10px;
}

※HTML
<table>
<tr>
	<td>データ</td>
	<td>データ</td>
</tr>
</table>
※★sample
★①02paddingサンプル

▲Ｔｏｐ

03border

borderプロパティは、設定をまとめて指定します。 ここでは、テーブル、セルのボーダーに関する設定を紹介します。 適用要素：すべての要素

値
border-colorプロパティで指定する値
border-widthプロパティで指定する値
border-styleプロパティで指定する値
※CSS 

CSS
table {
	width: 300px;
	height: 100px;
	border: 1px solid #cccccc;
}
th,td {
	border: 1px solid #cccccc;
}

※HTML
<table>
<tr>
	<th>見出し</th>
	<th>見出し</th>
</tr>
<tr>
	<td>データ</td>
	<td>データ</td>
</tr>
</table>
※★sample
★①03borderサンプル

▲Ｔｏｐ

04border-collapse

border-collapseプロパティは、隣り合うセルの境界線の表示（間隔を開ける、開けない）を設定するプロパティです。 適用要素：table要素

値 解説
collapse 境界線を重ねて表示
形式等、異なる境界線が重なり合った場合、優先順位に従って表示されます。
separate 境界線の間隔を開けて表示（初期値）
※CSS 

CSS
table {
	width: 300px;
	height: 100px;
	border: 1px solid #cccccc;
	border-collapse: collapse;
}
th,td {
	border: 1px solid #cccccc;
}

※HTML
<table>
<tr>
	<th>見出し</th>
	<th>見出し</th>
</tr>
<tr>
	<td>データ</td>
	<td>データ</td>
</tr>
</table>
※★sample
★①04border-collapseサンプル

▲Ｔｏｐ

05border-spacing

border-spacingプロパティは、隣り合うセルの境界線の間隔を設定するプロパティです。 適用要素：table要素 *border-collapseでseparateを指定している場合のみ有効。 *IEは標準モードでのみ機能（IE7以下は未対応）

値 解説
実数値+単位 間隔を実数値（px等の単位をつけて）で設定
※CSS 

指定方法
border-spacing: 5px; （上）（下）（左）（右）;
border-spacing: 5px 10px; （左右）（上下）;

CSS
table {
	width: 300px;
	height: 100px;
	border: 1px solid #cccccc;
	border-collapse: separate;
	border-spacing: 5px;
}
th,td {
	border: 1px solid #cccccc;
}

※HTML
<table>
<tr>
	<th>見出し</th>
	<th>見出し</th>
</tr>
<tr>
	<td>データ</td>
	<td>データ</td>
</tr>
</table>
※★sample
①05border-spacingサンプル

▲Ｔｏｐ

06table-layout

table-layoutプロパティは、テーブルの表示方法を設定するプロパティです。 適用要素：table要素

値 解説
auto 自動レイアウト（初期値）
テーブル全体を読み込んでから表示します
fixed 固定レイアウト
最初の横一列分を読み込んでから一列ごとに表示します
※CSS 

CSS
table {
	width: 300px;
	height: 100px;
	border: 1px solid #cccccc;
	table-layout: fixed;
}
th,td {
	border: 1px solid #cccccc;
}

※HTML
<table>
<tr>
	<th>見出し</th>
	<th>見出し</th>
</tr>
<tr>
	<td>データ</td>
	<td>データ</td>
</tr>
</table>
※★sample
★①06table-layoutサンプル

▲Ｔｏｐ

07empty-cells

empty-cellsプロパティは、空白セルのボーダーの表示・非表示を設定するプロパティです。 適用要素：th要素、td要素 *border-collapseでseparateを指定している場合のみ有効。 *IEは標準モードでのみ機能（IE7以下は未対応）

tr>
値 解説
show 空セルの境界線を表示（初期値）
hide 空セルの境界線を表示しない
※CSS 

table {
	width: 300px;
	height: 100px;
	border: 1px solid #cccccc;
	empty-cells: show;
}
th,td {
	border: 1px solid #cccccc;
}

※HTML
<table>
<tr>
	<th></th>
	<th>見出し</th>
</tr>
<tr>
	<td>データ</td>
	<td></td>
</tr>
</table>
※★sample
★①07empty-cellsサンプル

▲Ｔｏｐ

08caption-side

caption-sideプロパティは、テーブルのキャプションの位置を設定するプロパティです。 適用要素：caption要素 *leftとrightの指定はブラウザによっては機能しない場合があります *leftまたはrightを指定する場合caption要素のwidthを指定しないとうまく機能しません *IEは標準モードでのみ機能（IE7以下は未対応）

値 解説
tpo テーブルの上に表示（初期値）
bottom テーブルの下に表示
left テーブルの左に表示
rigth テーブルの右に表示
※CSS 

CSS
table {
	width: 300px;
	height: 100px;
	border: 1px solid #cccccc;
}
td {
	border: 1px solid #cccccc;
}
caption {
	caption-side: bottom;
	text-align: left;
}

※HTML
<table>
<caption>bottom</caption>
<tr>
	<td>データ</td>
	<td>データ</td>
</tr>
</table>
※★sample
★①08caption-sideサンプル

▲Ｔｏｐ

09visibility

visibilityプロパティは、テーブルの行または列の表示・非表示を設定するプロパティです。 適用要素：すべての要素 *IEは標準モードでのみ機能（IE7以下、SAFARI、CHROME、OPERAは未対応）

値 解説
visible ボックスを表示（初期値）
hidden ボックスの非表示。空白の領域がそのまま表示されます。
collapse テーブルの行、列（グループ）を非表示。次の行、列（グループ）は詰めて表示されます。
テーブル以外に指定した場合は、hiddenと同様の結果になります。
※CSS 

CSS
table,th,td {
	width: 300px;
	border: 1px solid #cccccc;
}
tr.sample {
	visibility: collapse;
}

※HTML
<table>
<tr>
	<th>見出し1-1</th>
	<th>見出し1-2</th>
</tr>
<tr class="sample">
	<td>データ2-1</td>
	<td>データ2-2</td>
</tr>
<tr>
	<td>データ3-1</td>
	<td>データ3-2</td>
</tr>
</table>
※★sample
★①09visibilityサンプル

▲Ｔｏｐ

10text-align/vertical-align

text-alignプロパティは、横方向の位置を指定します。 適用要素：ブロックレベル要素 vertical-alignプロパティは、縦方向の位置を指定します。 適用要素：インライン要素、th要素、td要素 ここでは、テーブルに対する縦・横方向の位置の設定を紹介します。

値 (text-align)
left 左寄せで表示します（初期値：文字表記がltrの場合）
center 中央で表示します
right 右寄せで表示します
justify 両端揃えで表示します
値 解説(vertical-align)
baseline 親ボックスのベースラインに揃えます（初期値）
top ボックスの上位置に揃えます
middle ボックスの中心位置に揃えます
bottom ボックスの下位置に揃えます
※CSS 

CSS
td {
	text-align: center;
	vertical-align: top;
}

※HTML
<table>
<tr>
	<td>データ</td>
	<td>データ</td>
</tr>
</table>
※★sample
★①10text-align/vertical-alignサンプル

▲Ｔｏｐ

11white-space

white-spaceプロパティは、ホワイトスペース（スペース、タブ、改行等）の仕方を指定します。 ここでは、セル内での設定を紹介します。 適用要素：すべての要素

値 解説
normal 連続するホワイトスペースをまとめ、１つの半角スペースとして表示します。
自動改行します。（初期値）
nowrap 連続するホワイトスペースをまとめ、１つの半角スペースとして表示します。
自動改行しません。
※CSS 

CSS
td.sample {
	white-space: nowrap;
}

※HTML
<table>
<tr>
<td class="sample">このセル内は自動折り返し禁止です。</td>
<td>このセル内は自動折り返しです。</td>
</tr>
</table>
※★sample
★⑪11white-spaceサンプル

▲Ｔｏｐ

12background-color

background-colorプロパティは、背景色の指定します。 ここでは、テーブル、セルの背景色の指定を紹介します。 適用要素：すべての要素

値 解説
transparent 背景を透明にする（初期値）
背景色 カラーコード、キーワード
色見本はこちらを参照下さい
※CSS 

CSS
table {
	background-color: #9fb7d4;
}

※HTML
<table>
<tr>
	<td>データ</td>
	<td>データ</td>
</tr>
</table>
※★sample
★⑫12background-colorサンプル

▲Ｔｏｐ

13background-image

background-imageプロパティは、背景画像の指定します。 ここでは、テーブル、セルの背景画像の指定を紹介します。 適用要素：すべての要素

値 解説
none 背景画像を使用しない（初期値）
uri 背景画像のuriを指定
※CSS 

CSS
table {
	background-image: url(bg.gif);
}

※HTML
<table>
<tr>
	<td>データ</td>
	<td>データ</td>
</tr>
</table>
※★sample
★⑬13background-imageサンプル

▲Ｔｏｐ