使いやすいテーブル
特定の行や列だけまとめて背景色をつけたり、文字サイズを変えたりできる使いやすいテーブルの作り方や、
幅を固定していても伸び縮みする、レイアウトが崩れない便利なテーブルの作り方等、
テーブルをより使いやすくする方法を見ていきます。
損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る       文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください
テーブルの中味をまとめて変更する       ▲
テーブルのセル一つ一つに、背景や文字サイズの指定をしていくのは面倒です。
まとめて変更する方法を見ていきます。

特定の行だけまとめて変更する
テーブルの特定の行だけ背景色をつけるときはbgcolor=" "の指示を<TR>に入れてもいいのですが <TBODY>というタグを使うとまとめて効果を与えることができ便利です。
効果を与えたい行を<TBODY>でくくり<TBODY>の中に与えたい効果を指定します。
真中の2行だけ背景色を緑にしたい時はこのようになります。
<table border="1" width="300">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<TBODY bgcolor="green">
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</TBODY>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16

文字の色を変えるときは <TBODY style="color:#00FF00;"> のように指定します。
<TBODY style="font-weight:bold;"> とすれば <TBODY> で囲まれた部分の文字が全てまとめて太字になります。

特定の列だけに効果を与える
テーブルの特定の列だけ背景色をつけるときは <COL>というタグを使います。 <TABLE>と<TR>の間に<COL>と列の数だけ書きます。
効果を与えたい列が2列目のときは上から2番目の<COL>に、3列目のときは上から3番目の<COL>の中に 与えたい効果を指定します。
1列目と3列目だけ背景色を緑にしたい時はこのようになります。
<table border="1" width="300">
<COL bgcolor="green">
<COL>
<COL bgcolor="green">
<COL>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16

必要な効果を与えた<COL>の後に書いてある<COL>は省略することができます。
上の例の場合は4番目に書いてある<COL>は省略可能です。
効果を与えるのが3番目までですから、それ以降はあってもなくても変わらないからです。

文字の色を変えるときは <COL style="color:#00FF00;"> のように指定します。
<COL style="font-weight:bold;"> とすれば該当する列の文字が全てまとめて太字になります。

レイアウトの崩れないテーブル       ▲
幅を固定しても伸び縮みするテーブル
テーブルの幅はセルの中に書いてある文章の長さに応じて勝手に伸び縮みします。
固定したい時は、<TABLE>とか<TD>の中に width=" " のような指示を追加しますが、 全ての人が自分で設定した環境で見てくれるとは限りません。
小さな文字で見る人も大きな文字で見る人もいますから、せっかくレイアウトを崩さないために テーブルの幅を固定しても、かえって見づらくなってしまうこともあります。

そこで『普段は伸び縮みするが、一定の数値以下になると幅が固定される使いやすいテーブル』を作ってみます。


   OPT-CLUB   
儲け方 交換レート/届いたメール 良いポイント、悪いポイント
1)メール受信
　10ポイント
2)紹介制度
　1人100ポイント
交換レートは1ポイント1円で、1000ポイントから現金と交換できる。 届いたメールは13件で、そのすべてにポイントが付いていた。

メールを受け取るだけで10ポイント(10円)にもなる。 メールは月に13件しか来ないが、それでも130円の報酬となる。１通１円のメールを毎日受け取るよりも、 はるかに効率的。友達紹介でも一人100ポイントが得られる。 欠点はポイントに有効期限があること。 有効期限は１年間に設定してあり、１年以内に1000ポイント貯めないとゼロになってしまう。 しかし単純計算では13件Ｘ12ヶ月で1560ポイントとなり、この条件はクリアできそう

上のテーブルは普段は伸び縮みしますが、各セルとも設定値以下にはならないようにしてあります。
実際にブラウザーの表示画面を大きくしたり、小さくしたりして確認すると変化がわかると思います。
テーブルの幅が640ピクセル以下になるとそれ以上小さくならず、左右のスクロールバーが出てきます。
方法はいたって簡単で、各セルに高さ1ピクセルの透過GIF画像を入れているだけです。
一番左のセルには高さ1ピクセル・幅103ピクセルの画像、中央のセルには幅153ピクセル、右のセルには384 ピクセルの画像が各々入っています。
高さ1ピクセルですから、表示の邪魔にはなりません。
見えなくても画像が入っていることには 変わりありませんので、画像の幅以下にはセルは小さくなりません。
全体の幅が640ピクセル以下になるように固定すれば、レイアウトをある程度保った上で、印刷時に端が切れてしまうこともない 、かなり使いやすいテーブルになります。

枠一つのテーブルの見せ方       ▲
普通の表示
<table bgcolor="#006000"><tr><td>
<font color="#FFFFFF" size="4"> <b>いろんなテーブルの使い方</b></font>
</td></tr></table>
いろんなテーブルの使い方



文字と枠の空間を広げる
cellpadding="数字"と記入すると文字と枠との空間が広がります
<table cellpadding="5" bgcolor="#006000"> <tr><td>
<font color="#FFFFFF" size="4"> <b>いろんなテーブルの使い方</b></font>
</td></tr></table>
いろんなテーブルの使い方



外枠を立体的に
border="数字"と記入すると外側に陰影が付き、立体的に見えます
<table border="7" cellpadding="5" bgcolor="#006000"> <tr><td>
<font color="#FFFFFF" size="4"> <b>いろんなテーブルの使い方</b></font>
</td></tr></table>
いろんなテーブルの使い方



枠の中にスペースを作る
cellspacing="数字"と記入すると枠の中にスペースが広がります
<table border="7" cellpadding="5" cellspacing="10" bgcolor="#006000"> <tr><td>
<font color="#FFFFFF" size="4"> <b>いろんなテーブルの使い方</b></font>
</td></tr></table>
いろんなテーブルの使い方



陰影の色変更
bordercolordark="色名" bordercolorlight="色名　と記入すると陰影の色が変わります
<table border="7" cellpadding="5" cellspacing="5" bgcolor="#006000"
bordercolordark="#227722" bordercolorlight="#00ff88"><tr><td>
<font color="#FFFFFF" size="4"> <b>いろんなテーブルの使い方</b></font>
</td></tr></table>
いろんなテーブルの使い方



内、外で陰影の色変更
bordercolordark="色名" bordercolorlight="色名" を<TD>の中に書くと、内外で陰影の色を変えられます
<table border="5" cellpadding="5" cellspacing="5" bgcolor="#006000" >
<tr><td bordercolordark="#000000" bordercolorlight="#00FF00">
<font color="#FFFFFF" size="4"> <b>いろんなテーブルの使い方</b></font>
</td></tr></table>
いろんなテーブルの使い方


複数のセルの見せ方       ▲
普通の表示
<table border="1" width="300">
<tr><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td></tr>
</table>
　 　
　 　



枠を細く
cellspacing="0" bordercolordark="色名" bordercolorlight="白" と記入するとバックが白のときは、bordercolordarkで指定した細い線で表示されます
<table border="1" width="300" cellspacing="0" bordercolordark="#FFFFFF"
bordercolorlight="#000000">
<tr><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td></tr>
</table>
　 　
　 　



イメージを変える
<TABLE>タグのbordercolorをすべて白とし、<TD>タグでbordercolorlightを明るめの色に指示する とイメージが変えられます
<table border="1" width="300" cellspacing="0" bordercolor="#FFFFFF"
bordercolordark="#FFFFFF" bgcolor="#AAFFE8">
<tr>
<td bordercolorlight="#C0C0C0">　</td>
<td bordercolorlight="#C0C0C0">　</td>
</tr>
<tr>
<td bordercolorlight="#C0C0C0">　</td>
<td bordercolorlight="#C0C0C0">　</td>
</tr></table>
　 　
　 　



レイアウト用
枠線をけし、cellspacingを大きくすると、レイアウトに使いやすくなります。
<table border="0" cellspacing="20" width="300" height="200">
<tr>
<td bgcolor="#dddddd">　</td>
<td bgcolor="#dddddd">　</td>
</tr>
<tr>
<td bgcolor="#dddddd">　</td>
<td bgcolor="#dddddd">　</td>
</tr>
</table>
　 　
　 　


テーブル枠線の表示を変える       ▲
普通の表示
<table border="1" width="300">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの外枠をなくす
　frame="void"　と記入すると外枠がなくなります
<table border="1" width="300" frame="void">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの外枠を上だけに
　frame="above" と記入すると外枠が上だけになります
<table border="1" width="300" frame="above">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの外枠を下だけに
　frame="below"　と記入すると外枠が下だけになります
<table border="1" width="300" frame="below">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの外枠を左側だけに
　frame="lhs"　と記入すると外枠が左側だけになります
<table border="1" width="300" frame="lhs">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの外枠を右側だけに
　frame="rhs"　と記入すると外枠が右側だけになります
<table border="1" width="300" frame="rhs">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの外枠を上下だけに
　frame="hsides"　と記入すると外枠が上下だけになります
<table border="1" width="300" frame="hsides">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの外枠を左右だけに
　frame="vsides"　と記入すると外枠が左右だけになります
<table border="1" width="300" frame="vsides">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの内側の枠をなくす
　rules="none"　と記入すると内枠がなくなります
<table border="1" width="300" rules="none">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの内枠を横線だけに
　rules="rows"　と記入すると内枠が横線だけになります
<table border="1" width="300" rules="rows">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの内枠を縦線だけに
　rules="cols"　と記入すると内枠が縦線だけになります
<table border="1" width="300" rules="cols">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの外枠と内枠の複合-1
　rules="rows" frame="below"　と記入すると下線だけが表示されます
<table border="1" width="300" rules="rows" frame="below">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>
　 　 　
　 　 　
　 　 　

テーブルの外枠と内枠の複合-2
　frame="vsides" rules="cols"　と記入すると縦線だけが表示されます
<table border="1" width="300" frame="vsides" rules="cols">
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td></tr>
</table>