ホームページ作成 - テーブルの高さを指定する

テーブルの高さを指定する

テーブルの高さを指定する方法です。

sample

高さを100pxに設定します。

見出１	見出２
セル１－１	セル１－２

ＨＴＭＬ　<table height="高さ">

テーブルの高さを指定するには、<table>に対してheight="高さ"を指定する事で設定できます。

本来は<table>にheight=""を指定する事は対象外です。
高さを指定するには、セルの高さを指定するで行う方法とスタイルシートで指定する方法で行ってください。

一応下記がheightで指定する方法です。

意味	指定
ピクセル	`height="数値"`
％	`height="数値%"`

％で指定した場合には、ブラウザのウィンドーサイズや、そのテーブルが含まれているブロック要素などにより大きさが変化します。

書き方は


<table border="1" height="100">
<tr><th>見出１</th><th>見出２</th></tr>
<tr><td>セル１－１</td><td>セル１－２</td></tr>
</table>

こうなります

ホームページ作成ＴＯＰ > テーブル > テーブルの高さを指定する > このページのＴＯＰ　▲

スタイルシート　height:高さ

テーブルの高さを指定するには、<table>に対してheight:高さ;のスタイルを指定する事で可能になります。

要素に直接書く

書き方は


<table border="1" style="height:100px">
<tr><th>見出１</th><th>見出２</th></tr>
<tr><td>セル１－１</td><td>セル１－２</td></tr>
</table>

headに書く

書き方は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        table      { height:100px;}

 -->
 </style>
 </head>
 <body>

        <table border="1">
        <tr><th>見出１</th><th>見出２</th></tr>
        <tr><td>セル１－１</td><td>セル１－２</td></tr>
        </table>

 </body>
</html>

こうなります