table要素に rules="" を追加すると、内罫線の表示方法を指定することができます。
<table rules="none"> 〜 </table>
| 属性 | 値 | 説明 |
|---|---|---|
| rules="" | none | 内罫線を表示しない （初期値） |
| rows | 横罫線のみ表示 | |
| cols | 縦罫線のみ表示 | |
| groups | グループ間の罫線のみ表示 | |
| all | 全ての内罫線を表示 |
【border属性との関係】
border属性の値に 1 以上の数値を指定した場合は、同時に rules="all" が指定されたものと解釈されます。ただし、自分でrules属性を指定した場合は、その指定内容が優先されます。
使用例
■none（内罫線を表示しない）を指定した例
<table border="5" rules="none">
<tr>
<td>データセル1-1</td>
<td>データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr>
<td>データセル2-1</td>
<td>データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td>データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>
表示例
| データセル1-1 | データセル1-2 | データセル1-3 |
| データセル2-1 | データセル2-2 | データセル2-3 |
| データセル3-1 | データセル3-2 | データセル3-3 |
■rows（横罫線のみ表示）を指定した例
<table border="5" rules="rows">
<tr>
<td>データセル1-1</td>
<td>データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr>
<td>データセル2-1</td>
<td>データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td>データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>
表示例
| データセル1-1 | データセル1-2 | データセル1-3 |
| データセル2-1 | データセル2-2 | データセル2-3 |
| データセル3-1 | データセル3-2 | データセル3-3 |
■cols（縦罫線のみ表示）を指定した例
<table border="5" rules="cols">
<tr>
<td>データセル1-1</td>
<td>データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr>
<td>データセル2-1</td>
<td>データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td>データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>
表示例
| データセル1-1 | データセル1-2 | データセル1-3 |
| データセル2-1 | データセル2-2 | データセル2-3 |
| データセル3-1 | データセル3-2 | データセル3-3 |
■groups（グループ間の罫線のみ表示）を指定した例
<table border="5" rules="groups">
<thead>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>フッタセル1</td>
<td>フッタセル2</td>
<td>フッタセル3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>データセル1-1</td>
<td>データセル2-1</td>
<td>データセル3-1</td>
</tr>
<tr>
<td>データセル1-2</td>
<td>データセル2-2</td>
<td>データセル3-2</td>
</tr>
<tr>
<td>データセル1-3</td>
<td>データセル2-3</td>
<td>データセル3-3</td>
</tr>
</tbody>
</table>
表示例
| 見出しセル1 | 見出しセル2 | 見出しセル3 |
|---|---|---|
| フッタセル1 | フッタセル2 | フッタセル3 |
| データセル1-1 | データセル2-1 | データセル3-1 |
| データセル1-2 | データセル2-2 | データセル3-2 |
| データセル1-3 | データセル2-3 | データセル3-3 |
■all（全ての内罫線を表示）を指定した例
<table border="5" rules="all">
<tr>
<td>データセル1-1</td>
<td>データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr>
<td>データセル2-1</td>
<td>データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td>データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>
表示例
| データセル1-1 | データセル1-2 | データセル1-3 |
| データセル2-1 | データセル2-2 | データセル2-3 |
| データセル3-1 | データセル3-2 | データセル3-3 |
- サイト内検索
