初心者必見！お小遣い稼ぎ完全マニュアル

【お小遣い稼ぎ完全マニュアル】では、インターネットを使ってお小遣い・副収入を稼ぐ方法を紹介します。もちろん無料で始められるので初心者でも安心！みんなでお小遣い・副収入をGETしましょう！

TOP > > 表を作る！応用編⑤　テーブルの大きさを変えるTOP > HP(ブログ)をカスタマイズする！ > 表を作る！応用編⑤　テーブルの大きさを変える

表を作る！応用編⑤　テーブルの大きさを変える

2006/10/25(水)

前回は、テキストの位置を指定する方法を説明しました。

今回は予告通り、テーブル(表)の大きさを変える方法について説明します。

前回の記事「表を作る！応用編④　テキストの位置を指定する」の最後に軽く説明しましたが、
テーブル作成時に何も指定しなければ、セルの中のテキストまたは画像等の大きさに、テーブルの大きさが自動的に合わせられます。

＼(*^-^*)／

(´▽｀*)

(´Д｀)

||(-_-；)||||

＿|￣|○

＿|￣|...○

＿|￣|................................○

このように。
一番下のセルに引っ張られて、全ての行が長くなってしまいました。

あらかじめテーブルの大きさを指定すれば、思い通りのテーブルを作れますよ。

では早速、テーブルの大きさを指定する方法を説明します。

---------------------------
①テーブルの横の大きさを指定する

横の大きさを指定するタグは、width="横幅"です。

<table width="横幅">

となりますよ。
横幅には、ピクセル単位の数字か、表示される範囲における割合です。

表示される範囲における割合？？
つまり、記事の中の表であれば、"100%"にすると、記事欄の幅いっぱいのテーブルになります。

実際に、上に示した表の幅を指定するとどうなるかを例に示しますね。

"横幅"を100%にしました。

＼(*^-^*)／

(´▽｀*)

(´Д｀)

||(-_-；)||||

＿|￣|○

＿|￣|...○

＿|￣|................................○

"横幅"を100にしました。

＼(*^-^*)／

(´▽｀*)

(´Д｀)

||(-_-；)||||

＿|￣|○

＿|￣|...○

＿|￣|................................
↓
○

---------------------------
②テーブルの縦の大きさを指定する

縦の大きさを指定するタグは、height="高さ"です。

<table height="高さ">

となります。
高さも同様に、ピクセル単位の数字か、表示される範囲における割合です。

実際に、最初に示した表の高さを指定するとどうなるかを例に示しますね。

"高さ"を100にしました。

＼(*^-^*)／

(´▽｀*)

ここまでは大丈夫ですか？
<table>タグの中に、横幅か高さを指定するタグを入れるだけなので、簡単ですよね。
では、これを応用して、横幅と高さの大きさを同時に指定してみましょう。

---------------------------
③テーブルの横幅と高さを指定する

考え方は簡単です。
<table>タグの中に、①と②を入れてあげれば良いだけです。

<table　width="横幅" height="高さ">

これだけです。
では実際に例を示します。

"横幅"と"高さ"を100にしました。

＼(*^-^*)／

(´▽｀*)

(´Д｀)

||(-_-；)||||

＿|￣|○

＿|￣|...○

＿|￣|................................○

あれ？
高さが変わっていないですね？

そうなんです!!
ここまで説明した大きさとは、テーブル全体の大きさだからです。
？？
意味がわかりにくいですね。。

つまり、上の表のテーブル全体の高さを「100」と指定していますが、7行あるために、テーブルの高さが「100」を超えているんです。
なので、「高さを100にしてね」という命令が「何言ってんの」とスルーされて、自動的に変えられているわけですね。

そんなときは、いつものように、<tr> <tb>タグの中で大きさを指定すれば良いのです。
そうすれば幅と高さが揃ったキレイなテーブルができますよ。