境界線付き Bordered table
table要素のclass属性にtable-borderedを追加することで、境界線付きの表を作れる。
サンプル
| 順位 | 名前 | 惑星 | 勝点 |
|---|---|---|---|
| 1 | ブルーＳＣ | 地球 | 101 |
| 2 | ＦＣウェヌス | 金星 | 83 |
| 3 | ジュピターＦＣ | 木星 | 68 |
| 4 | ＳＣマーキュリー | 水星 | 67 |
| 5 | ＦＣマルス | 火星 | 65 |
ソースコード
<table class="table table-bordered">
<thead>
<tr>
<th>順位</th>
<th>名前</th>
<th>惑星</th>
<th>勝点</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>ブルーＳＣ</td>
<td>地球</td>
<td>101</td>
</tr>
<tr>
<th>2</th>
<td>ＦＣウェヌス</td>
<td>金星</td>
<td>83</td>
</tr>
<tr>
<th>3</th>
<td>ジュピターＦＣ</td>
<td>木星</td>
<td>68</td>
</tr>
<tr>
<th>4</th>
<td>ＳＣマーキュリー</td>
<td>水星</td>
<td>67</td>
</tr>
<tr>
<th>5</th>
<td>ＦＣマルス</td>
<td>火星</td>
<td>65</td>
</tr>
</tbody>
</table>