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

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

テーブルのスタイリング

広告



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

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

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要素の背景色の表示範囲が食われているためです。

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

まとめ
  1. セルの背景色・ボーダーを指定することで、セル分けされていることが明確になる
  2. セル内にほど良く余白をもたせることで、見やすいテーブルになる
  3. 改行を禁止する場合には、white-space:nowrap; と指定する
<前へ 目次へ 次へ>

広告



Lorem Ipsum is simply dummy text

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.