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

公開日:2014年2月22日
(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