ホームページ事始め

楽しいホームページ入門
６．表と言っても

●　表と言っても

今まで会社の中でパソコンを使っていた身には、「表」イコール「エクセル」みたいな考えがありましたのでHTMLで扱う「表」には多少戸惑いがありました。HTMLで「表」と呼ぶものは、見た目が罫線で仕切ってある画面だと理解し、自動計算とかグラフ作成とかはお呼びでないものだと考えなくてはなりません。それだけに、一方では、ページを構成する上で非常に役に立つものでもあります。

表を記述する基本は、HTML文書中で、table要素を使い<table>～</table>で囲んだ範囲が表である事を宣言します。さらに、その表の中の横１行を<tr>～</tr>で囲んだtr要素で宣言し、さらにその中に１マス毎に<td>～</td>で囲んだtd要素でマスの中味を表します。例えばHTML文書の中で、

と記述すると、Web画面では右の様に表示されます。ちなみに、このサンプルでは、table要素の属性としてborder属性とsummary属性を使いました。border属性は罫線を表示する為のもので、もしborderと記述しなかったら、画面上でこの表には罫線は表示されません。又、summary属性は表の概要を記述するもので、点字環境や音声読み上げ時に使われます。

次に、CSS文書中でプロパティ設定をしてみます。まず、横幅と高さの指定にwidthプロパティとheightプロパティを使います。両プロパティとも数値を指定すると各マスの横幅、高さが決まります。この指定が無いと、マスの中味の文字列の長さや高さに合わせて自動的に設定されます。例えば、CSS文書中で

table { width: 300px; height: 150px; }

と記述すれば、Web画面は下の様に変わります。

ここで、もう一度HTML文書に戻ります。この表の最初の行はむしろ「見出し」と言えますので、td要素では無く見出しとしてのth要素を使い、次の様に変更する事にします。

又、表のタイトルを別に設定したい場合はcaption要素を使います。HTML文書中での記述として、

と、<table>～</table>の間に記述します。今回のサンプルでは、</table>の直前に記述してみました。以上の結果のWeb画面は下の様になります。ちなみに、見出し部分は文字が太文字になり、文字位置は中央になります。

●　表の見映え改善

全ての文字位置をマス中のセンターとする

見出しの行を高さ70px、背景色ピンクとする

０時の行の高さを50pxとする

「行き先」、「名古屋」、「大阪」の各列の幅を100pxにそろえる

大阪の時刻（分）の文字を赤色にする

様に変更してみます。この対応として、HTML文書中の記述は、

と変更します。赤字の部分が今回の追加部分です。

CSS文書中の記述は、

table { width: 300px; height: 150px;
　　text-align: center; vertical-align: middle; }
th { height: 70px; background-color:#ffbbbb; width: 100px; }
tr.tr1 { height: 50px; }
td.td1 { color: red; }

の赤字の部分を追加しました。この結果のWeb画面は下の通りです。マスの高さについて注意が必要で、一番下のマスの高さは、自動的に150-70-50=30pxになっています。幅についても同様の考え方です。尚、文字位置の種類は、center、middle以外にleft、right、縦位置ではtop、bottomがあります。

次に、マス間隔と罫線も修正して見ます。マス間隔は、HTML文書中でtable要素の属性のcellspacingを指定します。罫線は、CSS文書中でtable要素のborderセレクタで

{ border: 罫線の種類　罫線の太さ　罫線の色; }

と記述する事で指定できます。

サンプルでは、マス間隔（2pxが既定値）を15pxに広げる為に、HTML文書中で、

と変更します。赤字の部分が今回の追加部分です。又、罫線を二重線で太くし黒色にしたいので、CSS文書に、

table,tr,td,th { border: double 4px black; }

の１行を追加します。この結果のWeb画面が下の様になります。ところで下の画面を見ると各マスが小さくなっています。これは表全体の幅が３００ｐｘ、高さが２００ｐｘで規定されていながらマス間隔を広くとった為で、この点も実際の設計時には要注意です。又、罫線の種類ですが、none（罫線無し）、solid（１重線）、dashed（点線）、dotted（ドット点線）などの種類が有ります。

●　マスの結合

ところで、表作成する中で、複数のマスを結合する場合があります。この方法は、HTML文書中のtd要素（又はth要素）で、縦同士の結合ならrowspan属性、横同士の結合ならcolspan属性を使い、

と記述します。

サンプルで、HTML文書とWeb画像を対比させてみます。

全てのマスが独立

Web画像は右の様になります。

「い」の縦列の３マスを結合

Web画像は右の様になります。

「い」の行の横３マスを結合

Web画像は右の様になります。

「い」の行・列の２マスづつを結合

Web画像は右の様になります。

ところで、結合したマスの中での文字の位置が気になります。

結合したマスの中で水平方向の中央に来ていません。どのような事になっているのかを確かめる為に、行・列２ママス結合のサンプルで、 HTML文書中、マスの中を「い」１文字だけではなく「いいいいいいいいいいい」と１１文字入れてみると、Web画面は右の様に変わりました。どうやら、結合後の大きなマスの左半分しか使っていない様です。

そこで、スタイルシートでこのマスの大きさを改めて定義します。この大きなマス用のclass名としてtd1を作る為に、CSS文書中に次の一行を加えます。

td.td1 { width: 120px; height: 80px; }

このクラス名をHTML文書中で使用します。具体的には、次の様な記述です。

<table>
<tr><td rowspan=”2” colspan=”2” class=”td1”>いいいいいいいいいいい</td><td>ろ</td></tr>
<tr><td>は</td></tr>
<tr><td>に</td><td>ほ</td><td>へ</td></tr>
</table>

Web画像は右の様になり、マスの中を１００％使っています。

●　表の位置

　次に、Web画面での表の位置を指定します。このための方法は、CSS文書中でtable要素のmarginプロパティやfloatプロパティを使います。marginプロパティは

table { margin-left: 数値１; }

　あるいはtable { margin-right: 数値１; }

と記述します。ここで、数値１はピクセル数（px）又は割合（%）で指定します。サンプルとしてCSS文書中のtable要素に次の赤字部分を追加しました。

table { width: 300px; height: 150px; text-align: center; vertical-align: middle;
　　　　 margin-left: 100px; }

その結果のWeb画面上では下の様に、表の左側が画面端から100px離れました。

尚、数値１の別の記述としてauto指定もあります。auto指定により画面の中央位置の指定もできるそうですが私の場合うまくできませんでした（水平線と同じ結果）。

次にfloatプロパティでも左ぞろえ、右ぞろえができ、その記述は「画像と文字列の関係」で説明した位置指定と全く同じです。今回はサンプルとして、CSS文書中のtable要素への追加部分を次の赤字の様に様に変更します。

table { width: 300px; height: 150px; text-align: center; vertical-align: middle;
　　　　 float: right; }

この結果、Web画面は下の様に変わります。

ところで、以上述べた範囲だと、このままでは私は表を画面中央に配置できない事になります。困ってしまいました。そこで、CSS文書の赤字部分の変更は止めて、HTML文書中でtable要素のalign属性を使う事にしました。HTML文書中の記述は、

の赤字部分を追加しました。その結果のWeb画像は、下の様になっています。

ページトップへ

前ページ←

→次ページ

楽しいホームページ入門 ６．表と言っても

● 表と言っても

● 表の見映え改善

● マスの結合

● 表の位置

楽しいホームページ入門
６．表と言っても

●　表と言っても

●　表の見映え改善

●　マスの結合

●　表の位置