tableに、スタイルシートのborderで罫線を引く

こうとしたとき、tdタグもしくはthタグに対して単純に

td, th{
  border: 1px solid black;
}

としても、思うような罫線が引けなかった。つまり、
１．セル間に余白、空白ができる。
２．テーブル内部の罫線だけ太くなる

解決するには、tableに対するスタイルでborder-collapseプロパティを指定する。
table {
border-collapse: collapse;
}

border-collapseのプロパティ値
collapse：隣接するセルのボーダーを重ねて表示する
separate：隣接するセルのボーダーは間隔をあけて表示する
という意味だそうだ。

１．のセル間隔にできる余白は、tableタグの属性にcellspacing=”0″を指定すると余白は無くなるが、各セルで罫線を描画しているため内部の罫線だけ2px幅となり太くなり、テーブルの外枠だけ細くなる。そこで、tableタグにborder-collapse:
collapse;を指定すると罫線が重なりきれいなテーブルができあがる。このとき、tableの属性のcellspacing=”0″は指定しなくてもよい。