こんにちは。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> <!- ………………… -> <!- ▼第１位の商品 -> <!- ………………… -> <th>1</th> <td>真空断熱フードコンテナ</td> <td>SDFC1245-L</td> </tr> <tr> <!- ………………… -> <!- ▼第２位の商品 -> <!- ………………… -> <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; /* 枠線の配色 */
}先ほどの装飾と違いが分かりやすいように、線の色を青色にしてあります。
上記の装飾を実際に適用してみると、以下のページのように見えます。
ご注意ください
カテゴリーから探す
タグから探す