サイト制作

「表」の体裁を整える装飾で「見やすい表」を作る方法

更新日:2016/09/20 公開日:2014/02/19

西村 文宏 (ニシムラ フミヒロ)

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

こんにちは。All About ホームページ作成ガイドの西村文宏です。

ウェブサイトでは、table要素を使って「表」を作ることが多々ありますね。特にアフィリエイトサイトでは、紹介する商品・サービスの仕様を掲載する際などにも「表」をよく活用されるのではないでしょうか。

今回は、表を見やすく掲載するために、表の体裁を整える(装飾する)方法をご紹介いたします。従来からCSS(スタイルシート)を使えば自由に表を装飾できましたが、SS3で追加された機能を使えば、もっと便利に装飾できます。

ここでは、以下のサンプルページにあるような表を作ることを例にして、HTMLとCSSの記述方法をご紹介いたします。

表を作るHTMLソースの基本は、以下の1〜4の通りです。

(1) table要素 <table>〜</table> で全体を囲み、
(2) tr要素 <tr>〜</tr> で「1行」を作り、
(3) 必要に応じて、th要素 <th>〜</th> でヘッダ(見出し)セルを作り、
(4) td要素 <td>〜</td> で1つ1つのセル(枠)を作る

しかし、「装飾のしやすさ」と「表の分かりやすさ」を考えると、

(5) 表のヘッダを示す行は、thead要素で囲んでおき、
(6) それ以外の行(表の内容)は、tbody要素で囲んでおく

という記述も加えておく方が良いでしょう。

例えば、以下のような感じで記述します。

<table>
	<thead>
		<tr>
			<th>No.</th>
			<th>商品名</th>
			<th>商品型番</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1</th>
			<td>真空断熱フードコンテナ</td>
			<td>SDFC1245-L</td>
		</tr>
		<tr>
			<th>2</th>
			<td>ポット型浄水器</td>
			<td>WPPD5567-K</td>
		</tr>
	</tbody>
</table>

上記のソースでは、
・ヘッダ(見出し)行が1行
・内容が2行
の合計3行の表を作っています。

表を作る際には、「行を作るtr要素」や「各セルを作るtd要素」など、複数の要素を同時に使います。そのため、ソースが見づらくなりがちです。少しでもソースを見やすくして、後から修正しやすくなるように、「インデント」(字下げ)を使って記述することをお勧めいたします。

以下のように、HTMLタグが現れるごとに行を変え、先頭に空白文字を入れることで、HTMLの階層構造を分かりやすくします。

<tag1>
	<tag2>
		<tag3>
			階層構造が分かりやすいように先頭に空白を入れて記述。
		</tag3>
	</tag2>
</tag1>

このように記述しておくと、「タグの閉じ忘れ」も簡単に防げます。

HTMLソース中で「どの部分に何を書いているのか」を示すために、コメント機能を活用すると、もっと分かりやすくなります。HTMLでは「<!-」と「->」で挟んだ部分は、ブラウザ上には表示されませんから、何でも自由にメモを記述しておけます。

先のソースにコメントを書き加えると、例えば以下のように記述できます。

<table>

	<!- ======================== ->
	<!- ▼ここから表のヘッダ部分 ->
	<!- ======================== ->
	<thead>
		<tr>
			<th>No.</th>
			<th>商品名</th>
			<th>商品型番</th>
		</tr>
	</thead>
	<!- ======================== ->
	<!- ▲ここまで表のヘッダ部分 ->
	<!- ======================== ->

	<!- ======================== ->
	<!- ▼ここから表の中身(内容) ->
	<!- ======================== ->
	<tbody>
		<tr>

			<!- ………………… ->
			<!- ▼第1位の商品 ->
			<!- ………………… ->
			<th>1</th>
			<td>真空断熱フードコンテナ</td>
			<td>SDFC1245-L</td>

		</tr>
		<tr>

			<!- ………………… ->
			<!- ▼第2位の商品 ->
			<!- ………………… ->
			<th>2</th>
			<td>ポット型浄水器</td>
			<td>WPPD5567-K</td>

		</tr>
	</tbody>
	<!- ======================== ->
	<!- ▲ここまで表の中身(内容) ->
	<!- ======================== ->

</table>

このように、どこが何を示しているのかが、分かりやすくなります。
冒頭にご紹介したサンプルページのHTMLソースにも、詳しくコメントを加えてあります。あわせてご参照ください。

さて、今回はHTMLソースの書き方だけをご紹介いたしました。
このHTMLに、スタイルシート(CSS)を加えて、表を自由自在に装飾していきましょう。

ここでは、最終的には以下のサンプルページにあるような表を作ることを例にしています。

表を装飾する基本は、「枠線」・「配色」・「余白量」の3点です。
装飾したい箇所に応じて、以下の要素に対してスタイルを記述します。

(1) 表全体の体裁や、外側の枠線 → table要素
(2) 内側の枠線や、枠線と文字(中身)の間の余白量 → th・td要素
(3) 行単位の装飾 → tr要素(や、thead・tbody要素など)

まずは、table要素に対して以下のようにスタイルを記述してみます。

table {
	border-width: 2px;    /* 枠線の太さ */
	border-style: solid;  /* 枠線の種類 */
	border-color: green;  /* 枠線の配色 */
	border-collapse: collapse;
}

上記は、「太さ2px」の「実線(solid)」を「緑色」で引く指定です。
最後の「border-collapse: collapse」は、セルとセルの隙間をなくす指定です。
表を装飾する際には必須の指定だと考えて、そのまま記述してください。

上記の装飾だけを前回のHTMLソースに適用してみると、以下のページのように見えます。

次に、縦横に点線を引いてみましょう。

th,td {
	border-width: 1px;    /* 枠線の太さ */
	border-style: dotted; /* 枠線の種類 */
	border-color: blue;   /* 枠線の配色 */
}

先ほどの装飾と違いが分かりやすいように、線の色を青色にしてあります。

上記の装飾を実際に適用してみると、以下のページのように見えます。

SHARE
西村 文宏 (ニシムラ フミヒロ)

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

この著者の他の記事を読む

他の著者をもっと見る

ご注意ください

  • 本記事の内容は、2016/09/20更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
  • 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。

カテゴリーから探す

タグから探す

アフィリエイトをはじめよう!
無料新規パートナー登録
広告出稿を希望のかたはこちら
無料資料請求はこちら