<TABLE rules="">テーブル内の枠線の表示形式

<TABLE>のタグにrules属性を指定すると、セルを区切る線のうち、どの線を表示させるか指定できます。

指定できる値はnone(罫線なし)、groups(thead、tfoot、tbody、colgroup、col要素の境界のみ)、rows(横列の境界のみ)、cols(縦列の境界のみ)、all(すべての境界)のいずれかとなっています。

またrules属性は非推奨ではありませんが、見栄えにに関する設定は可能であればスタイルシートを利用した方が良いでしょう。 スタイルシートを利用する場合は、border-collapse:collapse;とborderプロパティを使う事で同様の表示にできます。

使用した時の例

<table border="2" rules="none">
  <tr>
     <th>見出し1</th><th>見出し2</th><th>見出し3</th>
  </tr>
  <tr>
     <td>データ1</td><td>データ2</td><td>データ3</td>
  </tr>
  <tr>
     <td>データ4</td><td>データ5</td><td>データ6</td>
  </tr>
</table>

<table border="2" rules="groups">
  <tr>
     <th>見出し1</th><th>見出し2</th><th>見出し3</th>
  </tr>
  <tr>
     <td>データ1</td><td>データ2</td><td>データ3</td>
  </tr>
  <tr>
     <td>データ4</td><td>データ5</td><td>データ6</td>
  </tr>
</table>

<table border="2" rules="rows">
  <tr>
     <th>見出し1</th><th>見出し2</th><th>見出し3</th>
  </tr>
  <tr>
     <td>データ1</td><td>データ2</td><td>データ3</td>
  </tr>
  <tr>
     <td>データ4</td><td>データ5</td><td>データ6</td>
  </tr>
</table>

<table border="2" rules="cols">
  <tr>
     <th>見出し1</th><th>見出し2</th><th>見出し3</th>
  </tr>
  <tr>
     <td>データ1</td><td>データ2</td><td>データ3</td>
  </tr>
  <tr>
     <td>データ4</td><td>データ5</td><td>データ6</td>
  </tr>
</table>

<table border="2" rules="all">
  <tr>
     <th>見出し1</th><th>見出し2</th><th>見出し3</th>
  </tr>
  <tr>
     <td>データ1</td><td>データ2</td><td>データ3</td>
  </tr>
  <tr>
     <td>データ4</td><td>データ5</td><td>データ6</td>
  </tr>
</table>

ブラウザ上の表示例

none(なし)

見出し1見出し2見出し3
データ1データ2データ3
データ4データ5データ6

groups(グループの境界)

見出し1見出し2見出し3
データ1データ2データ3
データ4データ5データ6

rows(横の列の境界)

見出し1見出し2見出し3
データ1データ2データ3
データ4データ5データ6

cols(縦の列の境界)

見出し1見出し2見出し3
データ1データ2データ3
データ4データ5データ6

all(すべての境界)

見出し1見出し2見出し3
データ1データ2データ3
データ4データ5データ6

属性

rules="none" テーブル内側の枠線の表示設定
  • none・・・・なし(初期値)
  • groups・・・・グループの境界(<thead>、<tbody>、<tfoot>、<colgroup>、<col>)
  • rows・・・・横の列の境界
  • cols・・・・縦の列の境界
  • all・・・・すべての境界

対応ブラウザなどのデータ

形式 <TABLE rules="">~</TABLE> 分類 ブロックレベル要素
開始タグ 必須 終了タグ 必須

HTML5での状況と関連情報

HTML5では、rules属性は廃止。