隠居のMT 備忘録：テーブル（表）の形式を工夫してみる

　前回の記事【隠居のMT 備忘録：IE で表示した時に出現する意図しないスペースを削除する】で表の上部に余分なスペースが表示される件については、一応落着しているのであるが、それでも原因が探りたくて、色々と大した知識もない中で思いをめぐらしていた。

　どうやら、先の現象が起きるのは、記事の中のテーブルを頻回に修正・追加しているのが原因ではないかと思われた。それで、〘IE CSS Table〙というようなワードでググってみると、 HTML コードでの <table> に関するプロパティを付け焼刃で学習してきたために、十分把握していなかったことが分かった。今後、HTML CSS にあまり知識のないものが、テーブルをいじるときに注意すべき事項を思いつくまま、備忘録として記録しおきたい。

　

テーブルやセルの枠を表示する線は、それぞれ太さがあり、隣接するセルのボーダーを重ねて表示したり、間隔をあけて表示したりできる。これは、CSS（スタイル・シート）で指定する。
　重ねての表示は、次のようなコードが紹介されている。
```
table  { border-collapse: collapse }
```
また、間隔をあけての表示は、次のように設定するとされている。
```
table {  border-collapse: separate }
```
どうやら、border-collapse を指定しない場合（初期設定）は、separate になっていたようだ。そのために、IE の場合、テーブルを設定し直すたびに、少しずつ sell-space が設定されており、たび重なって大きな空白ができたのではないかと推定される。ど素人のゲスだから、全く的外れかもしれないが。
このような学習をしていると、テーブルの枠やセルの線の太さや色などを指定したり、空白のセルにも枠をつけるためのスタイルを設定する方法が分ってきた。テーブルの枠やセルの線は、今まで特別に意識しない場合デフォールトの設定である solid で通してきたが、好きな線の太さや色を設定する方法も分かった。それで、もう少し自分好みにしたくて、新たにスタイルシートに設定した <table> に関するコードは、次のようなものである。
なお、余談であるが、線の色：#ffcf64 および #48acd0 は私がディスクトップの壁紙として使っているカワセミの写真の腹部および羽の色である。この色コードは、以前から愛用している【ウェブカラークリエイター】というソフトを使って、採取したものである。
```
/* テーブルのセル・ボーダーの表示形式　*/
table
　.waku1
  { border-collapse: separate;
    border: 1px solid #ffcf64; }
 .waku2
  { border-collapse: collapse;
    border: 1px solid #48acd0; }

td { border: 1px solid #48acd0 }  
```

**border-collapse: separate の場合（初期設定）**

**border-collapse: collapse の場合（新しく設定したスタイルシート）**

隠居のMT 備忘録：テーブル（表）の形式を工夫してみる

タグ:

トラックバック

コメントする