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