表(table)

属性を持つリスト(例えば名前⇒アドレス帳、商品名⇒価格表)を表示させるときに便利な機能が表です。標準では、横軸に属性(名前、住所、電話番号など)縦軸にリストメンバーを並べるのが一般的です。WEBでは、スマートフォンなどを意識して、属性の多すぎるものは、表で表現するのが難しいものも出てくるでしょう。

 

属性が多い場合の例

レンタカー料金表

  6時間まで 12時間まで 24時間まで 以降1日
(24時間)ごと
超過料金
通常料金 5,400円
(5,000円)
5,400円
(5,000円)
7,020円
(6,500円)
5,940円
(5,500円)
1,080円/時
(1,000円/時)
ハイシーズン料金
2017年8月1日~8月20日
6,480円
(6,000円)
6,480円
(6,000円)
8,424円
(7,800円)
7,128円
(6,600円)
1,296円/時
(1,200円/時)

例えば上記のように見えづらくなってしまう場合には、通常料金と、ハイシーズン料金を別々の表で表現したり、延長料金を別表示させることで、見やすくなったりします。

通常料金とハイシーズン料金を分けた例

通常料金

6時間まで 12時間まで 24時間まで 以降1日ごと 超過料金
5,400円
(5,000円)
5,400円
(5,000円)
7,020円
(6,500円)
5,940円
(5,500円)
1,080円/時
(1,000円/時)

ハイシーズン料金(2017年8月1日~8月20日)

6時間まで 12時間まで 24時間まで 以降1日ごと 超過料金
6,480円
(6,000円)
6,480円
(6,000円)
8,424円
(7,800円)
7,128円
(6,600円)
1,296円/時
(1,200円/時)

延長料金を分けた場合

24時間まで

  6時間まで 12時間まで 24時間まで
通常料金 5,400円
(5,000円)
5,400円
(5,000円)
7,020円
(6,500円)
ハイシーズン料金
2017年8月1日~8月20日
6,480円
(6,000円)
6,480円
(6,000円)
8,424円
(7,800円)

延長料金

  超過料金(1時間ごと) 延長料金(24時間ごと)
通常料金 1,080円/時
(1,000円/時)
5,940円
(5,500円)
ハイシーズン料金
2017年8月1日~8月20日
1,296円/時
(1,200円/時)
7,128円
(6,600円)

表を作るには

表を入れたい場所にマウスポインタ―を合わせ[コンテンツを追加]をクリック。[その他のコンテンツ&アドオン]をクリックしてメニューを展開し、「表」をクリックします。

表の編集

表のコンテンツを追加すると、デフォルト状態では横に2つ、縦に2つの表が現れます。上段には「セル1」「セル2」と書かれています。このセルの中をクリックして、文字を打ち変えます。

※Jimdo の表コンテンツ内に画像をアップロードすることはできません。表に入力できるのは文字列だけです

アイコンの説明

①選択中の行の、上に行が挿入されます。

②選択中の行の、下に行が挿入されます。

③選択中の行が削除されます。

④選択中の列の、左側に列が挿入されます。

⑤選択中の列の、右側に列が挿入されます。

⑥選択中の列が削除されます。

⑦複数のセルを選択し、結合できます。

⑧結合したセルを元に戻します。

⑨表のプロパティを開きます。(外枠の罫線の色や太さを編集できます。)

⑩セルのプロパティを開きます。(選択中のセルの罫線や背景色を編集できます。)

⑪文字を太字にします。

⑫文字を斜体にします。

⑬文字にリンクをつけます。

 

⑭リンクを外します。

⑮作業をひとつ戻ります。

⑯作業をやり直します。

⑰~⑳文字をセルの中で左そろえ/真ん中合わせ/右そろえ/両端にします。

㉑番号つきリストにします。

㉒番号なしリストにします。

㉓インデントをつけます。

㉔インデントを外します。

㉕文字の色を変えます。

㉖表のHTML(ソースコード)を表示します。直接ソースコードを編集することが出来ます。


注意:
※Jimdoの表(テーブル)は標準では、tdのみが使用されていて、thを作ることが出来ません。thを作る場合にはHTML編集が必要になります。

表の幅や高さを調整したい

⑩のアイコンをクリックしてセルのプロパティを開くと、幅と高さを編集することが出来ます。

幅指定をすると、スマホ表示の際に表示に障害が発生する可能性がありますので、あまりおススメできません。幅の調整はCSSを使用して%で行うとよい結果が出るでしょう。

※Jimdo研究所では表のデザインやカスタマイズも受け付けています。スマホに対応した表の作成で悩んだらご相談ください。お見積りさせていただきます。


株式会社 PIK

〒140-0015 東京都品川区西大井1-14-4

TEL.03-5728-9888