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だろうと
対応することができます。

 

これで、テーブルの枠線と幅については
問題無くなりそうですが、
それでもテーブルは難しいです。

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

Page Top