トップページ  > ウェブ制作チュートリアル  > テーブルのスタイリング
第18章 テーブルのスタイリング

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

テーブルのスタイリング

広告

前回までに、会社概要ページのテーブル(表)にスタイルを指定する準備ができました。 今回から、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; と指定する
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ