2007年07月18日

tableのborderとwidth

今回は、テーブルの表示についてお話します。
cssコーディングと言えど、表を表現する際は、tableを使用します。
(使わない場合もありますが・・・)

ただ、私は、tableを使うと幅の指定など微調整がうまくいかず、
レイアウトが思うようにいかないため、(私だけ?)
tableを使用するのが苦手です。
そんな私を見かねてか、先輩社員がtableについて 教えてくれたことが今回のお題です。


tableの枠線の表示方法には「separate」と「collapse」の2種類あります。
 
separate - defaultの表示で、tableの枠線とtdの枠線が分かれて表示され、
その間にスペース(tableタグのcellspacing属性)が開きます。
(htmlコーディング)
<div class="section">
<table class="sample01">
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
</table>
</div>
(cssサンプル)
.section {
width:500px;
margin-bottom:10px;
background-color:#1D9CC7;
}
table {
width:100%;
margin:20px 0;
background-color:#CCCCCC;
}
table.sample01 {
border:10px solid #000000;
}
table.sample01 td {
border:10px solid #000000;
}
 
collapse - tableの枠線とtdの枠線を重ねて表示します。
(htmlコーディング)
<div class="section">
<table class="sample02">
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
</table>
</div>
(cssサンプル)
.section {
width:500px;
margin-bottom:10px;
background-color:#1D9CC7;
}
table {
width:100%;
margin:20px 0;
background-color:#CCCCCC;
}
table.sample02 {
border:10px solid #000000;
border-collapse: collapse;
}
table.sample02 td {
border:10px solid #000000;
}
 
多くの表の場合は後者の「collapse」を使用した際
の見た目であろうと思いますが、この「collapse」は
少し厄介な仕様になっているようです。

「separate」の場合のwidthはtable全体の幅を指しますが、
「collapse」の場合のwidthはtableの右の枠線の中心から、
左の枠線の中心まで、
今回のサンプルでは枠線の幅を10pxに設定しているため、
表が左右に5pxずつはみ出してしまいます。
(IE、Operaでは、はみ出しません)
 
この対処方法としては、「collapse」を使用せず、
「separate」で、border-spacingを0に設定し、
(IEの場合はtableタグのcellspacing属性を0に設定)
枠線の幅を表示したい幅の半分(今回は5px)
にすることで解決できるように思います。
(htmlコーディング)
<div class="section">
<table class="sample03" cellspacing="0">
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
</table>
</div>
(cssサンプル)
.section {
width:500px;
margin-bottom:10px;
background-color:#1D9CC7;
}
table {
width:100%;
margin:20px 0;
background-color:#CCCCCC;
}
table.sample03 {
border:5px solid #000000;
border-spacing:0;
}
table.sample03 td {
border:5px solid #000000;
}
 
しかし、枠線の幅が、1pxや3pxなど、奇数の場合は
対応できません。


枠線の幅が半分にできないのであれば、
枠線の表示方法を半分?にすれば良いのです。
(htmlコーディング)
<div class="section">
<table class="sample04" cellspacing="0">
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
</table>
</div>
(cssサンプル)
.section {
width:500px;
margin-bottom:10px;
background-color:#1D9CC7;
}
table {
width:100%;
margin:20px 0;
background-color:#CCCCCC;
}
table.sample04 {
border-right:10px solid #000000;
border-bottom:10px solid #000000;
border-spacing:0;/*IEの場合はtableタグにcellspacing="0"を追加*/
}
table.sample04 td {
border-top:10px solid #000000;
border-left:10px solid #000000;
}
このように、tableには下と左の枠線、
各tdには上と右の枠線と役割分担すれば
枠線の幅が、1pxだろうと3pxだろうと
対応することができます。
 
これで、テーブルの枠線と幅については
問題無くなりそうですが、
それでもテーブルは難しいです。

また、何かテーブルについて
私の弱点を克服できれば
ご紹介させていただきます。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 15:31 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。