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

●表のセルに枠線を表示させる

表のタイトル
見出しセル1列目 見出しセル2列目
データセル1行目1列目 データセル1行目2列目
データセル2行目1列目
データセル3行目1列目
データセル4行目2列目

 上の表は、データセル2行目2列目、データセル3行目2列目、データセル4行目1列目の各セル内容を空にしたところです。このようにセルにデータを入力しないと枠線が表示されません。これを解消するには empty-cells プロパティを使い、 show の値を使うことになっています。


【CSS】

table {
 background: #008080;
 empty-cells: show;
}
th, td {
 font-size: 1em;
}

 しかし、一番肝心の Win IE で枠線が表示されないのでは解説しても意味がありません。(マッキントッシュ版 IE も・・・)これを一発で解決させる方法があります。全角スペースか半角スペースを空のセルに入れると枠線が表示されるようになります。下の表は半角スペース( )を入れて枠線を表示させています。


表のタイトル
見出しセル1列目 見出しセル2列目
データセル1行目1列目 データセル1行目2列目
データセル2行目1列目  
データセル3行目1列目  
  データセル4行目2列目

【HTML】

<div>
<table border="枠線の太さ">
 <caption>表のタイトル</caption>
 <tbody>
  <tr>
   <th>見出しセル1列目</th>
   <th>見出しセル2列目</th>
  </tr>
  <tr>
   <td>データセル1行目1列目</td>
   <td>データセル1行目2列目</td>
  </tr>
  <tr>
   <td>データセル2行目1列目</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>データセル3行目1列目</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>データセル4行目2列目</td>
  </tr>
 </tbody>
</table>
</div>


※枠線を表示させない hide というキーワードもありますが、筆者の環境(Nスケープ(Ver.7.1)のブラウザを利用)では確認できないので割愛します。

(参考まで)

table {
 background: #008080;
 empty-cells: hide
}

 なお、表の枠線を表示させない方法として、HTMLファイルにおいて、<table border="0">と border(線の幅)の値を0に指定しても良いでしょう。表の背景色を付けなければ表全体が透明になります。


※参考ページ

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

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