HTML 表組（table）を作成する。

HTMLで表組（table）を表示するときのサンプルです。

表組（table）のHTMLを改めて再確認します。

表組の表現はexcelでもpowerpointでもよく使われるので、HTMLでの表記はすぐにコピペできるようにしておきたいです。

忘れがちなcaptionも表記します。

実行結果

１年の私
	1Q	2Q	3Q	4Q
月	4,5,6	7,8,9	10,11,12	1,2,3
体感	程よい	暑い	肌寒い	寒い
状況	心機一転	無我夢中	追い込み	混沌

HTMLはこちら

<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は文字間の間隔の指定です。

細かい調整の際には重宝します。