ホームページ作成(表を使いたい)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

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

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

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

sample

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

見出1見出2
セル1−1セル1−2
HTML <table height="高さ">

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

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

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

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

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

書き方は

<table border="1" height="100">
<tr><th>見出1</th><th>見出2</th></tr>
<tr><td>セル1−1</td><td>セル1−2</td></tr>
</table>
こうなります
IE7
IE
Firefox
Opera

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

スタイルシート height:高さ

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

要素に直接書く
書き方は

<table border="1" style="height:100px">
<tr><th>見出1</th><th>見出2</th></tr>
<tr><td>セル1−1</td><td>セル1−2</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>見出1</th><th>見出2</th></tr>
        <tr><td>セル1−1</td><td>セル1−2</td></tr>
        </table>

 </body>
</html>
こうなります
IE7
IE
Firefox
Opera

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