<table rules="セルの表示形式">〜</table>
セルの表示形式‥‥‥none(なし、デフォルト) rows(横列の境界のみ)
cols(縦列の境界のみ) all(すべての境界)
groups(thead要素、tbody要素、tfoot要素、colgroup要素、col要素の境界のみ)
| 要素名 | 属性名 | 説明 | 非推奨 | 必須属性 |
|---|---|---|---|---|
| table | 表 | |||
| summary | 表の概要 | |||
| width | 表の幅 | |||
| border | 外枠線の太さ | |||
| frame | 外枠の表示形式 | |||
| rules | セルを区切る線の表示形式 | |||
| cellspacing | セルの間隔 | |||
| cellpadding | セルの枠と内容の間隔 | |||
| align | 表示位置 | 非推奨 | ||
| bgcolor | 背景色 | 非推奨 | ||
| class | クラス名 | |||
| id | ＩＤ名 | |||
| title | 補足情報 | |||
| style | スタイルシート | |||
| lang | 言語コード | |||
| dir | 文字表記の方向 |
table要素のrules属性は、セルを区切る線のうち、どの線を表示させるかを設定します。
Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<base href="http://www.abcd.com/efg/index.html">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="制作者名">
<meta name="description" content="内容の紹介">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,・・・">
<link rel="start" href="start.html">
<link rel="index" href="index.html">
<title>表のセルの表示形式を設定。</title>
</head>
<body>
<table rules="none" bordercolor="red" border="1">
<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 rules="rows" bordercolor="red" border="1">
<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 rules="cols" bordercolor="red" border="1">
<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 rules="all" bordercolor="red" border="1">
<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 rules="groups" bordercolor="red" border="1">
<thead><tr><th>ヘッダー</th><th>ヘッダー</th><th>ヘッダー</th></tr></thead>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
</table>
<table rules="groups" bordercolor="red" border="1">
<colgroup span="2"></colgroup>
<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>
</body>
</html>
<html lang="ja">
<head>
<base href="http://www.abcd.com/efg/index.html">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="制作者名">
<meta name="description" content="内容の紹介">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,・・・">
<link rel="start" href="start.html">
<link rel="index" href="index.html">
<title>表のセルの表示形式を設定。</title>
</head>
<body>
<table rules="none" bordercolor="red" border="1">
<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 rules="rows" bordercolor="red" border="1">
<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 rules="cols" bordercolor="red" border="1">
<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 rules="all" bordercolor="red" border="1">
<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 rules="groups" bordercolor="red" border="1">
<thead><tr><th>ヘッダー</th><th>ヘッダー</th><th>ヘッダー</th></tr></thead>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
</table>
<table rules="groups" bordercolor="red" border="1">
<colgroup span="2"></colgroup>
<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>
</body>
</html>
Internet Explorer8での表示例
