Top > HP作成> 隠居のMT 備忘録:テーブル(表)の形式を工夫してみる

2012年3月 4日

隠居の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 の場合(初期設定)
collapse_2.JPG


border-collapse: collapse の場合(新しく設定したスタイルシート)
collapse_3.JPG


トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/2472

トラックバック

» 隠居のMT備忘録: テーブル作成時に上部に発生する意図しないスペースを削除する(IEの場合) from Atelier
 2,012年3月に、【隠居のMT 備忘録:IE で表示した時に出現する意図し... 続きを読む

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)