テーブル内の背景の色を変えるたり画像を使用したりする方法

ホームページを作る場合テーブルを使用し、そのテーブル内のセル（枠）に色々の情報を加えていくと作りやすいことが分かりました。今回はそのセルの中の背景に色をつけたり、画像を貼り付けたりする方法を学習しました。

　まず背景の色ですがtable要素にbgcolorの属性で指定します。すなわち、<table bgcolor=”色”> ～</table>で表します。例えば青い背景にしたければ、bgcolor＝”blue”と表現すればよいわけです。

　次に、背景画像ですが、table要素にbackground属性で指定できます。しかしtable要素のbackground属性はブラウザーの独自の属性で、HTMLの正式な仕様でないため背景画像をつけるには、table要素のstyle属性を使用してスタイルシートのプロパティとして画像情報を定義します。例えば、画像がgazou.figというファイルに格納されているとすると<table style=”background:　URL(gazou.fig)”> ～</table>という表現で画像をテーブルの背景に表示できます。ただしこの場合gazou.figとhtmlファイルとは同じフォルダー内に存在する必要があります。また、この指定だとセルの大きさが大きく画像の大きさと一致してないと同じ画像が繰り返し表示されセルを埋めます。この繰り返しをさせないためには、background-repeatというプロパティを用いてno-repeatを指定します。すなわち<table style = ”background: URL (gazou.fig);　background-repeat:no-repeat” > ～</table>とすることで表現できます。

　このようにテーブルの中身を色々の形で表現できることが分かりました。

テーブルを使ったときの枠等の位置を決める方法

　ホームページ上に作ったテーブルの位置ならびにテーブル内の文字の配置を指定する方法について学びました。

テーブルの位置(画面上の横方向での位置)を決めるのには、table要素にalign属性を指定します。指定の仕方は簡単で画面の真ん中に表示する場合は、align＝“center”、右側に表示する場合はalign＝“right”、左側に表示する場合はalign＝“left”とすればよいということになります。align属性を指定しないと画面の左側にテーブルは表示されます。

例えば、テーブルを中央にしたい場合は

　　<table align=”center”>　～　</table>

とすることで画面上の中央に表示されます。

　テーブルの中の文字を中央、左右に表示する方法は、表の中の行を作るtr要素にalign属性を与えることで指定できます。すなわちalign属性に「left」(左揃え)、「right」(右揃え)、「center」(中央揃え)、「justify」（両端揃え）を指定することによりテーブル内の文字を色々配置できます。

また、テーブル内の文字を上中下に配置するには、tr要素にvalign属性を与えて指定できます。すなわち、valign属性に「top」（上揃え）、「middle」(中央揃え)、「bottom」（下揃え）を指定して表現できます。

このようにテーブル内の文字はalignとvalignで位置を表示することが容易にできることがわかりました。

テーブルを使って枠を作るということ・その２

前々回にテーブルの線の太さや色を変えるにはborderの属性の変わりにstyleの属性を用い、例えば、border="1"の代わりにstyle=”border:1px solid black;”としますと述べました。

しかしこのタグでテーブル作るとセルの境界線が消えてしまうことが分かりました。

例えば、以下のようなhtmlファイルを作ります。

<table style="border:3px double black;" width="500" cellpadding="10" cellspacing="10">
<tr>
　<td>
　　テーブルテスト1
　</td>
　<td>
　　テーブルテスト2
　</td>
</tr>
<tr>
　<td>
　　テーブルテスト3
　</td>
　<td>
　　テーブルテスト4
　</td>
</tr>

</table>

そうすると、以下のようなテーブルになりセルの間の枠が消えてしまiいます。

色々確認した結果、セル間に枠の線を入れるには、やはりborderの属性を指定しなければならないことが分かりました。

上記のtable属性を

<table border="1" style="border:3pxdoubleblack;" width="500"

cellpadding="10" cellspacing="10">

のように変更すると以下のように枠が表示されました。

style属性が、外枠のみ有効な属性なのかどうか、私は、良く分かりませんが一応テーブルを表示することができました。

このような、ちょっとした事でもつまずくと初心者の私は悩んでしまいます。問題解決のため色々経験をつむ必要があるとは思います。しかし、なるべく悩まないで、どうしたら解決できるかということを早く確認できる場所があると心強いと思いました。