テーブル
基本のテーブルスタイル
| 姓 | 名 | ユーザ名 | |
|---|---|---|---|
| 1 | 佐藤 | 太郎 | satou |
| 2 | 鈴木 | 凛 | rin_suzu |
| 3 | 高橋 | かおり | sakura |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<table> <thead> <tr> <th></th> <th>姓</th> <th>名</th> <th>ユーザ名</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>佐藤</td> <td>太郎</td> <td>satou</td> </tr> <tr> <th scope="row">2</th> <td>鈴木</td> <td>凛</td> <td>rin_suzu</td> </tr> <tr> <th scope="row">3</th> <td>高橋</td> <td>かおり</td> <td>sakura</td> </tr> </tbody> </table> |
レスポンシブテーブル
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
行のストライプ表示
| 姓 | 名 | ユーザ名 | |
|---|---|---|---|
| 1 | 佐藤 | 太郎 | satou |
| 2 | 鈴木 | 凛 | rin_suzu |
| 3 | 高橋 | かおり | sakura |
境界線のあるテーブル
| 姓 | 名 | ユーザ名 | |
|---|---|---|---|
| 1 | 佐藤 | 太郎 | satou |
| 2 | 鈴木 | 凛 | rin_suzu |
| 3 | 高橋 | かおり | sakura |
hoverテーブル
| 姓 | 名 | ユーザ名 | |
|---|---|---|---|
| 1 | 佐藤 | 太郎 | satou |
| 2 | 鈴木 | 凛 | rin_suzu |
| 3 | 高橋 | かおり | sakura |
縦の狭いテーブル
| 姓 | 名 | ユーザ名 | |
|---|---|---|---|
| 1 | 佐藤 | 太郎 | satou |
| 2 | 鈴木 | 凛 | rin_suzu |
| 3 | 高橋 | かおり | sakura |
テーブルの行やセルの背景色
| 姓 | 名 | ユーザ名 | |
|---|---|---|---|
| 1 | 佐藤 | 太郎 | satou |
| 2 | 鈴木 | 凛 | rin_suzu |
| 3 | 高橋 | かおり | sakura |
各クラスの対応色は下記の通りです。
| .active | .success | .info | .warning | .danger |
