【備忘録】表の練習です

表には様々なつくりかたがる。5年もウェブ関係に携わってきて未だに不明瞭な部分もあるので、実際に表を作って学んでいこうと思う。

この記事で分かること

Advanced Editor Tools(TinyMCE Advanced）の使い方が分かります。
セルのタイトルの付け方、文字を真ん中にする方法、背景色の変え方などが分かります。
横スクロールをしたい場合は、こちらへ。
表に説明文をつける方法が分かります。

参考にしたのは以下のサイト。

こんにちは、ikuzo(いくぞう)です。ブログを始めて1年になりました（パチパチパチ...）最初のころは、Cocoonで何をするにも分からないことだらけでしたが、少しずつ扱えるようになってきましたよ（遅い）。「私が悩んだことを、これからCo

通常の表のつくりかた
表を横スクロールさせたくない場合（コピー＆ペーストでつくる）

通常の表のつくりかた

あ	い
う	え
お	か

(1)「Advanced Editor Tools(TinyMCE Advanced）」を有効にして作成
(2)“border-collapse: collapse;を削除。（あってもいいかもだが）

横にタイトルを付けてみよう

ここをタイトル１	ここをタイトル２	ここをタイトル３
あ	い	う
か	き	く

(1)上記と同じやり方で表を作成
(2)セルの場所を選択し、表アイコン→セル→セルのプロパティ→セルの種類を「ヘッダーセル」にする

縦にタイトルを付けてみよう

ここをタイトル1	あ	か
ここをタイトル２	い	き
ここをタイトル３	う	く

(1)上記と同じやり方で表を作成
(2)セルの場所を選択し、表アイコン→セル→セルのプロパティ→セルの種類を「ヘッダーセル」にする

文字を真ん中に寄せたり、左右に寄せたり

これをヘッダーにします
ここもヘッダー（左寄せ）	真ん中にします	真ん中にします
ここもヘッダー（右寄せ）	右に寄せます	左に寄せます（自動）

(1)上記と同じやり方で表を作成
(2)セルの場所を選択し、表アイコン→セル→セルのプロパティ→横配置を「選択する」にする

※ヘッダーは自動で中央寄せになり、通常は自動で左寄せになる

背景色を変える（すべて白にする）

aa	aa	aa
aa	aa	aa
aa	aa	aa

(1)上記と同じやり方で表を作成
(2)すべてを選択し、テーブルアイコン→行→行のプロパティ→高度な設定→背景色を選択

※なお、セルひとつずつ色を変更するのも可能だ。そのときは、「セルのプロパティ」で変更する。

もし、それで変わらなかったら・・・

それで変わらない場合は、「行」ではなく、「セル」のプロパティで色を変更していこう。

通常の背景の色は？:
#fafbfc
もしくは、#FAFBFD

枠線の色を変える（すべて青にする）

枠線を青に	あ	い
う	え	お
か	き	く

(1)上記と同じやり方で表を作成
(2)全選択肢→セル→セルのプロパティ→高度な設定→枠線の色を設定

通常の枠線の色は？:
#eee

縦の幅が勝手に変わるのを直す。

「Advanced Editor Tools(TinyMCE Advanced）」を使用していると、編集画面でも勝手に縦幅が設定されたり、横幅が設定されたりしてしまう。

HTML表示にしてheigth値を消せばいいのだがすごく面倒。なのでこれすらも直す方法をメモしたい。

こんな感じになって縦幅が広がって最悪だ・・・
あ	い	う
え	お	か
き	く	け

これを・・・

あ	い	う
え	お	か
き	く	け

このように直す。

やり方はアナログ。“ー”にカーソルをあわせて、ドラッグしたまま上に引っ張りあげる。それで最小値(10px)に設定される。

横の幅を調整する

ここだけを長ーーーーーーーくする。	a	i
ここだけを長ーーーーーーーくする。	a	i
ここだけを長ーーーーーーーくする。	a	i

“｜”にカーソルを合わせれば感覚的にできるのだが、それだと調整しずらい。だから「Advanced Editor Tools(TinyMCE Advanced）」のアイコンから数値で設定していこう。

(1)上記と同じやり方で表を作成
(2)1行目の縦のセル（行）を全て選択→セル→セルのプロパティ→幅で数値%を記入
(3)2行目、3行目も同じようにする

※1行目+2行目+3行目の合計で100%になるようにする。

横スクロールできるようにする

これは少し複雑になるので、別ページで。

【備忘録】表を横や縦にスクロールし、改行もされるようにする

前の表を練習する記事である程度のことはできるようになったのだが、スクロールを伴う表に関してはうまくできなかった。なのでここでは、「スクロールできる表」の作成に関しての備忘録を書いていく。参考にしたのは以下の記事だ。ありがたい。今回、参考に...

表にキャプションをつける

表にキャプションをつける	表にキャプションをつける	表にキャプションをつける	表にキャプションをつける
表にキャプションをつける	表にキャプションをつける	表にキャプションをつける	表にキャプションをつける
表にキャプションをつける	表にキャプションをつける	表にキャプションをつける	表にキャプションをつける

このようにキャプションをつけます

やり方は簡単。

⑴通常通りに表をつくる
⑵<figure>表のhtml<figcaption>このようにキャプションをつけます</figcaption>
</figure>とする。

表を横スクロールさせたくない場合（コピー＆ペーストでつくる）

スタンダードな表１

メーカー	無印良品
商品名	日焼け止めミルク
外寸	38×23.5×91.5mm
SPF/PA値	ＳＰＦ３０/ＰＡ＋＋
容量	150mL
重量	約180g
価格	990円
Amazonで見る	日焼け止めミルク
成分表	水、BG、酸化チタン、水添ポリイソブテン、エチルヘキサン酸セチル、PEG-12ジメチコン、ジメチコン、シクロペンタシロキサン、トリエトキシカプリリルシラン、水酸化Al、ヒドロキシアパタイト、ベヘニルアルコール、フェノキシエタノール、(アクリル酸Na／アクリロイルジメチルタウリンNa)コポリマー、含水シリカ、ペンタステアリン酸ポリグリセリル-10、イソヘキサデカン、酢酸トコフェロール、キサンタンガム、ステアロイルラクチレートNa、セテス-10、ポリソルベート80、オレイン酸ソルビタン、BHT、ヒアルロン酸Na、トコフェロール

まずはよく見る表だ。こちらを流用するやり方を書いていきたい。

(1)HTML編集にして、<table><tbody>~</table></tbody>をコピー。
(2.1)もし、長さを調整したい場合はプラグインの「Advanced Editor Tools(TinyMCE Advanced）」を有効にする。
(2.2)ビジュアル編集画面で表の”｜”に合わせると”｜”を移動するマークがでる。移動させよう。
(2.3)その後、HTML編集をする。すると”<table style=”width: 100%;“>”だったり、”<td style=”width: 14.5238%;“>””<td style=”width: 85.3571%;”>“とwdthの数値が追加される。

td styleは縦のセルだ。今回は2列だからtd styleが2列ある。この数値を足した数がtable style=”width: 100%;“になる。ここの100％は超えてはならない。（もし超えると、画面を超えて横に伸びる。しかもスクロールしない）

(3)その後、Advanced Editor Toolsを無効化→編集ページを更新する。これは、誤作動を防ぐためだ。更新の際、記事を保存・公開済みなら更新するのを忘れてはならない。
(4)2.3で追加された数値をいじる。（table style=”width: 100%;”以外）
いじるのは一番上の数値だけでいい。