(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)水平方向に結合
↓
結合前
<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 |