セルの幅と高さの設定

セルの幅はテーブルの幅が指定されていない場合には同じ列に含まれる最大幅のセルに自動的に合わせられます。テーブルの幅が指定されている場合にはテーブルの幅に合わせて自動的に調整されます。(詳しくは「テーブルの幅の設定」を参照して下さい)。

このようにセルの幅は自動的に決まりますが、セルの幅を指定したサイズに設定する事も可能です。またセルに対しては高さも同じように設定することが出来ます。td要素又はth要素のwidth属性及びheight属性を使います。

<td width="幅" height="高さ">セル</td>

※table要素とは異なりtd要素やth要素のwidth属性とheight属性は非推奨属性となっているため「Transitional DTD」または「Frameset DTD」でしか使用できません。(DTDについては「DTDの種類」を参照して下さい)。

セルの幅及び高さにはピクセルで指定するか、親要素に対するパーセンテージで指定します。

<table>
  <tr>
    <td width="200" height="100">セル</td>
    <td>セル</td>
    <td>セル</td>
  </tr>
</table>

この場合はセルの幅が200ピクセルで高さが100ピクセルとなります。

<table>
  <tr>
    <td width="50%">セル</td>
    <td>セル</td>
    <td>セル</td>
  </tr>
</table>

この場合は親要素の幅の50%の幅となります。td要素やth要素の親要素はtr要素ですので行の幅に対するパーセンテージとなります。高さに対してもパーセンテージ指定が可能ですが、何に対するパーセンテージとなるのか分かりませんでした。

サンプル

では簡単なサンプルで試してみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>テーブル</title>
  </head>
  <body>
    <h1>テーブル</h1>

    <table border="1">
      <tr><th width="120" height="50">部署名</th><th>計画</th><th>売上</th></tr>
      <tr><td>本社</td><td>1,400</td><td>1,300</td></tr>
      <tr><td>大阪支社</td><td>750</td><td>920</td></tr>
      <tr><th height="50">合計</th><td>2,150</td><td>2,220</td></tr>
    </table>

  </body>
</html>

では作成したHTML文書をブラウザで表示させてみます。

p4-1

セルの幅と高さが指定した値に設定されていることが確認できます・

スタイルシートによる指定

セルに対して幅や高さを設定する場合にはスタイルシートを使っても設定が可能です。スタイルシートで幅を指定するには widthプロパティを使い、高さを指定するには heightプロパティを使います。

詳細はスタイルシートのページで解説しますのでここでは使い方だけを確認しておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>テーブル</title>
  </head>
  <body>
    <h1>テーブル</h1>

    <table border="1">
      <tr><th style="width:100px;height:50px;">部署名</th><th>計画</th><th>売上</th></tr>
      <tr><td>本社</td><td>1,400</td><td>1,300</td></tr>
      <tr><td>大阪支社</td><td>750</td><td>920</td></tr>
      <tr><th style="height:40px;">合計</th><td>2,150</td><td>2,220</td></tr>
    </table>

  </body>
</html>

では作成したHTML文書をブラウザで表示させてみます。

p4-2

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。