Bootstrap - CSS Table


クラス .table の使用例

table タグに class="table" を追加する。

列車名発車行先
やまびこ41号06:04盛岡
つばさ121号06:12新庄
やまびこ201号06:20仙台
はやぶさ1号06:32新青森

<table class="table">
<tr><th>列車名</th><th>発車</th><th>行先</th></tr>
<tr><td>やまびこ41号</td><td>06:04</td><td>盛岡</td></tr>
<tr><td>つばさ121号</td><td>06:12</td><td>新庄</td></tr>
<tr><td>やまびこ201号</td><td>06:20</td><td>仙台</td></tr>
<tr><td>はやぶさ1号</td><td>06:32</td><td>新青森</td></tr>
</table>

1行おきに背景色を変える例

table タグに class="table table-striped" を指定する。

列車名発車行先
やまびこ41号06:04盛岡
つばさ121号06:12新庄
やまびこ201号06:20仙台
はやぶさ1号06:32新青森

<table class="table table-striped">
<tr><th>列車名</th><th>発車</th><th>行先</th></tr>
<tr><td>やまびこ41号</td><td>06:04</td><td>盛岡</td></tr>
<tr><td>つばさ121号</td><td>06:12</td><td>新庄</td></tr>
<tr><td>やまびこ201号</td><td>06:20</td><td>仙台</td></tr>
<tr><td>はやぶさ1号</td><td>06:32</td><td>新青森</td></tr>
</table>

罫線で囲む例

table タグに class="table table-bordered" を指定する。

列車名発車行先
やまびこ41号06:04盛岡
つばさ121号06:12新庄
やまびこ201号06:20仙台
はやぶさ1号06:32新青森

<table class="table table-bordered">
<tr><th>列車名</th><th>発車</th><th>行先</th></tr>
<tr><td>やまびこ41号</td><td>06:04</td><td>盛岡</td></tr>
<tr><td>つばさ121号</td><td>06:12</td><td>新庄</td></tr>
<tr><td>やまびこ201号</td><td>06:20</td><td>仙台</td></tr>
<tr><td>はやぶさ1号</td><td>06:32</td><td>新青森</td></tr>
</table>