表の書式設定

  • caption-side (表の見出しの位置調整)
  • table-layout (テーブルのセル幅と表示に関する設定をする)
  • border-collapse (セル間の枠線の表示に関する設定をする)
  • border-spacing (隣接するセル間の間隔を設定する)
  • empty-cells (空セルの枠の表示/非表示を設定する)
Functional list
値 機能
top テーブルの上に配置する
bottom テーブルの下に配置する
left テーブルの左に配置する
right テーブルの右に配置する

適応要素 ： table、 caption要素

継承 ：する (デフォルト値 ＝top )

テーブルにおけるcaption (表題) 要素の位置を設定する属性です。

例:実例: このようにな

<TABLE border=1>
<CAPTION style="caption-side: bottom">見本</CAPTION>
<TBODY>
<TR>
<TH>名前</TH>
<TH>性別</TH>
<TH>年齢</TH></TR>
<TR>
<TD>MOPA</TD>
<TD>男</TD>
<TD>50</TD></TR>
<TR>
<TD>MADA</TD>
<TD>女</TD>
<TD>27</TD>
</TR>
</TBODY>
</TABLE>

up

table-layoutテーブルのセル幅と表示に関する設定をする

CSS2

Functional list
値 機能
fixed テーブルの１行目を受信したら各セル幅を１列目と同じ幅で表示を始める
auto テーブル全体を受信してから表示を始める

適応要素 ： table要素

継承 ： しない (デフォルト値 ＝auto )

table 要素を使ったページは表示に時間がかかります。

これは、テーブル全体を読み込んでからレイアウトして表示するためです。

fixed 属性を使えばテーブル全体の読み込みを待たずにレイアウトすることができ、表示の待ち時間を短縮することができます。

例:実例: このようになります。

<table border="1" style="table-layout:fixed">
<colgroup span="3" style=""></colgroup>
<tr>
<td style="width:100px">1234567890123456789010</td>
<td style="width:200px">1234567890123456789010</td>
<td style="width:300px">12345678901234567890</td>
</tr>
</table>

up


border-collapseセル間の枠線の表示に関する設定をする

CSS2

Functional list
値 機能
collapse 隣り合うセルの枠線が重なり合って表示する
separate 隣り合うセルの枠線をそれぞれ個別に表示

適応要素 ： table要素

継承 ： する (デフォルト値 ＝collapse )

テーブルにおけるセル間の枠線の処理を指定する属性です。

例:実例: このようになります。

<table border="0">
<tr>
<th colspan="3">Normaleinstellung</th>
</tr>
<tr>
<td style="border:medium solid blue">Haus</td>
<td style="border:medium dashed blue">Auto</td>
<td style="border:medium dotted blue">Boot</td>
</tr>
</table>
<table border="0" style="border-collapse:collapse">
<tr>
<th colspan="3">Spezialeinstellung (collapse)</th>
</tr>
<tr>
<td style="border:medium solid blue">Haus</td>
<td style="border:medium dashed blue">Auto</td>
<td style="border:medium dotted blue">Boot</td>
</tr>
</table>

up

border-spacing隣接するセル間の間隔を設定する

CSS2

Functional list
値 機能
数値＋単位 em, ex, pt などの単位で指定する

適応要素 ： table要素

継承 ： する (デフォルト値 ＝ 0 )

テーブルにおけるセルとセルの間隔を指定する属性です。

この属性を使う場合は、 border-collapse

属性の値をseparate に設定しておく必要があります。

指定する値の数によって適用される間隔の組み合わせが変わります。

また、 border-spacing 属性に１つを設定すると上下左右に適用されます。

border-spacing 属性に２つを設定すると左右と上下にそれぞれ適用されます

例:実例: このようになります。

<html>
<head>
<title>border-spacing</title>
<style>
td { border:thin solid blue; }
</style>

</head>
<body bgcolor="FFFFFF" text="#000000">
<table style="border:thin solid red; border-spacing:10px">
<tr>
<td>Haus</td>
<td>Auto</td>
<td>Boot</td>
</tr></table>
</body>
</html>

up

empty-cells空セルの枠の表示/非表示を設定する

CSS2

Functional list
値 機能
show 表示する
hide 非表示にする

適応要素 ：table要素

継承 ：する (デフォルト値 ＝show )

空白セルの枠線を表示を変更する属性です。

この属性を設定するためには、 border-cllapse属性の値をseparateにしておく必要があります。

HOMEの次スタイルシートの次表の書式設定


目的別属性

広告