ITコラム

Calender Planner Organization Management Remind Concept

ITコラム

2016.12.02

#HTML入門

HTML【表】１～基本的なtableの作り方

イベントのお知らせやスケジュールなど、大事な情報を伝える時には、文章だけで伝えるより、表を使った方が分かりやすい場合があります。
Webサイトで表を作りたい時は、table要素というものを使って作成していきます。
今回は、Webサイトで表示させる基本的な表の作り方を紹介します。
　

目次
１．table要素の基本構造
２．基本的なtableを作ってみよう
３．CSSで見た目を整えよう
４．th要素を縦に並べてみよう
５．セルの幅を指定しよう
６．タイトルを付けよう

１．table要素の基本構造

　
tableは下のような基本構造で出来ています。

table要素の中に、まず、横一列を表すtr要素が入ります。

tr要素の中に、th（見出し用のセル）、td（データ用のセル）が入ります。

tableは、必ず全体が <table> </table> で囲まれ、横一列（ 1行）は、<tr> </tr> で囲まれる構造となっています。

そして、<tr> ～ </tr> の中に、各セルが入ります。

見出し用のセルはth要素（<th> ～ </th>）、データ用のセルはtd要素（<td> ～ </td>）で示します。

「 tr 」は「 table row 」の略です。「 row 」は横列（行）の意味です。

反対語の縦列を表すのは、「 column 」で、略して「 col 」と書きます。

この「 row（横列）」と「 col（縦列）」は、tableでよく出てきます。

そして、「 th 」は「 table header 」の略です。ヘッダ、見出しです。

「 td 」は「 table data 」の略です。データのことです。

▲目次へ戻る

２．基本的なtableを作ってみよう

　
さきほど出てきたtr、th、tdを使って、table要素は次のような書き方をします。

全体は <table> ～ </table> で、1行ずつは <tr> ～ </tr> で囲まれてます。

<tr> ～ </tr> の中に、見出しは <th> ～ </th> 内に、データは <td> ～ </td> 内に入っています。

table要素の1行目で、<table> に class名「 sample1 」を指定してます。

これは、後ほど、CSSでこのtableの見た目を整えていくための準備です。
（ Webページで使うtableが全て同じ構造の場合は、class名やid名をつけなくてもOKです。）

上のファイルを保存して、ブラウザで見てみると、下のように表示されます。

セルの枠線や色分けなどがなくて、表には見えないかもしれません。

でも、要素の構造上の使い方は正しいので、HTML文書的にはこれがtableです。

▲目次へ戻る

３．CSSで見た目を整えよう

　
HTML文書的にOKといっても、見た目が重要なWebサイトで、さきほどのようなテーブルの表示はありえません。

そこで、CSSで見た目を調整していきます。

下のような見た目を目指してみましょう。

まず、CSSファイルに、次のような指定を書き込みます。
赤線で囲まれた部分を見て下さい。

table要素の、上と左にborderの指定を、

th要素やtd要素の、下と右にborderの指定をしています。

このように table要素に上と左、セル要素（th、td）に下と右というようなborderの指定をするのは、table要素と各セル全てに上下左右ともborder指定を

すると、下のように、重複して二重線になってしまうからです。

次に、青の下線「 padding: 7px; 」を見て下さい。

各セルに7pxの余白（ padding ）を入れるという指定です。

罫線（ border ）とテキストがくっついてると読みにくいので余白の指定をします。

また、青の下線「 border-spacing:0; 」も見てください。

「 border-spacing 」とは、セルとセルの間隔、セル間の距離のことです。

さきほどのborder指定をした場合、この「 border-spacing:0 」を指定しないと、各border（枠線）がぴったりくっつかず、隙間が空いた状態で表示されます。

ちなみに、「 border 」「 padding 」「 border-spacing 」の指定は、HTML4までの table要素では、属性の指定として成り立っていました。（ <table border=”1px” cellpadding=”7px” cellspacing=”0″>と使っていました。）
これらの属性は、HTML5では奨励されず、上のようにCSSで指定するようになりました。

CSSファイルが整いましたので、htmlファイルの <head> ～ </head> 間にCSS読み込みの
<link href=”css/common.css” rel=”stylesheet” type=”text/css” media=”all”>
を書き込んで、ブラウザで表示を確認してみましょう。

無事に枠線と見出し部分の色付けが表示されて、表らしくなりました。