MB-Support

パソコン初心者のサポートページ

セルの大きさを指定する方法 width height

 セルの幅を固定するには <td> の中に width="*" を書きます。*に数字を入れて指定しましょう!



セルの幅を固定する  width="*"

セルの幅を固定するには <td> の中に width="*" を書きます。* に数字を入れて指定しましょう!



width="200" の場合

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td  width="200">ホームズの思い出</td> 
   <td  width="200">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

2 つのセル幅を変えてみる

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td  width="100">ホームズの思い出</td> 
   <td  width="200">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


セルの高さを固定する  height="*"

セルの高さを固定するには <td> 〜 </td> の中に height="*" を書きます。* に数字を入れて指定しましょう!

height="100" の場合

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td  height="100">ホームズの思い出</td> 
   <td  height="100">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

高さを違う数字で指定した場合、2 つのセルの高い方にそろいます。



セルの幅と高さを固定する  width="*" height="*"

セルの幅と高さを固定するには <td> 〜 </td> の中に width="*" height="*" を書きます。 * に数字を入れて指定しましょう! width="*" と height="*" の間に半角スペースを入れましょう。

width="150" height="100" の場合

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td width="150" height="100">ホームズの思い出</td> 
   <td width="150" height="100">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


table の横幅も固定すると

セル幅だけの指定だとブラウザを縮めた時に、セルも平行して縮まります。

表が伸縮してしまう

伸縮を無効にするには、<td> タグで幅を指定して、さらに <table> タグでも 指定します。<table> タグでの幅の指定はプラウザの影響を受けません。

<table> で width="400" を指定して、<td> で width="200" を指定した場合。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" width="400">
  <tr>
   <td width="200">ホームズの思い出</td> 
   <td width="200">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


セルがブラウザのサイズ変更により、自動で縮まらずスクロールバーが表示されます

横スクロールバーが表示される



戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項