MediaTableサンプル

MediaTableを使った例：

表組みの右上に表示されている「Columns」部分をクリックすると、表示する列の選択ができます。

都道府県名 総人口 面積 人口密度 県庁所在地 県の木 県の花 県の鳥 県の歌 地方 団体コード
東京都 約1,327万人 約2,189.km² 約6,000人/km² 新宿区 イチョウ ソメイヨシノ ユリカモメ 東京都歌 関東 13000-1
大阪府 約886万人 約1,899km² 約4,700人/km² 大阪市 イチョウ ウメ、サクラソウ モズ － 近畿 27000-8
愛知県 約743万人 約5,165km² 約1,400人/km² 名古屋市 ハナノキ カキツバタ コノハズク われらが愛知 中部、東海 23000-6
北海道 約544万人 約83,457km² 約65人/km² 札幌市 エゾマツ、アカエゾマツ ハマナス タンチョウ 北海道民のうた 北海道 01000-6
福岡県 約509万人 約4,979km² 約1,000人/km² 福岡市 ツツジ ウメ ウグイス 希望の光 九州 40000-9

各列には、以下のようなclass属性を付加してあります。

テーブルの列が自動選択されるポイントは、1024pxと、768px です。
描画領域の横幅が 1024px未満になると、essential と optional のみが表示されるようになり、
描画領域の横幅が 768px未満になると、essential のみが表示されるようになります。
persist を指定した項目は常に表示され、列の選択肢には表示されません。

MediaTableを使わない表示：

都道府県名 総人口 面積 人口密度 県庁所在地 県の木 県の花 県の鳥 県の歌 地方 団体コード
東京都 約1,327万人 約2,189.km² 約6,000人/km² 新宿区 イチョウ ソメイヨシノ ユリカモメ 東京都歌 関東 13000-1
大阪府 約886万人 約1,899km² 約4,700人/km² 大阪市 イチョウ ウメ、サクラソウ モズ － 近畿 27000-8
愛知県 約743万人 約5,165km² 約1,400人/km² 名古屋市 ハナノキ カキツバタ コノハズク われらが愛知 中部、東海 23000-6
北海道 約544万人 約83,457km² 約65人/km² 札幌市 エゾマツ、アカエゾマツ ハマナス タンチョウ 北海道民のうた 北海道 01000-6
福岡県 約509万人 約4,979km² 約1,000人/km² 福岡市 ツツジ ウメ ウグイス 希望の光 九州 40000-9

記事に戻る