border属性 - 境界線の太さ　（廃止） → <table> の境界線の有無

■ 概要

項　　目説　　明
記述形式 border = "1"，　border = ""
値 の形式 "1"，または，""（空）
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa?+
適用可能な要素
（種　　類）		 <table>　（固有属性）
継　　承 しない

■ 解説

border属性は，HTML4.01 まで は，

img 要素，object 要素，table 要素 などで，
「境界線の太さ」を指定する属性として，使用されておりました。

HTML5 では，見栄えに関する指定として この指定内容は廃止 になりました。

しかし，table要素については，表（テーブル）の境界線の表示／非表示を指定する という 別の機能をもつ属性として残されることになりました 。

したがって，指定できる値も "1" と ""（空）のみです。　なお，境界線の太さを指定したい場合には，CSS の borderプロパティによる指定を使います。 （下記例を参照。）

ちなみに，HTML5 では，表（テーブル）をレイアウト目的に使用することは認められていません ので，通常，枠線なしの表を使用する場面はほとんどないものと思われます。

■ 使用例（ CSS による境界線の太さ指定の例）

W3C の 4月28日版ドラフト に示されている例をそのまま引用しておきます。


HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!--
  table { border-collapse: collapse; border: solid thick; }
  colgroup, tbody { border: solid medium; }
  td { border: solid thin; height: 1.4em; width: 1.4em;
       text-align: center; padding: 0; }
-->
</style>
HTML
<body> ～ </body>		 
<article>
 <h1>今日の数独</h1>
 <table>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <tbody>
   <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
   <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
   <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
  <tbody>
   <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
   <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
   <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
  <tbody>
   <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
   <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
   <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
 </table>
</article>

ブラウザー 表示例

今日の数独

1 3 6 4 7 9
2 9 1
7 6
2 4 3 9 8
5 9 7 1
6 5 2
7
9 8 2 5

■ 備考

上の「CSS による境界線の太さ指定の例」のマークアップを見て驚いた人もいるでしょう。　</colgroup>，</tbody>，</tr>，</td> などの要素の終了を示すタグがすべて省略されているからです。　しかし，これでも W3C が認める正しい書法なのです。　その理由は，

  • tr要素の子要素としては td要素 と th要素 しか置けないので，次の td要素 が現れると自動的に </td> や </th> が挿入されます。
  • tbody要素の子要素としては tr要素 しか置けないので，次の tr要素 が現れると自動的に </tr> が挿入されます。　またその際，必要に応じてその直前に </td> や </th> が挿入されます。
  • この表で使われている要素の中で，tbody要素以後に table要素の子として置くことができるのは，tbody要素 と tr要素 なので，次の tbody要素 が現れると自動的に </tbody> が挿入されます。　またその際，必要に応じてその直前に </tr>，さらには， </td> や </th> が挿入されます。
  • 同じ理由で，tbody要素以後に </table> タグが現れると自動的に </tbody> が挿入されます。　またその際，必要に応じてその直前に </tr>，さらには， </td> や </th> が挿入されます。

ということです。

ただし，要素の終了を示すタグはむやみに省略してよいわけではなく，このような仕組みを十分に理解せずに省略をすると，構造がわかりにくいマークアップになりミスの原因にもなりかねません。　初心者の場合は，終了タグもできるだけしっかりと記入するようにした方が HTML の文法の理解も進むと思われます。


【参考ページ】