TOP > HP関連>

HTML テーブルを綺麗に見せる方法

説明

今回は、Webサイトを綺麗に見せるテーブルの作成方法について、説明したいと思います。
サイトを作る上で、完全にCSSで作っているサイトを除き、テーブルは大体は使っているのではないでしょうか。
テーブルを作成するうえで、いくつか綺麗に見せるポイントがあります。

まずは、以下の例から見ていきましょう。

@更新情報

更新情報をテーブルで作成した例です。
 更新情報
2009/11/03:○○ページ追加

テーブルが露骨に見えていて、少し味気ない雰囲気になっていると思います。
そこで、テーブルに着色、及び更新情報を画像にしてみましょう。

2009/10/13:○○ページの追加

サンプルソース
[background="updateb.gif"]で背景画像が設定出来ます。
<TABLE bgcolor="#0000cc" cellspacing="1" height="71" cellpadding="2">
   <TR>
      <TD bgcolor="#c8e8f9" background="updateb.gif" height="25" width="381">
     </TD>
   </TR>
   <TR>
      <TD bgcolor="#f0f0ff" valign="top" width="381" height="35">
         2009/10/13:○○ページの追加
      </TD>
   </TR>
</TABLE>

これだけで、随分と雰囲気がよくなたっと思います。
また、綺麗に見せる方法として以下の注意点があります。

@着色、及び画像を使う際の注意点としては、原色は避けましょう。
 ・原色を使うと、目がチカチカして、嫌われる傾向にあります。
  色々のサイトを見ていただくと分かると思いますが、原色を使っているサイトはあまりありません。
A画像の使いすぎには、気をつけよう
 ・画像を使いすぎると、ページを開くのに時間がかかるし、検索エンジンからの訪問数が極端に下がります。

上記の内容を踏まえ、テーブルを綺麗に作成しましょう!
関連ページ
テーブルの作成
・テーブルを綺麗に見せる方法
最近の記事
当サイトについて  免責事項  プライバシーポリシー
Copyright (C) Sasuke 2012 All rights reserved.