Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

表の体裁を整えて目立つようにする

IE5.0以降のみ(IE5.0では正しく表示されない場合があります)

テーブルの表示方法を工夫することで、特定の列を目立たせることができます。ここでは、テーブル枠の幅と背景色を変更して、表の見栄えを良くする方法について考えてみましょう。

■ 表全体の定義

テーブルの枠や幅や背景色を<TABLE>タグの中で指定します。

<TABLE ID="oTable" DATASRC=#list BORDER="10" BGCOLOR="#ffeedd">
■ 特定の列の書式設定

特定の列に背景色と書体を指定するために、スタイルシートの定義を行います。

<STYLE TYPE="text/css">
.highlight {font-weight : bold;background : #ffdddd}
</STYLE>

スタイルシートの定義名は自由に名前をつけることができます。ここでは「highlight」という名前をつけています。

■ 定義した書式の反映

スタイルシートで定義した内容を特定の列のセルに関連づけるための記述を行います。

<TBODY BGCOLOR="#ffffee">
<TR>
<TD><DIV DATAFLD=address></DIV></TD>
<TD><DIV DATAFLD=access ALIGN=CENTER CLASS="highlight"></DIV></TD>
<TD><DIV DATAFLD=price ALIGN=right></DIV></TD>
<TD><DIV DATAFLD=space ALIGN=center CLASS="highlight"></DIV></TD>
<TD><DIV DATAFLD=picture ALIGN=center></DIV></TD>
<TD><DIV DATAFLD=office></DIV></TD>
</TR>
</TBODY>

<TBODY>〜</TBODY>内の項目にスタイルシートの設定を行うと、設定した列すべてにその設定が反映されます。

■ 特定の列に設定できるスタイルシートの書式

スタイルシートを使用すると、テーブルを表示させる際に、特定の列を指定した書式で表示させることができます。この方法では<STYLE TYPE="text/css">〜</STYLE>の間で書式を定義し、<DIV>タグの「CLASS」プロパティを使用して、定義した書式と特定の列との関連付けを行います。
例では「font-weight」 プロパティを使用して文字を太字に、「background」プロパティを使用して背景色に薄いオレンジ色を設定しています。
特定の列に設定できるスタイルシートの書式には、以下のようなプロパティがあります。

プロパティ
内容

指定例

font-weight 文字の太さ font-weight:bold
font-style 文字の書体 font-style:italic
color 文字の色 color:#ddcccc
background 背景色 background:#ffdddd
text-decoration 文字飾り text-decoration:line-trough
border-width 境界線の太さ border-width:10
border-style 境界線のスタイル border-style:dotted

 

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box