７．表 組
HTMLのサンプル文書は、ココをクリックしてください。
7.1 表 組
このページでは、表組について説明します。下の表は、適当に作った表です。この表を基にいろいろなバリエーションを紹介します。
| No. | 山の名 | 標高 |
| 1 | 富士山 | 3,756m |
| 2 | 北岳 | 3,193m |
(1) 「Homepage資料」フォルダにあるbase1.htmlをTeraPadで開きます。開いたら、「ファイル」→「名前を付けて保存」をクリックし、table.htmlとでもいうファイル名を付けて「Homepage資料」フォルダに保存してください。保存が終ったら、下の画像のように打ち込んで上書き保存してください。
<table></table>は、テーブルを表します。
<tr></tr>は、行を表します。
<td></td>は、セル（１マス)を表します。
tr は Table Row の略、td は Table Data の略です。
<td> と </td> の間に文字を入れます。
(2) 次にTeraPadの中のIEアイコンをクリックしてEdgeを立ち上げてください。すると、下図のように表示されています。表のようですが、線がありません。
(3) 古い規格のhtml4.01では、<table> の table の後に半角スペースを入れて borderを記入し、
<table border> とすると線が表示されます。やってみましょう。打ち終ったら上書き保存後、Edgeをアクティブにし更新ボタンをクリックします。線が表示されました。線は、
になっています。また、参考までにIEとfirefoxの表示も載せました。
いずれも二重線に見えますが、よく見ると Firefoxは、エンボス表示で、IEは、二重線です。Edgeは、中間のような感じです。
そもそもブラウザは、Netscape社が開発しましたが、表の線は、エンボス表示にしました。エンボス表示が格好よいと思ったようです。これに対して後発のMicrosoft社は、エンボスを嫌って複線にしたようです。しかしながら、市場では、エンボスも複線も嫌われ単線が好まれています。
(4) html5規格では、線は、スタイルシートで指定するようになっています。border属性は、廃止されていませんが、border="" または border="1"のみ認められています。いずれも、1pxの黒線です。スタイルシート指定の線は、以前に出て来ましたが、1pxの黒実線の場合は、border : solid 1px #000; です。線種、太さ、色を自由に変えることができます。順序の決まりはありません。border : #000 1px solid;でもOKです。
tableにのみ指定するとテーブルの外枠のみ線が引かれます。内部に線を引くには、tdにも指定する必要があります。以下をご覧ください。
(5) 線は、依然として複線です。複線は、はやりませんので、単線にしましょう。単線にするスタイルシートが準備されています。tableに border-collapse : collapse;と指定すると単線になります。collapseとは押しつぶす、重ねるという意味です。border-collapse は、「線の重ね具合」、collapse は、「重ねる」と解釈するとわかり易いと思います。collapse 以外の値に separate がありますが、これは、指定しないときと同じになります。では、これを打ち込んで表示させてみましょう。単線になりました。
(6) 上の表を見ると、文字と線が接近しており見栄えが悪いです。文字と線を離しましょう。そのためには、文字と線の間に詰め物をすれば、空きます。詰め物は、paddingです。第2節(8)で説明しました。tdにpaddingを指定してみましょう。どの程度入れるか、文字の半分を入れてみましょう。8pxです。padding : 8px;とすると、上下左右に8pxの空きができます。
(7) 表の幅が狭くすわりが悪いので、広くしてみましょう。現在は、約170pxですが、300pxにしてみましょう。それには、table に width : 300px;を指定します。
(8) セルには、見出しセルとデータセルがあります。<td>は、データセルで、見出しセルは、<th>です。th は、Table Header の略です。それでは、一番上の行を見出しセルにしてみましょう。
見出しセルにすると、文字は太字(bold)となり、配置は中央配置になります。
中央配置は、よしとしてこんな小さな表に太字は必要ないです。太字をやめてみましょう。そのためには、th にfont-weight : normal; を指定します。
(9) こうなると左端の1、2も中央配置にしたくなります。1、2のところも、<th> にすれば、実現できますが、ここでは、勉強のため、classセレクタを使ってみましょう。スタイルシートに.naka{text-align:center}を記入し、所定の<td> の中に class="naka" を入れましょう。classセレクタ使用は、少々面倒です。
(10) 数字の1、2は、中央配置になりました。次に見出しセルに色を付けてみましょう。背景色は、background-colorです。ライトシアン色の #e0ffff を使ってみましょう。スタイルシート指定は、background-color : #e0ffff; です。
テーブル全体に色を付けたいときは、table に指定します。
(11) 次は、セルの結合について説明します。
下の表を見てください。セルを横に結合した表の作り方です。
これを実現するためには、下の画像のようにタグを記述します。ただし、列のタグの対応状況をわかり易くするために半角スペースを入れています。実際の記述には、半角スペースは不要です。
結合するセルの<td>の中に colspan="2"を記入します。colは、column（列）から取ったもので、span はスパンでわかると思いますが、辞書を引くと「全長」とか「全範囲」です。colspan="2"は、列のスパンを２つ取りなさいということです。列のスパンを２つ取ると次の<td></td>は不要です。というか、入れるとおかしな表になります。
(12) 打ち込みが終ったら、上書き保存しIEをアクティブにして更新ボタンをクリックしてください。上の表と同じものができています。
(13) 次は、セルを縦方向に結合した表の作り方です。サンプルは、下の表です。
(14) タグは、下の画像のように打ち込みます。
結合するセルの<td>の中に rowspan="2"を記入します。row は、row（行）です。rowspan="2"は、２行取りなさいということです。２行取ると下の<td></td>は不要です。入れるとおかしな表になります。
(15) 打ち込みが終ったら、上書き保存しIEをアクティブにして更新ボタンをクリックしてください。上のサンプル表と同じものができています。
(16) 次は、表に表題（caption）を付けてみましょう。表題を「表１ 山の標高」とします。html文は、下を見てください。<table>の下に<caption>表１ 山の標高</caption>を入れただけです。
(17) 打ち込みが終ったら、上書き保存しEdgeをアクティブにして更新ボタンをクリックすると下の画像が表示されます。表の上に表題が表示されています。表題と表の間が狭いですが、<body>にline-height:1.5を設定すれば、広がります。captionは、defaultで中央配置です。左配置にするには、もうわかると思います。CSSに caption {text-align:left;} を設定してください。
(18) 最後に nowrap(改行禁止)属性について説明しておきます。HTML4.01規格では、<th>または<td>の中で文章を改行させないときは、<th nowrap>または<td nowrap>のように nowrapを入れました。ところが、HTML5規格では、nowrap属性は廃止され、下記のようにスタイルシートでwhite-space属性を使って指定するようになっています。
<td style="white-space:nowrap">
テーブルのバリエーションは、この辺で終了とします。以上のオプションが理解できれば、ほとんどの表に対応できます。
7.2 サンプル文書の表の作成
(1) それでは、サンプル文書の表を作成しましょう。jinja_sanpaiフォルダの中にあるjinja-sanpai.htmlファイルをTeraPadで開いてください。上の説明で表の作り方は、わかりましたので、タグとスタイルシートを打ち込んでください。一番上の行と一番左の列は、項目セルにし、太字は、やめましょう。具体的な数値は、人のセンスによって変わりますが、ここでは、paddingは、5pxとし、tableの幅は、500pxとします。
(2) 上書き保存し、TeraPadのIEアイコンをクリックしEdgeの表示を見てみましょう。表ができています。
(3) よく見ると表は、左に寄りすぎています。１字分ほど右に寄せましょう。そのためには、table に margin-left : 1em;を記述します。em は、１文字のサイズを表します。１字分ですから、1em です。今見ている画面のフォントサイズは、16pxですから、1em は、16pxになります。今までは、marginは、pxで指定していましたが、em 指定もわかりやすいでしょう。cssは、下図参照。
(4) 上書き保存し、Edgeをアクティブにして更新ボタンをクリックします。表は、１字分右に寄ったので、バランスがよくなりました。
(5) 以上で表の作成は、終りにしたいところですが、いろいろな適用を考えてみましょう。同じスタイルシートでは作成できないような表を２ヶ入れるには、どうすればよいでしょうか。
表を２ヶ入れるときは、第６章の ul でやったように class セレクタを適用します。例えば、今の表の class 名を .yotei1（予定）とし、追加して入れる表を .yotei2 とすると、table、th、td のセレクタ表示とタグ指定は、以下のようになります。
cssは、
table.yotei1 { }
table.yotei1 th { }
table.yotei1 td { }
table.yotei2 { }
table.yotei2 th { }
table.yotei2 td { }
タグは、
<table class="yotei1">
<table class="yotei2">
class セレクタ適用は、第６章の ul で勉強しました。上記のみで理解できると思いますので、具体的な説明は省略します。
(6) 以上で表の作成は、終りましたが、上の画像の下の方を見ると表の下に余白がなくすぐにEdgeの枠です。表の下に余白を取りましょう。取り方は、もうわかると思います。wrapper の下部にmargin か padding で余白を指定すれば、実現できます。ここでは、padding を使ってみましょう。下記のようにスタイルシートにpaddingを追記します。50px取ってみました。
(7) 上書き保存後、Edgeをアクティブにして更新ボタンをクリックします。表の下方に余白ができました。
以上でサンプル文書と同じものが完成しました。ただし、まだ、枠線が残っていますが、これを消すのは、わかりますね。セレクタ #wrapper の中の border : solid 1px #ddd を削除します。
終ってみての感想は？
終ってみてどのように感じましたか。意外に簡単だと思いませんか。
HTML文書は、文書の要素をタグで指定し、そのタグをスタイルシートでスタイル（体裁）を決めます。出来たものをよく眺めてみてください。今後、似たような文書を作るとすると、<body>と</body>で挟まれたところは、大きく変わりますが、<style type="text/css">と<style>で挟まれたところは、「値」が少し変わる程度でほとんど変わらないのではないかと思いませんか。そうです。ほとんど変わらないのです。ならば、スタイルシートの部分を基本のHTMLとして保存しておけば、スタイルシートの打ち込みは、最少限となり楽にHTML文を作成できるようになります。
7.3 今後のために
それでは、ベースとなるHTML文を作成しましょう。
完成した jinja_sanpai.html をTeraPadで開いておいて、「ファイル」→「名前を付けて保存」をクリックし、「Homepage資料」フォルダの中に base2.html という名前を付けて保存します。そして、下の画像になるように不要部分を削除しましょう。スタイルシード部と<body>内の<wrapper>と<h1>は、ほとんど変更することはないので、残しておきましょう。赤字で示した部分は、各人決めてください。
完成したら上書き保存してください。
なお、HTML文の中で残しておきたいが、表示させたくないところは、<!-- と -->で囲みます。CSSでは、/* と */で囲みます。
今後、同様な文書を作るときは、base2.htmlを開いて作成してください。スタイルシートは、ほとんど記述する必要はなく、せいぜい値の変更程度になるでしょう。
スタイルシートの記述には、３通りの方法があると書きましたが、第３の方法は、まだ紹介はしていません。base2.html として保存するほかにスタイルシートとして保存する方法があります。余裕のある方は、「１３．スタイルシートのいろいろな使い方」の「1. CSSの第３の表記法」を勉強してみてください。