ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >HTMLタグ一覧 > テーブル

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

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


属性説明
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列のテーブルでの表示例)

allallall
allallall
allallall
rowsrowsrows
rowsrowsrows
rowsrowsrows
colscolscols
colscolscols
colscolscols
nonenonenone
nonenonenone
nonenonenone

groupsgroupsgroups
groupsgroupsgroups
groupsgroupsgroups
groupsgroupsgroups
groupsgroupsgroups
groupsgroupsgroups

<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>

■ その他の項目

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

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

HTMLタグ
テキスト
イメージ
マーキー
テーブル
リンク
リスト
水平線
フォーム
メタタグ
フレーム
音楽タグ
埋め込みタグ

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.