acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

tableのborder-collapse、border-spacingを使ったデザイン

ads

2010/3/27 初稿

tableのth、tdに関するborderを指定する方法は2つあります。
border-collapseは隣接するborderを重ねるか離すかを指定します。
collapseを指定すると重ね、1本線に見えます。separateを指定すると離します。
border-spacingはセルの境界線の間隔を指定します。separateの時のみ有効です。
指定は上下左右の一括指定か、左右・上下のセットで指定します。他のショートハンドのような上・左右・下や、上・右・下・左といった指定はできません。

table{
border-collapse:collapse;
border-spacing:0px;
}

table{
border-collapse: separate;
border-spacing:0px;
}

table{
border-collapse: separate;
border-spacing:1px 1px;
}

table td{
border: #333333 1px solid;
background:#FFFFFF;
}

tdセル tdセル
tdセル tdセル
tdセル tdセル
tdセル tdセル
tdセル tdセル
tdセル tdセル

左は隣接するborderを重ねているので1本線に見えます。
中央は隣接するborderを重ねていないので隣接する部分は太く見ます。
右はborderを重ねずborder-spacingで1xp空けたのでセルごとに隙間があります。

このborderが重なる、重ならないを上手く工夫することにより、同じ見た目を違うcssで、より細かなハイライトの付いたデザインに、などいろいろと活用できます。

まずはよく見かける1pxのbordorがついたtableのサンプルです。これには2通りの方法があります。

table{
border-collapse:collapse;
border-spacing:0px;
}

table td{
border: #333333 1px solid;
background:#FFFFFF;
}

table{
background:#333333;
border-collapse: separate;
border-spacing:1px 1px;
}

table td{
background:#FFFFFF;
}

tdセル tdセル
tdセル tdセル
tdセル tdセル
tdセル tdセル

左はborder-collapse:collapse;でborderを重ねる方法です。重なっているのでどの辺も同じ太さになります。
右はborder-collapse: separate;で隣接するセルの間隔を空けtableの背景色を見せることでborderの様に見えるようにしています。セルの色は指定しない限り透明なのでtableの背景色が透けて見えるためthまたはtdのbackgroundを必ず指定する必要があります。

次にセルのborderをハイライトの様に見せるサンプルです。

table{
background:#333333;
border-collapse: separate;
border-spacing:1px 1px;
}
table td{
background:#dbdbdb;
border: #ffffff 1px solid;
}
table{
background:url(table_gradation.png) repeat-x left bottom;
border-collapse: separate;
border-spacing:1px 1px;
}
table td{
background:#dbdbdb;
border-top: #ffffff 1px solid;
border-left: #ffffff 1px solid;
}

tdセル tdセル
tdセル tdセル
tdセル tdセル
tdセル tdセル

border-collapse: separate;の隙間をborderの様に見せているのでtdのborderが自由に使えます。そこで1pxで表示させ、ハイライトのように使うことが可能です。border-collapse:collapse;でborderを重ねるのでこの方法を使うことができません。
tdのborderなので4辺だけでなく2辺や3辺の指定もできます。
セルだけでなくtableのbackgroundにも画像が使えるので右のtableの様にグラデーションのborderを表現することもできます。

tableに関するCSSテクニック

Copyright (C) acky. All Rights Reserved.