(1)ボーダーとボーダーの隣接部分の余白

table {
border-collapse: collapse;　/*余白なし（隣接したボーダー同士を重ねて表示）*/
}
table {
border-collapse: separate; /*余白あり*/
border-spacing: 5px; /*余白幅指定*/
} 

(2)空白のセルのボーダー

td {
empty-cells: show; /*空白セルのボーダーを表示*/
}
td {
empty-cells: hide; /*空白セルのボーダーを非表示*/
} 

---

(3)テーブルの正式なHTML

<table>
<caption>T CAPTION</caption>

<thead>
<tr>
<th>T HEAD</th>
<th>項目タイトルなど</th>
</tr>
</thead>

<tfoot>
<tr>
<th>T FOOT</th>
<td>合計を表示するセルがあるときなどに</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>T BODY</td>
<td>内容セル</td>
</tr>
</tbody>

</table>

T CAPTION

T HEAD	項目タイトルなど
T FOOT	合計を表示するセルがあるときに
T BODY	内容セル

---

(4)水平方向に結合

セル1	セル2
セル3	セル4

↓

水平方向の結合（セル1,セル2）
セル3	セル4

結合前

<table>
<thead>
<tr>
<th>セル1</th>
<th>セル2</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</tbody>
</table>

↓

結合コード

<table>
<thead>
<tr>
<th colspan="2">水平方向の結合（セル1,セル2）</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</tbody>
</table>

---

(5)垂直方向に結合

ヘッダ	項目タイトル
セル1	セル2
セル3	セル4

↓

ヘッダ	項目タイトル
垂直方向の結合（セル1）	セル2
	セル3
	セル4

結合前

<table>
<thead>
<tr>
<th>ヘッダ</th>
<th>項目タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</tbody>
</table>

↓

結合コード

<table>
<thead>
<tr>
<th>ヘッダ</th>
<th>項目タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">垂直方向の結合（セル1）</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
</tr>
<tr>
<td>セル4</td>
</tr>
</tbody>
</table>

(6)その他

<table>
<thead>
<tr>
<th>ヘッダ</th>
<th>項目タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">垂直方向の結合（セル1）</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
</tr>
<tr>
<td colspan="2">セル4</td>
</tr>
</tbody>
</table>

ヘッダ	項目タイトル
垂直方向の結合（セル1）	セル2
	セル3
セル4

 

<table>
<thead>
<tr>
<th>ヘッダ</th>
<th>項目タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">垂直方向の結合（セル1）</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
</tr>
<tr>
<td>セル4</td>
<td>セル5</td>
</tr>
</tbody>
</table>

ヘッダ	項目タイトル
垂直方向の結合（セル1）	セル2
	セル3
セル4	セル5