★テーブルのスタイリング

テーブルのスタイリング

前回までに、会社概要ページのテーブル（表）にスタイルを指定する準備ができました。
今回から、CSSでテーブルのスタイリングをしていきましょう。

横幅・背景色・ボーダー・セル内の余白・改行禁止などを指定して、見やすいテーブルになるようにスタイルを整えます。
前回作成したtable.cssに、以下の記述を追加してください。

@charset "utf-8";

/*============================================
テーブル
============================================*/
table.profile {
	width:680px;				/*テーブル全体の幅*/
}
table.profile th {
	width:150px;				/*見出しセルの幅*/
	padding:10px;				/*パディング*/
	text-align:center;				/*センター揃えにする*/
	white-space:nowrap;				/*セル内の改行を禁止する*/
	background-color:#ccccee;			/*セルの背景色*/
	border-bottom:dotted #666666 1px;		/*セルのボーダー*/
}
table.profile td {
	padding:10px;				/*パディング*/
	background-color:#eeeeff;			/*セルの背景色*/
	border-bottom:dotted #666666 1px;		/*セルのボーダー*/
}

保存をしたらブラウザで表示してみましょう。
セルに背景色やボーダーが付けられ、テーブルの横幅が、上にあるh3要素と揃えば成功です。

変更前を確認する

今回追加したCSSソースを確認

今回追加したCSSソースの内容を確認しておきましょう。

セル内の改行を禁止する

white-space:nowrap; は、セル内の改行を禁止しています。

セレクタは table.profile th { ～ } なので、「profileというクラス名が付けられたtable要素の子要素となるth要素」に対してスタイルを指定したことになります。

見出しセルの内容を改行禁止にしたわけですが、例えば、ユーザーがブラウザの機能で文字サイズを大きくした場合にも、見出しセルの内容は改行されないままとなります。

テーブル全体の横幅

width:680px; は、テーブル全体の幅を指定しています。

これは、上のh3要素と横幅を揃えるためです。
h3要素には width:660px; を指定しており、h3要素のほうがtable要素よりもwidthプロパティの値が20ピクセル小さいですが、これは、widthプロパティと同時に指定している余白との関連です。

h3要素にはwidthプロパティで660pxを指定すると同時に、paddingプロパティで左右10pxずつパディングを指定しています。
つまり、h3要素の見栄えは660px＋10px＋10px＝680pxとなっています。
その横幅に揃えるために、table要素に width:680px; を指定したというわけです。

尚、横幅を揃えたと言いながら、わずかにtable要素の横幅がh3要素よりも狭くなっているように見えます。
これは、セル同士の間に隙間が空いていて、その分だけth要素やtd要素の背景色の表示範囲が食われているためです。

次回、この隙間を閉じるスタイル指定をします。