テーブル

概要

見やすいデータテーブルは.tableクラスを追加することで使用できます。この例では.w-100クラスを使用して横幅を100%にします。

品種名系統花色開花期
曜白朝顔大輪系青紫に白い星7月〜9月
団十郎変化朝顔茶褐色7月〜8月
桔梗咲変化朝顔紫7月〜9月
html 
<table class="table w-100">
    <thead>
    <tr>
        <th>品種名</th>
        <th>系統</th>
        <th>花色</th>
        <th>開花期</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>曜白朝顔</td>
        <td>大輪系</td>
        <td>青紫に白い星</td>
        <td>7月〜9月</td>
    </tr>
    <tr>
        <td>団十郎</td>
        <td>変化朝顔</td>
        <td>茶褐色</td>
        <td>7月〜8月</td>
    </tr>
    <tr>
        <td>桔梗咲</td>
        <td>変化朝顔</td>
        <td>紫</td>
        <td>7月〜9月</td>
    </tr>
    </tbody>
</table>