Sample Tables | カミリオン・カナダ留学センター

カナダ留学ならカミリオン・カナダ留学センター

■ TEXT ALIGNMENT

text is automatically set to align left.

classes: align-left, align-right, align-center

can be applied to the entire row or to specific table cells only.

this entire row is centered add class to the table row
<tr class=”align-center”>
テキストダミー only this cell is centered
<td class=”align-center”>
テキストダミー
this entire row is centered except for this cell
<td class=”align-left”>
Scroll

■ SETTING COLUMN WIDTH

specify column width by setting the width on the column’s table header.

プログラム 期間 英語のレベル
一般英語 1週間〜 初級~上級
English for Communication/一般英語 5週間〜 初級~上級
University College Pathway/パスウェイ 10週間単位 初級~上級
Scroll

■ SET TABLE WIDTH

table is automatically set to fill the entire container (100%).

set table width by adding style to table tag

<table style=”width: ??;”>

タイトルダミー タイトルダミー タイトルダミー タイトルダミー タイトルダミー
テキストダミー テキストダミー テキストダミー テキストダミー テキストダミー
Scroll
タイトルダミー タイトルダミー タイトルダミー
テキストダミー テキストダミー テキストダミー
Scroll

■ MOBILE/SMARTPHONE WIDTH

mobile/smartphone(sp) width cannot be set through inline style.

table width for sp is automatically set to minimum width of 600px.

custom classes can be used to set the table width for mobile:

sp-full, sp-1000, sp-1200, sp-1500

you may add more sp classes to style-table.css

no sp width explicitly set– 600px width

タイトルダミー タイトルダミー タイトルダミー
テキストダミー テキストダミー テキストダミー
Scroll

sp-full – 100% width

タイトルダミー タイトルダミー タイトルダミー
テキストダミー テキストダミー テキストダミー
Scroll

sp-1000– 1000px width

タイトルダミー タイトルダミー タイトルダミー
テキストダミー テキストダミー テキストダミー
Scroll

■ EQUAL WIDTH COLUMNS

columns are automatically set have equal width. to remove this, just add this class:

<table class=”unset-fixed”>

fixed – equal width all columns

1ヶ月 3ヶ月 6ヶ月 9ヶ月
約30~40万円 約78~90万円 約138~156万円 約204~228万円
Scroll

not fixed – 3rd and 4th columns are wider

1ヶ月 3ヶ月 6ヶ月 9ヶ月
約30~40万円 約78~90万円 約138~156万円 約204~228万円
Scroll

■ DIFFERENT COLUMN WIDTHS FOR DESKTOP AND MOBILE

you can set different column width for desktop and mobile view by creating two of the same columnand adding class pc & sp respectively to the table header (th)

this column’s width is 50% for desktop this column’s width is 40% for mobile タイトルダミー タイトルダミー
テキストダミー テキストダミー テキストダミー
Scroll

■ TABLE STYLE 2

add class to table&lgt;table class=”table table–horizontal”>

タイトルダミー テキストダミー
タイトルダミー テキストダミー
タイトルダミー テキストダミー
Scroll

Contact

お問い合わせ

  • お名前
    ※全角

  • フリガナ
    ※全角カタカナ

    セイ

    メイ

  • メールアドレス
    ※半角
  • メールアドレス(確認用)
    ※半角
  • ご職業
  • ご希望の渡航都市
  • ご希望の出発時期

  • お問い合わせ内容
リセット
無料で
相談する
学校に
申し込む