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