MB-Support

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

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

 テーブルを使いボーダー(枠線)を表示すると、通常ではテーブルの外側の枠線と、セルの枠線の 2 つの線が表示されます。これを1つの線ですっきりさせるには、cellspacing を使います。


外側の枠線と内側の枠線、またはセルとセルとの間隔(下の赤の枠線)を指定するには <table> 内に


cellspacing="数字"

を挿入します。


cellspacing に 0 を指定すると、事実上、枠線が 1 本になります。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" cellspacing="0">
  <tr>
   <th>ホームズの思い出</th> <th>ホームズの事件簿</th> <th>最後のあいさつ</th>
  </tr>
  <tr>
   <td>1.白銀号事件</td> <td>1.高名の依頼人</td> <td>1.ウィステリア荘</td>
  </tr>
 </table> </body> </html>

ブラウザ


 cellspacing="5"

 cellspacing="10"

 cellspacing="20"


参考

bgcolor="#000000" で、テーブルの背景色を黒に指定して、bgcolor="#ffffff" で、各セルの背景色を白に設定すれば、cellspacing="数字" で指定した部分に色を塗れます。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="0" cellspacing="20" bgcolor="#000000">
  <tr bgcolor="#ffffff">
   <th>ホームズの思い出</th> <th>ホームズの事件簿</th> <th>最後のあいさつ</th>
  </tr>
  <tr bgcolor="#ffffff">
   <td>1.白銀号事件</td> <td>1.高名の依頼人</td> <td>1.ウィステリア荘</td>
  </tr>
 </table> </body> </html>

ブラウザ

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

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


cellspacing は、テーブルやセルの border とは違います。テーブルの border の太さを指定して ( border="20" ) 、さらに赤を指定すると ( bordercolor="#ff0000" )、以下の様になります。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="20" bordercolor="#ff0000"
 cellspacing="20" bgcolor="#000000">
  <tr bgcolor="#ffffff">
   <th>ホームズの思い出</th> <th>ホームズの事件簿</th> <th>最後のあいさつ </th>
  </tr>
  <tr bgcolor="#ffffff">
   <td>1.白銀号事件</td> <td>1.高名の依頼人</td> <td>1.ウィステリア荘</td>
  </tr>
 </table> </body> </html>

ブラウザ

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

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




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

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

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