>>2.一般ページを作る >>A.ページ設定
表(テーブル)の挿入[PE004]   
  



2.一般ページを作る → A.ページ設定 → ページ編集

表(テーブル)の挿入方法です。料金表など、表を作りたいときに使用します。
それ以外に、レイアウトの目的として、文字や画像をきれいに縦や横に並べたいときや、幅を指定してその範囲内で文字を並べたいときも、表(テーブル)を使います。


■表(テーブル)の挿入


スマホで「観やすく」でできること



スマホで「観やすく」でできること(2025/2/19 追加)

「スマホの表で列単位で縦展開」






 表(テーブル)のスマートフォンでの表示(追記・クリック) 2013/6/1

【1】表を挿入したい場所にカーソルを合わせます。

【2】「テーブル挿入/編集」ボタンをクリックします。

「テーブルプロパティ」が表示されます。

【3】挿入する表の設定をします。

・行数、列数を設定します。
  →行と列、セルについて
・テーブル幅を設定します

テーブル幅は、その表の幅です。

テーブルの高さは、セットしないで下さい。
パソコン、スマホで高さは、自由に拡張しないと正しい表示ができません

!注意!
テーブル幅は、セルの内容によって大きくなります。
ここで設定した幅より小さくはなりませんが、中身が大きいとテーブルも大きくなります。
たとえば、セル内の余白、セルとセルの間隔や、テーブルの中に挿入された画像等のサイズにより、ここで設定した幅より大きくなる場合があります。
表が大きすぎると、サイトのメインのエリアからはみ出て、メニューと重なって表示されてしまう等、見栄えが悪くなることがあります。

ページ全体の幅は、現状(2020年現在)1200pxが、お勧めです。
ということは、全体が1200px、左にメニューはある場合は、
左メニュー=220pxぐらい
1200-220=980ですが、余裕ををもって900pxがベターです。

ゆえにメインエリアでのテーブルの幅は、900pxにします。

・表示位置を設定します

表の位置です。表の中に入れる文字や画像等は、この設定で中央揃え等にはなりません。


設定できましたら、「OK」ボタンを押して、挿入完了です。



■スマートフォンでの表(テーブルの扱い)

・PC用に「大きな表」を作成した時、スマートフォンで「どうしても自動縮小できない」時があります。
・そんな場合、「フリックスタイル」は、スマホにフリック(指操作で移動)エリアを作成し、その中に「表」をセットします。
・PCと同様の大きさを「指操作」で移動させて観ていただけます。

・テーブル作成時(作成後でも変更OK)に「フリックスタイル」を選択して下さい。





【フリックスタイル使用時の注意点】

作成時の「表の幅」をパーセントで作成した時
表の中の文字が少ないと、フリックエリアで「寸詰まり」(文字が縦に表示される)ことがあります。
「フリックスタイル」を選択する表は、パソコンで表示する表示幅(例えば、900px等)を設定して下さい。
スマホのフリックエリアでも 900pxで表示されます。


スマホで「表」の表示が縦展開可能です。

・有効にするには、
(1)基本情報 → A 一般・お店共通設定 → スマホで「表」を縦に展開して表示

・2016/6/1以降にご契約のサイトは、原則「スマホで表を縦に表示」とします。
「スマホで表を縦に展開して表示」の変更は、管理会社に連絡して下さい。

縦展開に設定の場合、
「フリックスタイル」にセットしない表は、以下のサンプルの通り、パソコンで列(横へ表示)をスマホでは、行(縦に表示)します。
この対応は、テーブルをセットした編集画面の登録時点でシステムが自動生成いたします。
2016年以前に編集したデータは、関係ございません。
以前の編集データは、スマホでは「表の幅を縮めて」表示します。

なお、「フリックスタイル」は、2013/6/1から稼働しており、以前にセット済みの「フリックスタイル」も問題なく作動いたします。

この変更は、時代と共にパソコンのワイドモニター化に伴い、スマホ表示の最適化対策でございます。
attomaのメインシステムも「幅=1200px」での最適化に対応済みです。


【2列のサンプル(パソコン)】




【2列のサンプル(スマホ)】

一般ページ、商品の詳細説明等、「表」の設定登録・変更時にそのページ単位に作動します。
スマホへの自動切り替えは、モニター幅:768pxより小さい場合です。

【画像と説明文をセットする時の注意点】

スマホで表を縦展開する時に 画像と説明文をセットするには1つのセル内にセットします。
下の左画像にサンプル設定があります(画像をクリック)、右は、フリックスタイルのサンプル




スマホでの画像表示
パソコン用に大きな画像(800px)を幅=300pxで表示しているような場合
スマホ表示ではMAX=800px までを上限として100%で表示します。

会社概要等の表は、タイトル項目に背景色をセット(下の画像をクリック)




【バリエーション】
「フリックスタイル」の他、パソコン用とスマホ用を別々に作成できます。
パソコン用とスマホ用を別々に作成するには、編集画面の「特殊設定挿入」 を使用します。

【ページ内容】
< PCは非表示START> 【ページ内容】 <PCは非表示END>

各【ページ内容】にパソコン、スマホの内容をセットして下さい。

別々に作成するサンプルは、下の画像をクリック






■表の詳細設定

・テーブル高さ

テーブル高さは、表の高さです。
こちらも、テーブル幅と同様、テーブルの中身によって高さは自動で変更されます。
通常は、テーブルの高さを設定する必要はありません。

・枠線(ピクセル)

テーブルの一番外枠の線の太さです。

・セルとセルの間隔

セルの外側の間隔、セル同士の距離です。

・セル内余白

セルの内側の余白、セルとその中身の距離です。

・表題

表のタイトルです。

・表示スタイル

スマートフォンでの表示設定です。

デフォルトでは、表を縮小して表示しているので、表の構成によっては大きくレイアウトが崩れたり、見づらくなってしまうことがありますが、「フリックスタイル」を選択すると、表を元のサイズで表示します。


■行と列、セルについて

表は、右図のように「行」と「列」で構成されています。

右の表は、行が4つ、列が5つなので、4行5列の表です。

また、ひとつのマス目を「セル」といいます。


1

▲ページトップへ