ホームページのテンプレート -3ページ目

テーブルの枠の横幅と縦幅、文字と枠との間隔の指定

前回、テーブルの枠の太さや色、線種の指定の方法を学んだことを報告しました。

今回はテーブルの枠の大きさ、枠内の文字の枠との間隔の指定法について報告します。

これらのことを指定するのには、<table>要素の属性を知る必要があります。指定する属性を以下に示します。なお、いずれも長さを””で囲って表示し、特に単位を指定していない限り、ピクセル(PX)となります。

　　テーブルの横幅を指定　　　width=”長さ”

　　テーブルの縦幅を指定　　　height=”長さ”

　　セル(テーブルを構成するマス目(「セル」という))を囲む枠と文章の間の幅を指定

　　　　　　　　　　　　　　　cellpadding=”長さ”　　

　　セルどうしの間隔を指定　　cellspacing=”長さ”

簡単なテーブルを表示するhtmlファイルの例を以下に示します。

<tr>

<td>

テーブルテスト１

</td>

<td>

テーブルテスト２

</td>

</tr>

　　</table>　

このhtmlファイルは、次ような枠で表示されます。

このhtmlファイルのtable要素にwidth, cellpadding, cellspacingの各属性を加えた例を次に示します。

<tr>

<td>

テーブルテスト１

</td>

<td>

テーブルテスト２

</td>

</tr>

　　</table>　

このhtmlファイルは、次ような枠で表示されます。

pxの単位の長さが実際どの位になるか分かりづらいところですが「テーブルテスト」の文字と枠との間の長さとセルとセルとの間の長さに差があることがわかります。

Html言語ではテーブルの表示の仕方でもtableの属性値を指定することで色々な形で表現できることが分かりました。

標準的なパターンを予めテンプレートとして作成し、そのテンプレートで現している属性値の意味を理解し、その値の少しの手直しをすることで、自分の納得するホームページを作成するということが、上達する早道であると思いました。

テーブルの線や太さや色の変更

htmlファイルを使用でテーブルを表示するには<table>のタグを使うことがわかりました。

今回、テーブルの枠を表す線の太さや色を変更するにはどうしたらいいかについて学びました。

簡単なテーブルを表示するhtmlファイルを以下に示します。

<tr>

<td>

テーブルテスト

</td>

<td>

</tr>

　　</table>　

そうすると、このような枠が表示されます。

この例で、線の太さや色を変えるにはborderの属性の変わりにstyleの属性を用います。具体的には、border="1"の代わりに例えばstyle=”border:1px solid black;”とします。これは、線の太さを、1px(pxはピクセルと呼び長さの単位を表します)で表し、線の種類をsolidということで実線を表し、線の色をblackすなわち黒で表すことを示します。そうすると次ぎのようなテーブルが表示されます。

ここで、このpxの単位ですが、定義が中々難しく大まかに言うと画像を表現するための画素、ドットを表しているということです。

線の太さは1pxの数字の部分を増やすと太くなります。線の種類を2重線にしたければsolidの代わりにdoubleとすることで表示できます。また、線の色を変えたければblackの代わりに例えばredとすると赤くなります。以下はstyle=”border:5px solid black;”と代えた場合の例を表示します。

このようにstyle属性で枠の線の太さや色を簡単に変えることができデザイン性のあるホームページを作成することができることが分かりました。Html言語では枠の表示の仕方でも様々な形で表現できます。それを予めテンプレートとして作成しておきそれを活用することは、早く綺麗なホームページを作成する秘訣であると感じました。

テーブルを使って枠を作る

　ホームページを作成する為にはテーブルを旨く活用することが重要であることが分かりました。テーブルを使いこなせれば、ホームページ作成の技術が高まります。そのやり方をマスターすることが初心者として大切であることを知りました。

　枠を作るときは <table> タグと</table> タグの間に作成します。この<>で囲まれたtableはhtml言語で要素と呼ばれています。さてテーブルを構成するマス目(「セル」という)を作るにはどうすればよいでしょうか。縦の枠を重ねるためには(行を増やす)<tr>のタグを使用し、横に枠を重ねる(列を増やす)には<td>のタグを使用します。このタグの組み合わせでテーブルを作成することができます。テーブルを作るとき<table>の要素に対しborder="1"を使って枠を表示させながら作るとわかり易いことも知りました。この指定を行はないと枠が表示されないということです。border="1"は要素に対する属性と呼ばれそれ以外にも色々の属性があります。属性は要素の機能を補足したり追加したりする機能があります。どんな属性を指定できるかはタグごとに決まっており<table>、<tr>、<td>の各タグにおいても属性を旨く指定することで、様々な形式のテーブルを作成できるということになります。

次のようなhtmlファイルは、

<tr>

<td>

テーブルテスト1

</td>

<td>

テーブルテスト2

</td>

</tr>

<tr>

<td>

テーブルテスト3　　　　
　　　 </td>

<td>

テーブルテスト4

</td>

<td>

テーブルテスト5

</td>

</tr>

</table>

下図のようになります。

このように、<tr>～</tr>の一つの縦枠に対して横枠に<td>～</td>のタグを用いてセルを重ねることで表が作られるということを知りました。

作られたセル（枠）に、パーツを組み合わせることでホームページを簡単に作れるようになることをこれから学習していきます。