Bootstrap：Tables

Base CSS

Typography

Emphasis classes

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>


Description

<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>


  • dl要素に「class="dl-horizontal"」を追加
<dl class="dl-horizontal">


Tables
  • 「thead」「tbody」の記述が必須
<table>
<thead>
<tr><th>曜日</th><th>訪問者数</th></tr>
</thead>
<tbody>
<tr><td>月</td><td>3100</td></tr>
<tr><td>火</td><td>2800</td></tr>
<tr><td>水</td><td>3000</td></tr>
<tr><td>木</td><td>2400</td></tr>
<tr><td>金</td><td>2200</td></tr>
</tbody>
</table>
  • table要素に「class="table"」を追加

  • tableクラスに「table-striped」を追加
<table class="table table-striped">

  • tableクラスに「table-bordered」を追加
<table class="table table-striped table-bordered">

  • tableクラスに「table-condensed」を追加
<table class="table table-striped table-bordered table-condensed">

Forms
  • 「thead」「tbody」の記述が必須
<table>
<thead>
<tr><th>曜日</th><th>訪問者数</th></tr>
</thead>
<tbody>
<tr><td>月</td><td>3100</td></tr>
<tr><td>火</td><td>2800</td></tr>
<tr><td>水</td><td>3000</td></tr>
<tr><td>木</td><td>2400</td></tr>
<tr><td>金</td><td>2200</td></tr>
</tbody>
</table>
  • table要素に「class="table"」を追加

  • tableクラスに「table-striped」を追加
<table class="table table-striped">

  • tableクラスに「table-bordered」を追加
<table class="table table-striped table-bordered">

  • tableクラスに「table-condensed」を追加
<table class="table table-striped table-bordered table-condensed">