タイトルの位置タイトルの水平位置 行や列を詰める テーブルcss ﾘﾌｧﾚﾝｽ へ
表タイトルの位置を指定する(CSS)
caption-side: top;
　caption-side は、<caption> タグ（要素）に適用できます。
　caption-side は、表題の表示位置を指定するプロパティです。このプロパティを<caption> タグ（要素）に設定すると、表題の表示位置を指定できます。
　caption { caption-side: left; }
プロパティ名値説　　明
caption-side top表の上に配置（初期値）
bottom表の下に配置
left表の左に配置
right表の右に配置
＊ Opera は left と right の指定がうまく機能しないようです。
left または right を指定する場合は、caption要素に幅（width）を指定します。（幅を指定しないと表題を縦長に表示します）
Internet Exp.では、表示モードが「標準モード」の場合に機能するようです。（Internet Exp.7 以前では未対応）
　★ 使用例とブラウザでの表示 (g2-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .g2-1to { caption-side: top; color:blue; }
.g2-1bo { caption-side: bottom; color:blue; }
.g2-1le { caption-side: left; width:4.5em; color:blue; }
.g2-1ri { caption-side: right; width:5em; color:blue; }
使　用　例   ブラウザの表示
<table border=1>
<caption class=g2-1to>表題：top</caption>
<tr><th>見出し1</th><th>見出し2</th></tr>
<tr><td>データ1</td><td>データ2</td></tr>
</table>
表題：top
見出し1見出し2
データ1データ2
<table border=1>
<caption class=g2-1bo>表題：bottom</caption>
<tr><th>見出し1</th><th>見出し2</th></tr>
<tr><td>データ1</td><td>データ2</td></tr>
</table>
表題：bottom
見出し1見出し2
データ1データ2
<table border=1>
<caption class=g2-1le>表題：left</caption>
<tr><th>見出し1</th><th>見出し2</th></tr>
<tr><td>データ1</td><td>データ2</td></tr>
</table>
表題：left
見出し1見出し2
データ1データ2
<table border=1>
<caption class=g2-1ri>表題：right</caption>
<tr><th>見出し1</th><th>見出し2</th></tr>
<tr><td>データ1</td><td>データ2</td></tr>
</table>
表題：right
見出し1見出し2
データ1データ2
☆ Internet Exp.7 以前は、caption-side に未対応です。
☆ Opera は left と right の指定がうまく機能しないようです。
関連するページ
HTML タグページ 表のタイトル：表にタイトルを付ける
HTML タグページ 表タイトルの位置：表タイトルの位置を指定する
タイトルの位置タイトルの水平位置 行や列を詰める テーブルcss ﾘﾌｧﾚﾝｽ へ
表タイトルの位置（水平方向）を指定する(CSS)
text-align: left;
　text-align は、ブロックレベル要素（ひとつのまとまりを構成する要素）に適用できます。
　text-align は、水平方向の表示位置を指定するプロパティです。このプロパティを<caption> タグ（要素）に設定すると、表題の表示位置を指定できます。
　caption { text-align: left; }
プロパティ名値説　　明
text-align left表上部の左に表示
center表上部の中央に表示
right表上部の右に表示
＊ この指定がない場合は、表上部の中央に表示されます。
　★ 使用例とブラウザでの表示 (g2-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .g2-2le { text-align: left; color: teal; }
.g2-2ce { text-align: center; color: teal; }
.g2-2ri { text-align: right; color: teal; }
使　用　例   ブラウザの表示
<table border=1>
<caption class=g2-2le>表題：left</caption>
<tr><th>見出しセル1</th><th>見出しセル2</th></tr>
<tr><td>データセル1</td><td>データセル2</td></tr>
</table>
表題：left
見出しセル1見出しセル2
データセル1データセル2
<table border=1>
<caption class=g2-2ce>表題：center</caption>
<tr><th>見出しセル1</th><th>見出しセル2</th></tr>
<tr><td>データセル1</td><td>データセル2</td></tr>
</table>
表題：center
見出しセル1見出しセル2
データセル1データセル2
<table border=1>
<caption class=g2-2ri>表題：right</caption>
<tr><th>見出しセル1</th><th>見出しセル2</th></tr>
<tr><td>データセル1</td><td>データセル2</td></tr>
</table>
表題：right
見出しセル1見出しセル2
データセル1データセル2
関連するページ
HTML タグページ 表のタイトル：表にタイトルを付ける
HTML タグページ 表タイトルの位置：表タイトルの位置を指定する
タイトルの位置タイトルの水平位置 行や列を詰める テーブルcss ﾘﾌｧﾚﾝｽ へ
表の行または列を詰める(CSS)
visibility: collapse;
　visibility は、全てのタグ（要素）に適用できます。
　visibility は、表示・非表示を指定するプロパティです。このプロパティ（値 collapse）を表の行・行グループ、列・列グループに設定すると、その行や列を詰めて表示することができます。
　tr { visibility: collapse; }   colgroup { visibility: collapse; }
プロパティ名値説　　明
visibility collapse 表の行または列を詰める
＊ このスタイルは、次の要素に適用することができます。
表の行・行グループ … tr要素、thead要素、tfoot要素、tbody要素
表の列・列グループ … col要素、colgroup要素
Internet Exp.では、表示モードが「標準モード」の場合のみ機能するようです。（Internet Exp.7 以前では未対応）
　★ 使用例とブラウザでの表示 (g2-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .g2-3ex { visibility: collapse; }
使　用　例   ブラウザの表示
<table width=200 border=1>
<tr><th>見出しセル</th></tr>
<tr class=g2-3ex><td>データセル1</td></tr>
<tr><td>データセル2</td></tr>
</table>
見出しセル
データセル1
データセル2
<table border=1>
<col span=1><col span=1 class=g2-3ex>
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
</table>
見出し1見出し2見出し3
データ1データ2データ3
☆ Internet Exp.7 以前は、visibility に未対応です。
関連するページ
HTML タグページ 行のグループ化：行をグループ化する
HTML タグページ 列のグループ化：列をグループ化する
HTML タグページ 列の属性設定：列単位で属性を設定する
タイトルの位置タイトルの水平位置 行や列を詰める テーブルcss ﾘﾌｧﾚﾝｽ へ