ぱそおーるCSS講座

テーブル関連のスタイル


テーブルに関連したスタイルの説明をしていきます。
要素（タグ）に直接記述する場合の記述例を記載しています。
ページ全体に使用する時は<table style="ここの部分を抜き出してください">本文</table>

テーブルの表示方法を設定する
table-layout : キーワード;

テーブルは全体を読み込んでから表示される特徴があります。
この属性の値をfixedで設定する事で、テーブルの一行目を読み込んだ時点で表示させるようになります。。
テーブル自体が複雑な場合に効果を発揮します。
fixedを設定した場合、セル幅が指定されていないと、セル幅が均一になります。

キーワードは２種類です。
  1. auto : テーブル全体を読み込んでから表示（デフォルト）
  2. fixed : テーブルの一行目を読み込んで表示
記述例（セル幅は設定していません）
<table style="table-layout : auto;">
Ａさん Ｂさん Ｃさん Ｄさん
１回戦の成績 +43 -13 -20 -20
２回戦の成績 +2 +51 -30 -23

<table style="table-layout : fixed;">
Ａさん Ｂさん Ｃさん Ｄさん
１回戦の成績 +43 -13 -20 -20
２回戦の成績 +2 +51 -30 -23


セルの枠線の表示を変更する
border-collapse : キーワード;

キーワードは２種類です。
  1. separate : セルの枠線をそれぞれ表示（デフォルト）
  2. collapse : セルの枠線を重ねて表示
記述例（表示上、セルの枠線に色を設定しています）
<table style="border-collapse : separate;">
Ａさん Ｂさん Ｃさん Ｄさん
１回戦の成績 +43 -13 -20 -20
２回戦の成績 +2 +51 -30 -23

<table style="border-collapse : collapse;">
Ａさん Ｂさん Ｃさん Ｄさん
１回戦の成績 +43 -13 -20 -20
２回戦の成績 +2 +51 -30 -23

セルとセルの間のスペースを指定する（Netscap6以降Firefoxで有効）
border-spacing : 数値;（四方向指定）
border-spacing : 数値 数値;（上下、左右を指定）

記述例
<table style="border-spacing : 15px;">
Ａさん Ｂさん Ｃさん Ｄさん
１回戦の成績 +43 -13 -20 -20
２回戦の成績 +2 +51 -30 -23

HOMEへ