[CSS・HTML]　テーブルのHTMLとCSSのメモ

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

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

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

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

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

[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>
[/html]

T CAPTION
T HEAD 項目タイトルなど
T FOOT 合計を表示するセルがあるときに
T BODY 内容セル
(4)水平方向に結合
セル1 セル2
セル3 セル4

↓

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

[html]
<table>
<thead>
<tr>
<th>セル1</th>
<th>セル2</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</tbody>
</table>
[/html]
↓

結合コード

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

(5)垂直方向に結合
ヘッダ 項目タイトル
セル1 セル2
セル3 セル4

↓

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

[html]
<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>
[/html]
↓

結合コード

[html highlight=”9,10,11,12″]
<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>
[/html]

(6)その他

[html]
<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>
[/html]

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

 

[html]
<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>
[/html]

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