MB-Support

パソコン初心者のサポートページ

表(テーブル)の外枠 frame、above、below、hSides、lhs、rhs、void、vSides


table(テーブル)の外枠の種類を frame(フレーム)属性で変更できます。 まずサンプルとして利用するテーブルは以下。外枠の違いを容易に把握するため、border="2" としています(ボーダーの太さ)。 また、セル内の内容領域との外の間隔を指定する cellpadding="5" を設定してあります。


HTMLソース(メモ帳)

<table border="2" cellpadding="5" bordercolor="#000">
<tr>
<td>ホームズの思い出</td> 
<td>ホームズの事件簿</td>
</tr>
<tr>
<td>ホームズの思い出</td> 
<td>ホームズの事件簿</td>
</tr>
</table>

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする


プロパティ:frame

frame="値"

値:above の上外枠のみ

HTMLソース(メモ帳)

<table border="2" cellpadding="5" bordercolor="#000" frame="above">
<tr>
<td>ホームズの思い出</td> 
<td>ホームズの事件簿</td>
</tr>
<tr>
<td>ホームズの思い出</td> 
<td>ホームズの事件簿</td>
</tr>
</table>

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする


値:below 下の外枠のみ

HTMLソース(メモ帳)

<table border="2" cellpadding="5" bordercolor="#000" frame="below">
<tr>
〜省略〜

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする


値:hSides 上下の外枠のみ

HTMLソース(メモ帳)

<table border="2" cellpadding="5" bordercolor="#000" frame="hSides">
<tr>
〜省略〜

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする


値:lhs 左の外枠のみ

HTMLソース(メモ帳)

<table border="2" cellpadding="5" bordercolor="#000" frame="lhs">
<tr>
〜省略〜

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする


値:rhs 右の外枠のみ

HTMLソース(メモ帳)

<table border="2" cellpadding="5" bordercolor="#000" frame="rhs">
<tr>
〜省略〜

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする


値:void 外枠なし

HTMLソース(メモ帳)

<table border="2" cellpadding="5" bordercolor="#000" frame="void">
<tr>
〜省略〜

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする


値:vSides 左右の外枠のみ

HTMLソース(メモ帳)

<table border="2" cellpadding="5" bordercolor="#000" frame="vSides">
<tr>
〜省略〜

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする


例: cellspacing="0" style="border-collapse: collapse"

HTMLソース(メモ帳)

<table border="2" cellpadding="5" bordercolor="#000"
 frame="void" cellspacing="0" style="border-collapse: collapse">
<tr>
<td>ホームズの思い出</td> 
<td>ホームズの事件簿</td>
</tr>
<tr>
<td>ホームズの思い出</td> 
<td>ホームズの事件簿</td>
</tr>
</table>

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする

テーブルの枠線いろいろ border、cellspacing、cellpadding

表(テーブル)の背景色を指定する方法 table bgcolor

表(テーブル)のセルとセルの間隔を指定する方法 cellspacing

表(テーブル)のセル内の間隔を指定する方法 cellpadding




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項