[ HTML ] テーブルの縦線または横線のみ表示する ( rules 属性 )

Tweet

Pocket

table タグの rules 属性を指定することによって、テーブル内の内枠の縦線または横線のみを表示したりすることができるようになります。

横線のみ表示するサンプルコード

<table border="1" rules="rows">
  <caption align="top">横線のみ表示</caption>
  <tr>
    <th>ヘッダ１</th>
    <th>ヘッダ２</th>
  </tr>
  <tr>
    <td>セル１</td>
    <td>セル２</td>
  </tr>
  <tr>
    <td>セル４</td>
    <td>セル３</td>
  </tr>
</table>

出力結果（FireFox）

縦線のみ表示するサンプルコード

<table border="1" rules="cols">
  <caption align="top">縦線のみ表示</caption>
  <tr>
    <th>ヘッダ１</th>
    <th>ヘッダ２</th>
  </tr>
  <tr>
    <td>セル１</td>
    <td>セル２</td>
  </tr>
  <tr>
    <td>セル４</td>
    <td>セル３</td>
  </tr>
</table>

出力結果（FireFox）

グループ間の罫線のみ表示するサンプルコード

<table border="1" rules="groups">
  <caption align="top">グループ間の罫線のみ表示</caption>
  <thead>
  <tr>
    <th>ヘッダ１</th>
    <th>ヘッダ２</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <th>フッタ１</th>
    <th>フッタ２</th>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>セル１</td>
    <td>セル２</td>
  </tr>
  <tr>
    <td>セル４</td>
    <td>セル３</td>
  </tr>
  </tbody>
</table>

出力結果（FireFox）

Tweet

Pocket