ホームページ作成講座HAC Design

CSS　テーブル

CSS　テーブルのレイアウト

テーブルというのは元々表を書くときに使われていたHTMLタグです。

テーブルは本来ホームページ全体のレイアウトに使うものではありませんが、よくホームページのレイアウトに使用されています。ブログなどでは、全くテーブルはレイアウトに使われません。

更にブログの場合テーブルタグを挿入するとレイアウトが崩れることがよくあります。
ブログは<p>というタグで書かれた文章を囲ってくれるのが標準です。そのため、ブログの文章を書く場所に<p>タグを使うと、タグの間に<p>タグが挿入されてしまい表示がおかしくなるのです。

また少しでも凝ったテーブルを作ろうと思うとタグに多くの装飾を書いてしまうため、HTMLがスッキリ見えません。そのため、テーブルタグもCSSでレイアウトしてしまいます。

まずは今まで通りのHTMLでのテーブルの装飾を見てみましょう。

日にち	商品	値段
10/21	CSSのレイアウトのすべて	￥2500
10/22	CSSとデザインの効率化をアップする本	￥1750

このテーブルをHTMLのソースで書くと下記のようになります。

見てお分かりのように、いちいち bordercolor="#9900FF" 等という装飾のためのタグが入っていますよね。そういうタグはCSSに組み込んでおいて、スッキリさせましょう！

下記はCSSでレイアウトしたテーブルです。

日にち	商品	値段
10/21	CSSのレイアウトのすべて	￥2500
10/22	CSSとデザインの効率化をアップする本	￥1750

見た目は全く一緒ですよね？でもタグを見てみるとこんなにスッキリしています。
装飾タグを全部CSSで指定することによってHTMLソースはとてもシンプルになりました。

<table>
<tr>
<th width="17%">日にち</th>
<th width="54%">商品</th>
<th width="29%">値段</th>
</tr>
<tr>
<td>10/21</td>
<td>CSSのレイアウトのすべて</td>
<td>￥2500</td>
</tr>
<tr>
<td>10/22</td>
<td>CSSとデザインの効率化をアップする本</td>
<td>￥1750</td>
</tr>
</table>