border-collapse - 「セルの枠線（ボーダー）の表示の仕方を指定する」

　border-collapseプロパティは、隣接するセルの枠線（ボーダー）を重ねて表示するか（collapse）、間隔をあけて表示するか（separate）を指定します。

重ねて表示する（collapse）の表示例

A1	B1	C1
A2	B2	C2
A3	B3	C3

間隔をあけて表示する（separate）の表示例

A1	B1	C1
A2	B2	C2
A3	B3	C3

重ねて表示する（collapse）の CSS


table {
	border-collapse: collapse;
}

td {
	border: 1px solid #000000;
}

間隔をあけて表示する（separate）の CSS


table {
	border-collapse: separate;
}

td {
	border: 1px solid #000000;
}

ここで使った表（テーブル）の HTML


<table>
	<tbody>
		<tr>
			<td>A1</td>
			<td>B1</td>
			<td>C1</td>
		</tr>
		<tr>
			<td>A2</td>
			<td>B2</td>
			<td>C2</td>
		</tr>
		<tr>
			<td>A3</td>
			<td>B3</td>
			<td>C3</td>
		</tr>
	</tbody>
</table>

　この border-collapseプロパティは、あくまでも枠線（ボーダー）の表示方法の設定のみで、border-collapseプロパティを指定しただけでは、見た目ではほぼ変わりませんのでご注意ください。

{border-collapse: collapse;} のみ設定した場合

A1	B1	C1
A2	B2	C2
A3	B3	C3

{border-collapse: separate;} のみ設定した場合

A1	B1	C1
A2	B2	C2
A3	B3	C3

　そのため、最初の表示例でも borderプロパティを使って枠線（ボーダー）を表示しています。

　次に注意したいのが、borderプロパティを入れる場所です。ここの表示例では、border-collapseプロパティを指定した際に、枠線（ボーダー）がどのように入るのか見やすくするために、table要素に対しては border-collapseプロパティのみを指定し、td要素に対して borderプロパティを指定しています。

重ねて表示する（collapse）の CSS


table {
	border-collapse: collapse;
}

td {
	border: 1px solid #000000;
}

間隔をあけて表示する（separate）の CSS


table {
	border-collapse: separate;
}

td {
	border: 1px solid #000000;
}

　もちろん、table要素に対して、borderプロパティを指定することもできます。

重ねて表示する（collapse）の CSS


table {
	border-collapse: collapse;
	border: 1px solid #000000;
}

間隔をあけて表示する（separate）の CSS


table {
	border-collapse: separate;
	border: 1px solid #000000;
}

table要素に borderプロパティを指定した場合の collapse

A1	B1	C1
A2	B2	C2
A3	B3	C3

table要素に borderプロパティを指定した場合の separate

A1	B1	C1
A2	B2	C2
A3	B3	C3

　このように、表（テーブル）の外枠に対して枠線（ボーダー）が表示されます。

　では、両方、table要素と td要素のどっちにも borderプロパティを指定した場合はどうなるでしょうか？

重ねて表示する（collapse）の CSS


table {
	border-collapse: collapse;
	border: 1px solid #000000;
}

td {
	border: 1px solid #000000;
}

間隔をあけて表示する（separate）の CSS


table {
	border-collapse: separate;
	border: 1px solid #000000;
}

td {
	border: 1px solid #000000;
}

table要素と td要素の両方に borderプロパティを指定した場合の collapse

A1	B1	C1
A2	B2	C2
A3	B3	C3

table要素と td要素の両方に borderプロパティを指定した場合の separate

A1	B1	C1
A2	B2	C2
A3	B3	C3

　border-collapseプロパティで、collapse を指定した場合は、枠線（ボーダー）を重ねて表示するため、見た目にはあまり変わりがなさそうですが、separate を指定した場合は、

と、４種類のデザインを楽しめそうです。用途に応じて使い分けてみてください。