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

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

 

<<<戻る