Table

Easy-to-read data tables.

Overview

You can create an easy-to-read data table by adding the .table class. In this example, the w-100 class is used to set the width to 100%.

  
      Variety Name
      Lineage
      Flower Color
      Flowering Period
    

  
      Yohaku Morning Glory
      Large-flowered
      Bluish purple with white stars
      July - September
    

      Danjuro
      Mutant Morning Glory
      Brownish
      July - August
    

      Kikyo-zaki
      Mutant Morning Glory
      Purple
      July - September
    

Variety Name	Lineage	Flower Color	Flowering Period
Yohaku Morning Glory	Large-flowered	Bluish purple with white stars	July - September
Danjuro	Mutant Morning Glory	Brownish	July - August
Kikyo-zaki	Mutant Morning Glory	Purple	July - September

<table class="table w-100">
  <thead>
    <tr>
      <th>Variety Name</th>
      <th>Lineage</th>
      <th>Flower Color</th>
      <th>Flowering Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Yohaku Morning Glory</td>
      <td>Large-flowered</td>
      <td>Bluish purple with white stars</td>
      <td>July - September</td>
    </tr>
    <tr>
      <td>Danjuro</td>
      <td>Mutant Morning Glory</td>
      <td>Brownish</td>
      <td>July - August</td>
    </tr>
    <tr>
      <td>Kikyo-zaki</td>
      <td>Mutant Morning Glory</td>
      <td>Purple</td>
      <td>July - September</td>
    </tr>
  </tbody>
</table>