トップ ＞ スキル ： Web ＞ CSSリファレンス

Web

各CSSのプロパティ詳細8

テーブル関係

table-layout、caption-side、border-collapse、border-spacing

テーブルの列幅を指定する

table-layout:列幅の表示形式

table-layoutプロパティは、テーブルの列幅の表示方法を指定します。
初期の値は「auto」となり、セル内の内容（文字列の長さや画像の横幅）により自動で各列の幅が決定されます。幅のサイズを指定すると固定（fixed）できます。この場合にwidthプロパティで幅を指定されていなければ、列幅は均等に揃えられます。

値
列幅を固定して表示 fixed（widthプロパティで幅を指定していない場合は均等に表示）
セルの内容によって列幅が変動 auto（初期状態）

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	table { border:1px solid blue;}
            th,td { border:1px solid blue;}
        	.type1 { table-layout:fixed;
            		 width:100%;}
            .type2 { table-layout:auto;
            		 width:100%;}
    	</style>

HTML

    	<table class="type1">
        	<caption>列幅固定（均等）</caption>
			<tr><th>機器名</th><th>メーカー</th><th>価格</th></tr>
            <tr><th>パソコン</th><th>SONY</th><th>98,500</th></tr>
            <tr><th>プリンタ</th><th>CANON</th><th>25,500</th></tr>
        </table>
        <br />
        <table class="type2">
        	<caption>列幅自動（内容に応じて）</caption>
			<tr><th>機器名</th><th>メーカー</th><th>価格</th></tr>
            <tr><th>パソコン</th><th>SONY</th><th>98,500</th></tr>
            <tr><th>プリンタ</th><th>CANON</th><th>25,500</th></tr>
        </table>
テーブル列幅指定

表タイトルの表示位置を指定する

caption-side:表示位置

caption-sideプロパティは、表のタイトル（caption要素）の表示位置を指定します。値は、「top」、「bottom」、「left」、「right」の4種類がありますが、「left」、「right」に関してはブラウザがサポートしていない場合があります。

値
タイトルをテーブルの上に表示 top（初期状態）
タイトルをテーブルの下に表示 bottom
タイトルをテーブルの左に表示 left
タイトルをテーブルの右に表示 right

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	table { border:1px solid blue;width:100%;}
            th,td { border:1px solid blue;}
        	.type { caption-side:bottom;}
    	</style>

HTML

    	<table>
        	<caption class="type">表のタイトル</caption>
			<tr><th>A</th><th>B</th><th>C</th></tr>
            <tr><th>データ1</th><th>データ2</th><th>データ3</th></tr>
            <tr><th>データ4</th><th>データ5</th><th>データ6</th></tr>
        </table>
表タイトルの表示位置を指定

※ Internet Explorerでは、うまく表示されない場合があります。

表の枠線を単一の線に指定する

border-collapse:表の枠線の表示形式

border-collapseプロパティは、表の外枠や各セルの枠線を重ねて表示するか、別々に離して表示するかを指定します。
このプロパティは、テーブルのみに有効です。

値
セルの枠線を離して表示 separate
セルの枠線を重ねて表示 collapse

■ サンプルコードと結果

CSS

    	<style type="text/css">
            table { border:1px solid green;width:100%;}
            th,td { border:1px solid green;}
        	.type1 { border-collapse:separate;}
            .type2 { border-collapse:collapse;}
    	</style>

HTML

    	<table class="type1">
			<tr><th>A</th><th>B</th><th>C</th></tr>
            <tr><th>データ1</th><th>データ2</th><th>データ3</th></tr>
            <tr><th>データ4</th><th>データ5</th><th>データ6</th></tr>
        </table>
        <br />
        <table class="type2">
			<tr><th>A</th><th>B</th><th>C</th></tr>
            <tr><th>データ1</th><th>データ2</th><th>データ3</th></tr>
            <tr><th>データ4</th><th>データ5</th><th>データ6</th></tr>
        </table>
表の枠線を単一の線に指定

セルとセルの間隔を指定する

border-spacing:間隔

border-spacingプロパティは、隣接する各セルの枠線と枠線の間隔を指定します。値は半角スペースで区切って二つ指定することができます。値が１つであれば上下左右の間隔の指定となり、値が2つであれば最初が左右の間隔、2つ目の値は上下の間隔を指定することになります。

値
数値で指定 px、pt、emの単位

■ サンプルコードと結果

CSS

    	<style type="text/css">
            table { border:1px solid green;width:100%;}
            th,td { border:1px solid green;}
        	.type1 { border-spacing:0.5em;}
            .type2 { border-spacing:0px 5px;}
    	</style>

HTML

    	<table class="type1">
			<tr><th>A</th><th>B</th><th>C</th></tr>
            <tr><th>データ1</th><th>データ2</th><th>データ3</th></tr>
            <tr><th>データ4</th><th>データ5</th><th>データ6</th></tr>
        </table>
        <br />
        <table class="type2">
			<tr><th>A</th><th>B</th><th>C</th></tr>
            <tr><th>データ1</th><th>データ2</th><th>データ3</th></tr>
            <tr><th>データ4</th><th>データ5</th><th>データ6</th></tr>
        </table>
セルとセルの間隔を指定

※ Internet Explorerでは、うまく表示されない場合があります。

【各CSSのプロパティ詳細8】