ゼロからのWeb制作 Vol.7|スタイルシート(CSS)4

こんにちは、鈴木です。

今回は、CSSを使って表の装飾をしていきたいと思います。
ゼロからのWeb制作 Vol.3では、HTMLによる表の作成について説明しました。

HTMLだけでなくCSSで装飾することで、より見やすい表に仕上がります。

目次

  1. HTMLソース
  2. 表の外枠、内枠に線を描く

 

1.HTMLソース

まず以下のHTMLソースをbody要素に入力していきます。

<table>
<thead><tr><th colspan="2">WEB制作の流れ</th></tr></thead>
<tfoot><tr><th colspan="2"></th></tr></tfoot>
<tbody><tr><th>1</th><td>サイトの目的を明確にする</td></tr>
<tr><th>2</th><td>情報整理・企画</td></tr>
<tr><th>3</th><td>ワイヤーフレーム作成</td></tr>
<tr><th>4</th><td>グラフィックソフトでデザイン</td></tr>
<tr><th>5</th><td>HTML/CSSコーティング</td></tr>
<tr><th>6</th><td>HTML/CSS以外のプログラム</td></tr>
<tr><th>7</th><td>HTML/ウェブサイト公開</td></tr>
<tr><th>8</th><td>HTML/ウェブサイト運用</td></tr></tbody>
</table>

* thead,tfoot,tbodyを書かななくてもいいですが、書くことで後から新たな情報を入れやすくなり、ヘッダやフッタだけ装飾するということも可能になります。

またcolspanとは水平方向のセルを結合する働きをします。
今回の表はフッダとヘッタ以外は2列ずつ進むので、フッダとヘッタの行の2列を一つにまとめました。

この段階ブラウザに表示すると以下のようになります。

資料16
 
 

2.表の外枠、内枠に線を描く

表の外枠、内枠に線を入れるには、それぞれの要素にborderプロパティを使い、線の太さや色を記入していきます。

次のコードをスタイルシートに記述していきます。

table{ border: 2px #0000FF solid ;}

これは表の外枠の線について記しています。

table th,table td{border: 1px #0000FF solid;}

これは表の内枠の線について記しています。

これをブラウザで表示すると以下のようになります。

資料19

このままでは、外枠と内枠の線が重なっておらず、見やすい表とは言えません。

ここで、先程の外枠の線を指定したスタイルシートに

border-collapse: collapse;

を追加します。

そうすると

資料18

 
外枠と内枠の線が重なり、先程の表よりは見やすくなりました。

 

今回作った表が完成ではなく、改善することでより見栄えの良い表になります。

次回も表の装飾について説明していきたいと思います。