第14回 その他、使わないほうがよい要素・属性（2）

　XHTML 1.0 TransitionalとFramesetはもとより、XHTML 1.0 StrictとXHTML 1.1でも、実は見栄えに関する要素・属性がいくつか残されている。これらは非推奨要素・属性と異なり、文書型定義で正式に認められているものの、見栄えに要素・属性であることに変わりはない（いわばグレーゾーンに属する要素・属性である）。前回の「使わないほうがよい要素」に引き続き、今回では「使わないほうがよい属性」の代替方法を見ていく。

1. （table要素）width、border、frame、rules、cellspacing、cellpadding属性

　table要素のwidth属性は、CSSのwidthプロパティで代替する。border属性はborderプロパティで代替するが、あくまでtable要素の外枠のみのコントロールであるため、セルそれぞれの枠線については別途th要素とtd要素に対してborderプロパティを適用する。

　table要素とセル、セル同士の重なり合う枠線の表示方法に関しては、border-collapseプロパティで「separate」（分離）または「collapse」（結合）を指定しておこう。なお、border-collapseプロパティの規定値は、CSS2では「collapse」だが、CSS2.1では「separate」に変更されている（「separate」を規定値として採用しているモダンブラウザが多いので、その現実に合わせた変更といえる）。

[修正前]
<table summary="参照元一覧。1列目がタイトル、2列目がURL。"
 width="80%" border="1">

[修正後]
table {
  width: 80%;
  border: 1px solid gray;
  border-collapse: collapse;
  }
th, td {
  border: 1px solid gray;
  }
  :
  :
<table summary="参照元一覧。1列目がタイトル、2列目がURL。">

　次に、frame属性とrules属性であるが、実務的にそれほど利用する機会はなく、あまり見慣れていないという人も多いだろう。frame属性は「table要素の外枠の表示形式」、rules属性は「行と列の線の引き方」の指定である。

　frame属性に代えて、border-top、border-right、border-bottom、border-leftの各プロパティを利用することで、外枠の表示方向が指定できる。一方、rules属性は、thead、tfoot、tbody、colgroup、col、trの各要素にborder関連プロパティを指定することで代替できる。

[修正前]
<table summary="参照元一覧。1列目がタイトル、2列目がURL。"
 frame="hsides" rules="groups">

[修正後]
table {
  width: 80%;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  border-collapse: collapse;
  }
thead, tbody, tfoot {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  }
  :
  :
<table summary="参照元一覧。1列目がタイトル、2列目がURL。">

　最後に、cellspacing属性（セル間の間隔）はborder-spacingプロパティで、cellpadding属性（セル内の余白）はth要素とtd要素にpaddingプロパティを指定することで代替する。

　なお、border-spacingプロパティは、border-collapseプロパティで「separate」が指定されているのが前提である。なぜなら「collapse」の場合、セル間の間隔はそもそも存在しないからである。

[修正前]
<table summary="参照元一覧。1列目がタイトル、2列目がURL。"
 cellspacing="2" cellpadding="5">

[修正後]
table {
  width: 80%;
  border: 1px solid gray
  border-collapse: separate;
  border-spacing: 2px;
  }
th, td {
  border: 1px solid gray;
  padding: 5px;
  }
  :
  :
<table summary="参照元一覧。1列目がタイトル、2列目がURL。">

2. （td、td要素）align、valign属性

　td要素とth要素のalign属性は、CSSのtext-alignプロパティで代替する。また、valign属性は、vertical-alignプロパティで代替する。

[修正前]
<th align="center" valign="top">テキスト</th>

[修正後]
th {
  text-align: center;
  vertical-align: top;
  }
 :
 :
<th>テキスト</ht>

使わないほうがよい属性まとめ

　最後に、今回説明した「使わないほうがよい属性」の代替方法をまとめておこう。