XHTML/CSS・トップ | CSSプロパティ・目次

●表における幅と高さの基本

 width は要素の(内容領域としての)横幅を height は要素の(内容領域としての)高さを指定するプロパティです。両方とも非置換インライン要素を除いたすべての要素に指定できることになっていますが、表関係の要素に適用するときは注意が必要です。

 表関係の要素には table、caption、 colgroup、 col、 thead、tfoot、tbody、tr、th、 td などがあります。しかし実質、width プロパティと height プロパティが適用できるのはブラウザの種類とバージョンによるバグがほとんどない table 要素と th、 td のセル要素だけです。ほかはまずなんらかのバグがあります。


■表全体に幅を指定する

【CSS】

※実際の記載とは異なりますが、基本的な書式の一例です。また、幅指定に直接関係のある書式は table { width: 値 } となります。

caption {
 font-size: 1em
}
table {
 width: 60%
}
th {
 background: #800000;
 font-size: 1em
}
td {
 background: #008080;
 font-size: 1em
}

表関係の要素名一覧表と解説
要素名 解説
table 表全体
caption 表のタイトル
colgroup 縦列のグループ化
col 縦列ごとの個別指定
thead 表ヘッダ
tfoot 表フッタ
tbody 表の本体部分(内容領域、またはセルの集合体)
tr 各横1列のセルはまとめて<tr>〜</tr>で囲まれる
th 見出しセル
td データセル

【HTML】

<table border="枠線の太さ">
 <caption>表関係の要素名一覧表と解説</caption>
 <tbody>
  <tr>
   <th>要素名</th>
   <th>解説</th>
  </tr>
  <tr>
   <td>table</td>
   <td>表全体</td>
  </tr>
  <tr>
   <td>caption</td>
   <td>表のタイトル</td>
  </tr>
  <tr>
   <td>colgroup</td>
   <td>縦列のグループ化</td>
  </tr>
  <tr>
   <td>col</td>
   <td>縦列ごとの個別指定</td>
  </tr>
  <tr>
   <td>thead</td>
   <td>表ヘッダ</td>
  </tr>
  <tr>
   <td>tfoot</td>
   <td>表フッタ</td>
  </tr>
  <tr>
   <td>tbody</td>
   <td>表の本体部分(内容領域、またはセルの集合体)</td>
  </tr>
  <tr>
   <td>tr</td>
   <td>各横1列のセルはまとめて<tr>〜</tr>で囲まれる</td>
  </tr>
  <tr>
   <td>th</td>
   <td>見出しセル</td>
  </tr>
  <tr>
   <td>td</td>
   <td>データセル</td>
  </tr>
 </tbody>
</table>

※ width プロパティ、 height プロパティが表で使える値には長さを表す単位付きの数値とパーセンテージ(〜%)です。上記は値にパーセンテージ(〜%)を使っていますが、パーセントの場合、割合ですから、表示されている画面の横幅を変えてみて、適切かどうか確認をしましょう。


■セルに幅と高さを指定する

※下は、見出しセルとデータセルのすべてに 15em の横幅を指定しています。また、データセルに 3em の高さを指定してみました。ちなみに、1em が1文字位に該当します。実際のCSSソースは解説する都合上、やむなくクラス名を使っており、こちらのソースと異なってはいますが、表示は同じです。直接関係ある書式は th, td { width: 15em } td { height: 3em } です。


【CSS】

th, td {
 font-size: 1em;
 width: 15em
}
th {
 background: #800000
}
td {
 background: #008080;
 height: 3em
}

見出しセル1列目 見出しセル2列目 見出しセル3列目
データセル1行目1列目 データセル1行目2列目 データセル1行目3列目
データセル2行目1列目 データセル2行目2列目 データセル2行目3列目
データセル3行目1列目 データセル3行目2列目 データセル3行目3列目
データセル4行目1列目 データセル4行目2列目 データセル4行目3列目
データセル5行目1列目 データセル5行目2列目 データセル5行目3列目

【HTML】

<table border="枠線の太さ">
 <tbody>
  <tr>
   <th>見出しセル1列目</th>
   <th>見出しセル2列目</th>
   <th>見出しセル3列目</th>
  </tr>
  <tr>
   <td>データセル1行目1列目</td>
   <td>データセル1行目2列目</td>
   <td>データセル1行目3列目</td>
  </tr>
  <tr>
   <td>データセル2行目1列目</td>
   <td>データセル2行目2列目</td>
   <td>データセル2行目3列目</td>
  </tr>
  <tr>
   <td>データセル3行目1列目</td>
   <td>データセル3行目2列目</td>
   <td>データセル3行目3列目</td>
  </tr>
  <tr>
   <td>データセル4行目1列目</td>
   <td>データセル4行目2列目</td>
   <td>データセル4行目3列目</td>
  </tr>
  <tr>
   <td>データセル5行目1列目</td>
   <td>データセル5行目2列目</td>
   <td>データセル5行目3列目</td>
  </tr>
 </tbody>
</table>


※必要に応じて、以下を参考にしてください。

XHTML/CSS・目次 | テーブル(表)・目次

Copyright (C) 2005-2007 http://www.xml.vc/