表組（table）のHTMLを改めて再確認します。
表組の表現はexcelでもpowerpointでもよく使われるので、HTMLでの表記はすぐにコピペできるようにしておきたいです。
忘れがちなcaptionも表記します。
実行結果
| 1Q | 2Q | 3Q | 4Q | |
|---|---|---|---|---|
| 月 | 4,5,6 | 7,8,9 | 10,11,12 | 1,2,3 |
| 体感 | 程よい | 暑い | 肌寒い | 寒い |
| 状況 | 心機一転 | 無我夢中 | 追い込み | 混沌 |
<table class="demo_tbl">
<caption>
１年の私
</caption>
<tr>
<td></td>
<th scope="col" >1Q</th>
<th scope="col" >2Q</th>
<th scope="col" >3Q</th>
<th scope="col" >4Q</th>
</tr>
<tr>
<th scope="row">月</th>
<td>4,5,6</td>
<td>7,8,9</td>
<td>10,11,12</td>
<td>1,2,3</td>
</tr>
<tr>
<th scope="row">体感</th>
<td>程よい</td>
<td>暑い</td>
<td>肌寒い</td>
<td>寒い</td>
</tr>
<tr>
<th scope="row">状況</th>
<td>心機一転</td>
<td>無我夢中</td>
<td>追い込み</td>
<td>混沌</td>
</tr>
</table>
位置の指定はCSSでしています。
行の偶数、奇数の色変えも地味に忘れるので記載します。
CSSは入れ子の表記が個人的には好きです。
<style>
table.demo_tbl {
border-collapse: collapse;
letter-spacing: 2px;
caption {
caption-side: bottom;
padding: 10px;
}
th,td {
padding: 10px;
border: 1px solid #FFF;
text-align: center;
}
th {
background-color: #F99;
}
tr:nth-child(even) td {
background-color:#FCC;
}
tr:nth-child(odd) td {
background-color:#FEE;
}
}
</style>
letter-spacingは文字間の間隔の指定です。
細かい調整の際には重宝します。
