１０-７

　スタイルシートでデザインアップ-7
　　　テーブルの中身も一括指定が便利。

スタイルシートではタグに機能を付加出来ますので、応用範囲はとても広くなります。 ＨＴＭＬでテーブルを組んだときなんかに各欄の文字サイズや色を指定するのはとても面倒でしたね。 これが一括指定出来るのは実に便利な使い方です。
●まずは従来パターン 

<HTML>
<BODY>
<table border>
<tr>
<td><font size=5 color=red>りんご</font></td>
<td><font size=5 color=red>みかん</font></td>
<td><font size=5 color=red>すいか</font></td>
</tr>
</table>
</BODY>
</HTML>

まだ３項目くらいなら力ずくでタグをコピーペーストしても良いですが これが数１０行とか大きな表になると大変です。メンテナンスも嫌になっちゃいますね。

●これがスタイルシート活用パターン

<HTML><HEAD>
<STYLE TYPE="text/css">
<!--
BODY, TH, TD { font-size: 22pt;color:red; }
-->
</STYLE></HEAD><BODY>
<table border>
<tr>
<td>りんご</td><td>みかん</td><td>すいか</td>
</tr>
</table>
</BODY></HTML>

これなら先頭で指定しておけば表の各項目は指定通りに表示機能が働きますのでメンテナンスも楽々ですね。

スタイルシートを使えばデザイン性だけでなく、ＨＴＭＬの構造を簡単にして作業性を高めるという使い方もある という事例です。ご活用下さい。
質問メール　 ＯＺ道場メニュー