Webサイトでの簡単なテーブル(表)の作成について


 

サイトやブログで表を書きたい場合ってあると思うのですが、HTMLで書き書きするのって結構面倒ですよね

ワードプレスの場合、TinyMCE Advanced とか TablePress なんかのプラグインを使うと簡単に書けるので便利です

今回はサイトで表、つまりテーブルを書くための知ってると楽で簡単なあれそれについて….

 

table

 

〜〜項目〜〜〜〜〜〜〜

❤︎1、ワードプレスの場合
*1-1,ナチュラルテーブル ( TinyMCE Advanced )
*1-2,幅の設定色の設定など

❤︎2、Fc2の場合

❤︎3、基本はコレ

〜〜〜〜〜〜〜〜〜〜〜〜

 

スポンサーリンク

 

 

❤︎1、ワードプレスの場合

プラグインはTablePressが有名ですが、今回は TinyMCE Advanced というエディター機能拡張プラグインの一部を使ってサラリと書く方法を書いておきます

TablePressはかなり優れているプラグインですが、TinyMCE Advanced もかなり高機能なので
いつも同じテーブルを毎回表示したいとか、列数がかなり多いなどの場合以外は.TinyMCE Advancedで十分だと思うし、分かりやすい

逆にいつも同じテーブルを表示したいとか、何パタンか作っておいてページによって表示仕分けしたいなどの、一括管理はTablePressが便利(インポート、エクスポートもできる)

 

ってことでTinyMCE Advanced かま〜ん

 

プラグインをインストールして有効にする

tinymce-advance-min

 

 

設定画面で必要なものをドラッグする
テーブルは下記のタブなので事前に準備しておく

tinymce-advance-setting-min

 

もうこれだけで単純なテーブルなら普通に感覚でかけちゃう

tinymce-advance-sonyuw-min

 

 

微調整したい場合も、左右の幅や、セル内の余白の設定などがわかれば簡単

 

 

*1-1,ナチュラルテーブル

例;左右の余白1%、左右の長さはサイト幅合わせ
1、2行目の文字は左合わせ、3行目はセンター合わせ、4行目は右合わせにしてみました

ハニーフラッシュ いやん❤︎ おやつやんないわよ  パタリロ 合唱
たのもう まいれ ちこうよれ  チェリー 合掌
うっとり❤︎ ルパン コブラ  ラムちゃん 学校
負けそう ルチ将軍 知能指数1,300  メグちゃん 脱腸

 

このサイトでは黒くて見づらいですが、通常のサイトでの表示は下図のようになる

table-rei-min

 

デフォからカスタマイズしていきます

テーブルの頭に下記のような左右の幅を指定してしまうとスッキリ収まりやすい
( 幅は width ) 

(borderは枠、 widthは幅 )

<table border="1" width="100%">

表の幅を100%に合わせておけば、無理な数の列であったり大きな画像があったりとかでなければ、スマホでも左右の幅に収まる

 

もちろんテキスト編集画面で書き込んでいけますが、このプラグインで下図のように、表のプロパティ詳細設定で幅を設定しておく方が分かりやすいと思う

 

先頭の行全部選択>tableタブ>表のプロパティ>詳細の、幅を100%にしておく

tabele-haba-100

 

 

続いてセルの余白設定,,,,,
セルの左右の余白を1%とる場合は、( 余白は padding )

padding-left: 1%; padding-right: 1%; 

これを設定しない場合は、例えば左合わせの文字にした場合、左が枠線ぴったりに来すぎて見づらい

なので、少しだけ余白をつけた方がいいので、1%余白にしました

右合わせでも同じことが言える

だから左右1%の余白設定w

 

これも、このプラグインで設定できる
tableタブ>セルのプロパティ>詳細>スタイルで書き込める
対象のセルを一括選択してから指定すると一気にできる

cell-no-padding

 

つまり、

テーブルプロパティセルのプロパティで設定
テーブルを選択して、テーブルタブをクリックするとイロイロカスタマズできる項目が出てくる

 

項目へ戻る▲

 

 

*1-2,幅の設定や色の設定など

例;セルごとに幅を設定したい場合は、%で設定すると楽(pxでも指定できる)
左右の余白1%、左寄せ、幅は26%,16%,26%,20%,12%、にしたい場合、

ハニーフラッシュ いやん❤︎ おやつやんないわよ  パタリロ 合唱
たのもう まいれ ちこうよれ  チェリー 合掌
うっとり❤︎ ルパン コブラ  ラムちゃん 学校
負けそう ルチ将軍 知能指数1,300  メグちゃん 脱腸

 

通常のサイトではこんな感じ ↓

table_6-min

 

 

幅はwidthで設定なので、

padding-left: 1%; padding-right: 1%; border-color: #919090; width: 26%;

 

プラグインだと、
tableタブ>セルのプロパティ>幅で設定
この時、調整したいセルごとに選択して設定してく(左右合計100%になるように→一列無記載とかでもOK)

cell-no-width

 

 

 

セルに色をつけるのも簡単

ハニーフラッシュ いやん❤︎ おやつやんないわよ  パタリロ 合唱
たのもう まいれ ちこうよれ  チェリー 合掌
うっとり❤︎ ルパン コブラ  ラムちゃん 学校
負けそう ルチ将軍 知能指数1,300  メグちゃん 脱腸

 

通常のカラーのサイトではこんな感じ↓
table-coler-tukeru

 

これもすぐできます
セルのプロパティで指定するだけw

cell-color

 

テキストでは background-color: #まるまるまる(お好みのカラー)

background-color: #f8ebfa; 

 

 

その他セルの結合や分割なんかもすぐTinyMCE Advancedでのテーブルツールタブでささっとできちゃう

それでやってからテキストエディタでソースをチェックしてくとコードも見られるのでわかりやすいかも….

 

で、上記のテーブルはコピペしてワードプレスやハテナブログなんかですぐ使える

そこからカスタマイズしてくのもアリだと思う

 

あと当然ソースをコピペしたりタグをコピペしたりしても楽かもしれない

ゼロから毎回テキストで書いて起こしてたら時間が勿体無いので、自分でよく使うコード枠はセーブしとくと便利ですよね,,,

一応ソースを出しておきましたので、使いたい方はどうぞ

項目へ戻る▲

 

 

❤︎2、Fc2の場合

※Fc2はコピペではうまくいきませんでした笑

これはFc2の管理画面からエディタを使ってできる

エディタの “W” をクリック

fc2-table-1-min

 

fc2-table-2-min

 

テーブルプロパティが開くのでそこで詳細設定

fc2-table-3-min

 

 

サクッとテーブル枠を作成できる

fc2-table-4-min

 

項目へ戻る▲

 

 

 

❤︎3、基本はコレ

プラグインがあれば本当に便利ですねぃ

そこから基本のコードをよっこしておけば色々応用できる

 

単純なテーブルというか下記のが基本中の基本な感じで、

コンテンツ1-1 コンテンツ1-2 コンテンツ1-3
コンテンツ2-1 コンテンツ2-2 コンテンツ2-3

   ↓

<table border="1" width="100%">
 <tbody>
  <tr>
   <td>コンテンツ1-1</td>
   <td>コンテンツ1-2</td>
   <td>コンテンツ1-3</td>
  </tr>
  <tr>
   <td>コンテンツ2-1</td>
   <td>コンテンツ2-2</td>
   <td>コンテンツ2-3</td>
  </tr>
  </tbody>
</table>

 

 

加えて、

トータル左右幅を指定したり

<table border="0" width="100%">

 

きるだけ見やすくするために

セルの余白の指定

padding-left:○%; padding-right:○%;

などがわかれば便利……..

 

          ↓

<table border="1" width="100%">
<tbody>
<tr>
<td style="padding-left: 1%; padding-right: 1%;">コンテンツ1-1</td>
<td style="padding-left: 1%; padding-right: 1%;">コンテンツ1-2</td>
<td style="padding-left: 1%; padding-right: 1%;">コンテンツ1-3</td>
</tr>
<tr>
<td style="padding-left: 1%; padding-right: 1%;">コンテンツ2-1</td>
<td style="padding-left: 1%; padding-right: 1%;">コンテンツ2-2</td>
<td style="padding-left: 1%; padding-right: 1%;">コンテンツ2-3</td>
</tr>
</tbody>
</table>

 

 

テーブルって全部自分で書くのって面倒だし、最初はハードルが高いと思う

でも基本は同じなのでとりあえずポイントがわかればなんだかよくわかってなくともカスタマイズしていける笑

 

ソースを見て、あ、これがカラー設定でこれが幅なのね?とか笑

そこからいじって壊してみたりしてるうちになんとなくつかめてくる笑

とりあえずポイントは、スマホ表示などでもはみ出ないこと?
なるべく簡単に見やすくすること?

だと思うのですが、

 

このログサイトでもはみ出た表があるので笑、気が向いたら直していこうと思ってます笑

項目へ戻る▲

 

ってことで楽しいテーブルをば!

しゃらんるああぁあ❤︎

 

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

新品価格
¥2,376から
(2016/10/24 16:13時点)

よくわかるHTML5 CSS3の教科書【第2版】

新品価格
¥3,024から
(2016/10/24 16:14時点)

 

rhjampj_v-min

 

REACH_rh // Discography (CD アルバム解説ページ)

REACH_rh //楽曲使用権が購入できるページ(AudioStock)         

❤Twitter, Facebook, G+, Feedly にて当サイト更新情報配信中です
宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

 Twitter   asset.f.logo.lg   btn_g_red_normal.png-34

follow us in feedly

 

スポンサーリンク

\(`^`)b


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

12 + 9 =