1. Home
  2. HTMLタグ
  3. テーブルタグ
  4. 外枠の表示方法を指定する

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


<table frame=""></table>


table要素frame="" を追加すると、外枠の表示方法を指定することができます。



<table frame="void"></table>


属性 説明
frame="" void 外枠を表示しない (初期値)
lhs 左の外枠のみ表示
rhs 右の外枠のみ表示
vsides 左右の外枠のみ表示
above 上の外枠のみ表示
below 下の外枠のみ表示
hsides 上下の外枠のみ表示
box 全ての外枠を表示
border 全ての外枠を表示

【border属性との関係】

border属性の値に 1 以上の数値を指定した場合は、同時に frame="border" が指定されたものと解釈されます。ただし、自分でframe属性を指定した場合は、その指定内容が優先されます。


使用例

■void(外枠を表示しない)を指定した例


<table border="5" frame="void">
<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>
</table>

表示例

データセル1-1 データセル1-2 データセル1-3
データセル2-1 データセル2-2 データセル2-3

■vsides(左右の外枠のみ表示)を指定した例


<table border="5" frame="vsides">
<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>
</table>

表示例

データセル1-1 データセル1-2 データセル1-3
データセル2-1 データセル2-2 データセル2-3

■hsides(上下の外枠のみ表示)を指定した例


<table border="5" frame="hsides">
<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>
</table>

表示例

データセル1-1 データセル1-2 データセル1-3
データセル2-1 データセル2-2 データセル2-3

■box(全ての外枠を表示)を指定した例


<table border="5" frame="box">
<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>
</table>

表示例

データセル1-1 データセル1-2 データセル1-3
データセル2-1 データセル2-2 データセル2-3

テーブルタグ

ページの先頭へ