table_002
製 品 | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. |
---|---|---|---|---|---|
型 番 | DPS-01234 | DPS-05678 | DPS-09012 | DPS-3456 | DPS-07890 |
当店価格 | ¥19,800 ¥15,800 |
¥19,800 ¥16,800 |
¥19,800 ¥17,800 |
¥19,800 ¥18,800 |
¥29,800 ¥19,800 |
メーカー希望小売価格 | ¥19,800 | ¥19,800 | ¥19,800 | ¥19,800 | ¥19,800 |
サイズ | 100×110×120cm | 100×110×120cm | 100×110×120cm | 100×110×120cm | 100×110×120cm |
仕様1 | - | ○ (仕様詳細) |
○ (仕様詳細) |
○ | ○ (仕様詳細) |
仕様2 | - | ○ (仕様詳細) |
○ (仕様詳細) |
- | ○ (仕様詳細) |
仕様3 | ○ (仕様詳細) |
- | - | ○ (仕様詳細) |
- |
table_002a
製 品 | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. |
---|---|---|---|---|---|
型 番 | DPS-01234 | DPS-05678 | DPS-09012 | DPS-3456 | DPS-07890 |
当店価格 | ¥19,800 ¥15,800 |
¥19,800 ¥16,800 |
¥19,800 ¥17,800 |
¥19,800 ¥18,800 |
¥29,800 ¥19,800 |
メーカー希望小売価格 | ¥19,800 | ¥19,800 | ¥19,800 | ¥19,800 | ¥19,800 |
サイズ | 100×110×120cm | 100×110×120cm | 100×110×120cm | 100×110×120cm | 100×110×120cm |
仕様1 | - | ○ (仕様詳細) |
○ (仕様詳細) |
○ | ○ (仕様詳細) |
仕様2 | - | ○ (仕様詳細) |
○ (仕様詳細) |
- | ○ (仕様詳細) |
仕様3 | ○ (仕様詳細) |
- | - | ○ (仕様詳細) |
- |
default
製 品 | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. | 10 THOUGHTS BEHIND BiND. |
型 番 | DPS-01234 | DPS-05678 | DPS-09012 | DPS-3456 | DPS-07890 |
当店価格 | ¥19,800 ¥15,800 |
¥19,800 ¥16,800 |
¥19,800 ¥17,800 |
¥19,800 ¥18,800 |
¥29,800 ¥19,800 |
メーカー希望小売価格 | ¥19,800 | ¥19,800 | ¥19,800 | ¥19,800 | ¥19,800 |
サイズ | 100×110×120cm | 100×110×120cm | 100×110×120cm | 100×110×120cm | 100×110×120cm |
仕様1 | - | ○ |
○ |
○ | ○ (仕様詳細) |
仕様2 | - | ○ |
○ |
- | ○ (仕様詳細) |
仕様3 | ○ (仕様詳細) |
- |
- |
○ (仕様詳細) |
- |
tableタグで表を作るときのスマホ対策。表部分にだけ横スクロールバーができてページ全体には影響しません。
横に2つ並びの場合にはリストのテーブル形式(table_001)の方が直接ブロックエディタ上で文字編集ができるので更新はやりやすいと思いますが、3つ以上の項目が横に並ぶ表を作りたい時には<table>で表を作る事になります。
BiNDで表・テーブルを作るにはパーツ一覧にある「表・テーブル」からテーブルエディタを開きテーブルのテンプレートを選択するというやり方になります。それからテーブルエディタで表の内容を変更して作って行きますが、このテーブルエディタが使いにくく、セル(td)ごとに幅や罫線、文字サイズなどを指定しているという信じられないようなソースで作成されます。
個々のセル(th,td)の設定をなしにして、CSSでth,tdの色や位置を指定しています。defaultの表に近い装飾にするため行(tr)に対して背景色の指定をしています。
そして、tableに対して横スクロールが表示されるようにCSSで処理をしているため、連続する半角英数字で改行されないような表の時でもページ全体に影響しません。
table_002a
1行ごとに色が色がつくように設定したシンプルな装飾の表。
default
表・テーブルから「製品比較表」を選んだままの状態がこちらです。文字サイズが7ptと設定されているようで文字がかなり小さい印象です。文字を大きく(14px)してみると表が大きくなってくるためスマホでは画面幅に収まらなくなりページに対して横スクロールがでてしまいます。
参考)table_002b
th,td などに対して指定できない個別の行やセルに対する指定はテーブルエディタで直接指定することになります。style="color: #fe0000;" や style="background-color: #ebebeb;" のようにtr,th,tdタグに設定するか、<span>タグで指定することになります。