表の挿入

表１

CSSの修飾無し

センター名 ゲーム数 アベレージ
ロードボウル 30 158.0
イーグルボウル 6 135.5

表２

見出しセル「th」の背景色を黄色に前景色を赤に設定 　th{color : red; background-color : yellow;}

その他のセル「td」の背景色を水色に設定 　td{background-color : aqua;}

「td」の1列目にクラスをつけ背景色を黄色に設定 　 .midasi{background-color : yellow;}

センター名 ゲーム数 アベレージ
ロードボウル 30 158.0
イーグルボウル 6 135.5

表3

表の幅を500pxに、マージンを自動（中央揃え）に、表示方法を固定に、内枠線の表示方法を重ねに、１列目の幅を200pXに設定した。

CSSソース

th{
color : red;
background-color : yellow;
}
td{
background-color : aqua;
}
.midasi{
background-color : yellow;
}
table{
margin-left : auto;
margin-right : auto;
width : 500px;
border-collapse : collapse;
caption-side : top;
table-layout : fixed;
empty-cells : show;
}
.haba{
width : 200px;
}

HTMLソース

<table border="1">
<caption>FUMINGのボウリングアベレージ</caption>
<tr>
<th class="haba">センター名</th>
<th>ゲーム数</th>
<th>アベレージ</th>
</tr><tr>
<td class="midasi">ロードボウル</td>
<td>30</td>
<td>158.0</td>
</tr><tr>
<td class="midasi">イーグルボウル</td>
<td> 6</td>
<td>135.5</td>
</tr>
</table>
FUMINGのボウリングアベレージ
センター名 ゲーム数 アベレージ
ロードボウル 30 158.0
イーグルボウル 6 135.5

表4

見出しセル(th)について、パディングを「8px」に、 「ボーダー」を「5px、実線、白」に、その他のセル(td)については同様に、パディングを「8px」に、 「ボーダー」を「5px、実線、白」に設定した上で、「右揃え」に設定し、第1列目のセル(クラスをmidasiにしたセル)を「左揃え」に、caption」下方向のマージンを「10px」に設定した。

CSSソース

th{
color : red;
background-color : yellow;
padding : 8px;border : 5px solid white;
}
td{
background-color : aqua;
text-align : right;padding : 8px;border : 5px solid white;
}
.midasi{
background-color : yellow;
text-align : left;
}
table{
margin-left : auto;
margin-right : auto;
width : 500px;
border-collapse : collapse;
caption-side : top;
table-layout : fixed;
empty-cells : show;
}
.haba{
width : 200px;
}
caption{
margin-bottom : 10px;
}

HTMLソース

<table border="1">
<caption>FUMINGのボウリングアベレージ</caption>
<tr>
<th class="haba">センター名</th>
<th>ゲーム数</th>
<th>アベレージ</th>
</tr><tr>
<td class="midasi">ロードボウル</td>
<td>30</td>
<td>158.0</td>
</tr><tr>
<td class="midasi">イーグルボウル</td>
<td> 6</td>
<td>135.5</td>
</tr>

</table>
FUMINGのボウリングアベレージ
センター名 ゲーム数 アベレージ
ロードボウル 30 158.0
イーグルボウル 6 135.5

戻る