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

テーブルの幅を指定する

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

このテーブルの幅を設定しておく事で、ウィンドウサイズが変化してもレイアウトが変化しない様にできます。
右図では、ウィンドウサイズを小さくすると、テーブルも小さくなってしまいます。

sample

幅を200pxに設定します。

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

ＨＴＭＬ　<table width="幅">

テーブルの幅を指定するには、<table>に対してwidth="幅"を指定する事で可能です。

幅の指定方法は下記の様になります。

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

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

書き方は


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

こうなります

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

スタイルシート　width:幅

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

要素に直接書く

書き方は


<table border="1" style="width:200px">
<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   { width:200px;}

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

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

 </body>
</html>

こうなります