テーブル 基本
2021-06-02
参考サイト:https://webst8.com/blog/bootstrap4-table-howto/
基本のtable
| ライトコース | 26時間のライトコースです |
| スタンダードコース | 48時間のスタンダードコースです |
| プロフェッショナルコース | 80時間のプロフェッショナルコースです |
| マンツーマンレッスン | 単発の完全マンツーマンレッスンです |
| 出張研修・コンサルティング | お客様先で行う出張研修・コンサルティングです |
|
1 2 3 4 5 6 7 |
<table class="table"> <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr> <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr> <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr> <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr> <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr> </table> |
「table」クラスに「table-striped」クラスをつけるとストライプになる
| ライトコース | 26時間のライトコースです |
| スタンダードコース | 48時間のスタンダードコースです |
| プロフェッショナルコース | 80時間のプロフェッショナルコースです |
| マンツーマンレッスン | 単発の完全マンツーマンレッスンです |
| 出張研修・コンサルティング | お客様先で行う出張研修・コンサルティングです |
|
1 2 3 4 5 6 7 |
<table class="table table-striped"> <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr> <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr> <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr> <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr> <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr> </table> |
「table」クラスに「table-bordered」クラスをつけるとセルの全てに枠線
| ライトコース | 26時間のライトコースです |
| スタンダードコース | 48時間のスタンダードコースです |
| プロフェッショナルコース | 80時間のプロフェッショナルコースです |
| マンツーマンレッスン | 単発の完全マンツーマンレッスンです |
| 出張研修・コンサルティング | お客様先で行う出張研修・コンサルティングです |
|
1 2 3 4 5 6 7 |
<table class="table table-bordered"> <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr> <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr> <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr> <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr> <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr> </table> |
「table」クラスに「table-hover」クラスをつけるとマウスオーバーでハイライト
| ライトコース | 26時間のライトコースです |
| スタンダードコース | 48時間のスタンダードコースです |
| プロフェッショナルコース | 80時間のプロフェッショナルコースです |
| マンツーマンレッスン | 単発の完全マンツーマンレッスンです |
| 出張研修・コンサルティング | お客様先で行う出張研修・コンサルティングです |
|
1 2 3 4 5 6 7 |
<table class="table table-hover"> <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr> <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr> <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr> <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr> <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr> </table> |
「table」クラスに「table-sm」クラスをつけると行間が狭くなる
| ライトコース | 26時間のライトコースです |
| スタンダードコース | 48時間のスタンダードコースです |
| プロフェッショナルコース | 80時間のプロフェッショナルコースです |
| マンツーマンレッスン | 単発の完全マンツーマンレッスンです |
| 出張研修・コンサルティング | お客様先で行う出張研修・コンサルティングです |
|
1 2 3 4 5 6 7 |
<table class="table table-sm"> <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr> <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr> <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr> <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr> <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr> </table> |
