Table

Overview

A readable data table can be used by adding the .table class. In this example, the .w-100 class is used to make the width 100%.

VarietyStrainFlower ColorBlooming Season
Youhaku Morning GloryLarge-flowered strainBluish-purple with white starJuly to September
DanjuroSpecial morning gloryBrownish-redJuly to August
KikyozakiSpecial morning gloryPurpleJuly to September
html 
<table class="table w-100">
    <thead>
    <tr>
        <th>Variety</th>
        <th>Strain</th>
        <th>Flower Color</th>
        <th>Blooming Season</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Youhaku Morning Glory</td>
        <td>Large-flowered strain</td>
        <td>Bluish-purple with white star</td>
        <td>July to September</td>
    </tr>
    <tr>
        <td>Danjuro</td>
        <td>Special morning glory</td>
        <td>Brownish-red</td>
        <td>July to August</td>
    </tr>
    <tr>
        <td>Kikyozaki</td>
        <td>Special morning glory</td>
        <td>Purple</td>
        <td>July to September</td>
    </tr>
    </tbody>
</table>