MB-Support

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

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


border="1" の単純な表を作成すると、表を取り囲む枠線が装飾されます。 この部分を、スタイルを使って楽しめますが、物理的にノートに定規と鉛筆で表を書いた状態と比べると、違和感を持つかも知れません。


HTMLソース(メモ帳)

<table border="1">
<tr>
<td>ホームズの思い出</td> 
<td>ホームズの事件簿</td>
</tr>
</table>

ブラウザ

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

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


border="1" で作成した表を拡大すると、以下の属性が含まれています。

外枠はborder、cell(セル)と border の間が cellspacing(セルスペーシング)、cell 内から内容の間が cellpadding(セルパディング)となり、table で bgcolor を指定すると、内容領域([ホームズの思い出]や[ホームズの事件簿]などcellに記述した文章)を含めて反映されます。 Border に関しては、bordercolor で色を指定できますが、ellspacing や cellpadding は bgcolor で一括指定となります。



もし、物理的にノートに定規と鉛筆で表を書いた状態にしたければ、cellspacing を 0 にします。これにより、bodercolor を指定すれば、一本の線で形成された表みたいになります。 (以下は枠線に黒を指定しています)


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<table border="1" cellspacing="0" bordercolor="#000000">
<tr>
<td>ホームズの思い出</td> 
<td>ホームズの事件簿</td>
</tr>
</table>
</body>
</html>

ブラウザ

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

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

これを図にしたのが以下。

boder は一本の線にまとまりますが、cell の枠線は borderと隣接する事になります。 この状態でも、Internet Explorer では、意図した雰囲気に見えますが、その他のブラウザではまだ違和感があります。 そこで、スタイルシート style="border-collapse: collapse" で、隣接するセルの枠線を重ねて表示します。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5"
 bordercolor="#000000" style="border-collapse: collapse">
<tr>
<td>ホームズの思い出</td> 
<td>ホームズの事件簿</td>
</tr>
</table>
</body>
</html>

ブラウザ

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

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

これを図にしたのが以下。

表の枠線が見た目では1本( border だけ )になりました。 cellpadding は、枠線と内容領域の間隔を調整できます。セル内に記述した文章のすぐ隣に線があるのが嫌ならば、cellpaddingで枠線と文章との間隔を開けます。

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

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

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




戻る 一覧表示 次へ


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

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