テーブル編−３
HTML講座第２０回
☆テーブル(表)の大きさを指定しよう - クイックガイド
腹減り日誌♪ - donguri browser　
結局・・・
１日５食で妥協するのであった・・・



 
１． 表の大きさを指定してみよう
width,height
 
２． 表とセルで違う指定をした時は
 
←前回『テーブル(表)の背景色を指定しよう』へ 次回『テーブル(表)の表示位置を指定しよう』へ→
表の大きさを指定してみよう

今度はテーブルの大きさを指定してみよう。 これも表全体での指定も出来るし、 行(これは縦幅のみ)毎やセル毎の指定も出来るよ

テーブルの横幅を指定する属性はwidth、
テーブルの縦幅を指定する属性はheightだよ。

属性値は半角数字、または半角数字と%で指定するよ。

細かい事を言えば補足しておかなきゃいけないことも たくさんあるんだけどここでは省略させてもらって とりあえず表示させてみるね。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
 
<!--表全体の大きさを指定-->
<table border="1" width="120" height="150">
 <tr>
  <td>データ１</td>
  <td>データ２</td>
  <td>データ３</td>
 </tr>
 <tr>
  <td>データ４</td>
  <td>データ５</td>
  <td>データ６</td>
 </tr>
</table>
 
<!--行毎の大きさを指定-->
<table border="1">
 <tr height="150">
  <td>データ１</td>
  <td>データ２</td>
  <td>データ３</td>
 </tr>
 <tr>
  <td>データ４</td>
  <td>データ５</td>
  <td>データ６</td>
 </tr>
</table>
 
<!--セル毎の背景色を指定-->
<table border="1">
 <tr>
  <td width="120" height="150">データ１</td>
  <td>データ２</td>
  <td>データ３</td>
 </tr>
 <tr>
  <td>データ４</td>
  <td>データ５</td>
  <td>データ６</td>
 </tr>
</table>
 
</body>
</html>

腹減り日誌♪ - 
データ１ データ２ データ３
データ４ データ５ データ６
 
データ１ データ２ データ３
データ４ データ５ データ６
 
データ１ データ２ データ３
データ４ データ５ データ６
 
１つのセルに合わせて縦横のセルも大きさが変わってるね。




ブラウザでの表示はこちら(別ウィンドウ)

表とセルで違う指定をした時は

例えば３つの列を持つ表があったとして <table>で横幅を200と指定、 それぞれの<td>で横幅20(つまりは合計60)を 指定した場合どうなるかをみてみよう。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
 
<table border="1" width="200">
 <tr>
  <td width="20">データ１</td>
  <td width="20">データ２</td>
  <td width="20">データ３</td>
 </tr>
</table>
 
</body>
</html>
各セルの合計より表の指定のほうが大きい状態。

腹減り日誌♪ - 
データ１ データ２ データ３



表の大きさに合わせてセルが大きくなるよ
ブラウザでの表示はこちら(別ウィンドウ)

今度は表での指定が各セルの合計より小さい場合だよ。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
 
<table border="1" width="60">
 <tr>
  <td width="100">データ１</td>
  <td width="100">データ２</td>
  <td width="100">データ３</td>
 </tr>
</table>
 
</body>
</html>
今度は逆の例。

腹減り日誌♪ - 
データ１ データ２ データ３



表の大きさに合わせてセルが小さくなるよ
ブラウザでの表示はこちら(別ウィンドウ)

このように横幅の場合は表の指定の方が優先されるよ。 ちょっとしたことで表示が変になることもあるので うまくいかないときはチェックしてみるといいかもね。 慣れてくればすぐにわかるようになると思うけどね。

次は表の表示位置の指定だよ。
前回は表の背景色の紹介だったね。

ウェブ木箱＞HTML講座
Copyright(C) 2003 あう