枠線の表示方法を指定する

テーブルタグに下記の属性を追加すると枠線の表示方法を変えることができます。

属性

説明

frame="表示方法"（IE限定）

テーブルの外側の枠線の表示方法を指定します。
above…上側の枠線だけ表示します。
below…下側の枠線だけ表示します。
lhs…左側の枠線だけ表示します。
rhs…右側の枠線だけ表示します。
hsides…上側の枠線と下側の枠線だけ表示します。
vsides…左側の枠線と右側の枠線だけ表示します。
boxまたはborder…全ての外枠を表示します。
void…全ての外枠を表示しません。

rules="表示方法"（IE限定）

テーブルの内側の枠線の表示方法を指定します。
all…全ての内枠を表示します。
rows …内側の横の枠線だけ表示します。
cols …内側の縦の枠線だけ表示します。
none …全ての内枠を表示しません。
groups …グループ（<thead> <tfoot> <tbody> <colgroup>など）
の境界線だけ表示します。

■ テーブルの外側の枠線の表示方法を指定する

【ブラウザ表示】

1.テーブルの外側の枠線の表示方法を指定します。（1行1列のテーブルでの表示例）

above

below

lhs

rhs

hsides

vsides

boxかborder

void

ソース（aboveのみ、他のソースは省略）

<table border="1" frame="above">
<tr>
<td>above</td>
</tr>
</table>

■ テーブルの内側の枠線の表示方法を指定する

2.テーブルの内側の枠線の表示方法を指定します。（3行3列のテーブルでの表示例）

all	all	all
all	all	all
all	all	all

rows	rows	rows
rows	rows	rows
rows	rows	rows

cols	cols	cols
cols	cols	cols
cols	cols	cols

none	none	none
none	none	none
none	none	none

groups	groups	groups
groups	groups	groups
groups	groups	groups

groups	groups	groups
groups	groups	groups
groups	groups	groups

<table rules="groups">のテーブルのソースだけ載せておきます。

ソース（左）

<table border="1" rules="groups">
<colgroup span="2">
<tr>
<td>groups</td><td>groups</td><td>groups</td>
</tr>
<tr>
<td>groups</td><td>groups</td><td>groups</td>
</tr>
<tr>
<td>groups</td><td>groups</td><td>groups</td>
</tr>
</table>

ソース（右）

<table border="1" rules="groups">
<thead>
<tr>
<td>groups</td><td>groups</td><td>groups</td>
</tr>
</thead>

<tfoot>
<tr>
<td>groups</td><td>groups</td><td>groups</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>groups</td><td>groups</td><td>groups</td>
</tr>
</tbody>
</table>

Follow @hp_master_2003

■ その他の項目

・テーブルを作る
・横幅、高さを指定する
・画像や背景色を指定する
・表示位置を指定する
・テーブルに表題をつける
・間隔、余白を指定する
・セルを結合する
・枠線の色やスタイルを指定する
・行と列をグループ化する
・細い枠線のテーブル
・テーブルを横に並べる
・テーブルで空白を作る

HTMLタグ一覧のページに戻る