テーブル

概要

見やすいデータテーブルは.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>