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

●セルにパディングを指定する

 HTML仕様では table要素に cellpadding属性を使って、セル枠とセル内容領域の間隔を指定します。使える値はピクセル(px)、またはパーセント(%)の単位が付いた数値です。CSSでは同様の効果として、paddingプロパティを使います。

【サンプル】

見出しセル 見出しセル 見出しセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル

【CSS】↓

div {
 text-align: center;
 margin-top: 3%;
 margin-bottom: 5%;
}
table {
 margin: auto;
}
th, td {
 font-size: 0.9em;
 padding: 0.6em;
}
th {
 background: #ff0000;
}
td {
 background: #008080;
}

【解説】↓

 直接、関係のある書式は th, td { padding: 0.6em; } です。セル(cell)にパディングを設けると文字が見やすくなります。ここでは見出しセル(th)とデータセル(td)の上下左右に同じ 0.6emのパディングを指定しています。もちろん、セル内の上下左右にそれぞれ違うパディングを指定することもできます。(関連ページ参照)一部の古いブラウザによっては反映されないバグはありますが、あまり気にする必要はないでしょう。なお、表関係の要素で paddingを指定できるのは th, tdのセル要素だけです。colgroup、col、thead、tfoot、tbody、tr要素には指定できません。table要素への指定はマッキントッシュ版IE5、Nスケープ6以上のブラウザなどで有効です。caption要素に対しては、Win IE(Ver.6.0)、Nスケープ(Ver.7.1)のブラウザで確認できました。また、ここではエム(em)の単位を使っていますが、CSSで使えるそのほかの単位も使えます。


【HTML】↓

<div>
<table border="1">
 <tbody>
  <tr>
   <th>見出しセル</th>
   <th>見出しセル</th>
   <th>見出しセル</th>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
 </tbody>
</table>
</div>

■関連ページ

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

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