古い記事を見直してたら あ、、表がおかしい…
っで、スタイルシートを確認したところ、テーブルのスタイルが変なことに気づきました。

綺麗にまとめられたテーブル表は、訪れたユーザー様にとって情報の伝わり方が確実に上がると思います。なので早速修正にかかりました。
特に最近スマホユーザーが多くなってきました、スマホの画面で表示した際に テーブルがはみ出したり見づらい事もあったので、Candystyleにレスポンシブ対応のテーブルタグをエディタに追加いたしました。

 

少しテーブルタグの簡単な使い方を説明しておきます。

まず、ビジュアルエディタからテーブルのクイックタグをクリックします。すると以下の画像のようになるはずです。

 

右の青い部分で単純に2×3のセルを選択して、適当に打ち込んだのが以下のようになります。

 

なお、セルに色を付ける場合は、以下の画像のように 色を付けたい部分を左クリックで選択しセルのプロパティを開きます。

 

そして、セルのプロパティから「詳細」という項目を選択し、背景色のボタンをクリック。

 

するとcolorピッカーが出てきますので、ここで色を選択してOKボタンをクリックします。

 

OKを押すと詳細に戻るので、ここでもOKをクリックします。

 

以下の画像のように、左側の選択した部分に色を付けた事が分かると思います。

 

行の追加をする場合は、行の項目から簡単に出来ます。

 

ちなみに、列の追加の場合はここで出来ます。

では列を追加していきます。上記の画像のように列の項目から列を挿入してください。
すこしランクとか打ち込んでますが、以下の画像のようになるはずです。

 

 

では続いて、行を上に挿入してみましょう。行の項目から「行を上に挿入」を選択してみます。

 

 

結果上に行が増えたのが分かると思います、ちなみにセルを統合する場合ですが、以下の画像のように上のセルを左クリックで選択し、セルの項目から「セルの統合」を選択します。

 

少し解りやすいように 色を付けましたが、上のセルが一つになってるのが分かると思います。

 

これで今回作成したテーブルがこちらの画像のようになります。「パソコン表示」

 

スマホ表示の場合はこちらのようになります。

 

なお自分でも装飾やスマホのスタイル等を変更したい場合は、以下のサイトが分かりやすかったので、ぜひ参考にしてみてください。
参考記事CSSだけでレスポンシブなテーブルデザイン3種

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でCandystyleをフォローしよう!