ブログに簡単な表を掲載する
前ページの誌面で表（table）を使用しましたが、判っているつもりだったのですが、なかなか手間取りました。 アメブロの記事で「table」を使った記事を余り見ませんが、手頃な方法をこの機会に纏めておきます。
Excel等で表を作って表示結果をハードコピーするのは、簡単で良い選択の場合もあります。 しかし、データの再利用が出来ないし、SEO的にはマイナスです。 それに対して、記事上に直接に「table」を作成すれば、後で内容を一部変更したい場合には修正が簡単です。 更に、文字・枠線・背景色などを柔軟に調整が出来ます。 フォントや枠線が綺麗というのも良いところです。
大変に行や列の多い「table」を、誌面上にスクロールで表示する事は可能です。 これが出来るユーザーは当然タグコードを操れるはずで、結局 Excel や Googleスプレッドシートなどからコピーする方法を使うでしょう。 そういう場合のテクニックはネットの記事に譲り、ここではアメブロの誌面に適した、比較的シンプルな表掲載の方法を纏めます。
このページは、ブログページ上の「table表」の基本としてお読みください。 以下に、ブログに表設置がワンタッチで可能なツール「Blog Table ⭐」を公開しています。 これを使うと、通常表示から美しい「table表」が作成できます。
●「Blog Table ⭐」の最新バージョンのリンクは、以下のページのリンクリストから探せます。
● 最新の操作マニュアル
ネット上の表作成ツールを利用して枠組みを作る
HTMLタグで表をいちから構成するのは手間です。 ネット上にべースになるHTMLタグを記述してくれる「表作成ツール」があり、これを利用します。 何ヵ所か有名なサイトがありますが、以下のリンクが使い易いです。
下図はリンク先のページの内容ですが、これで表の基本的な枠組みを作ります。
表の「列数」「行数」を決定する
❶ このボタンで「列数」「行数」を追加指定して、表全体の枠組みを決めます。
後の変更は大変なので、見出し列、見出し行の分も忘れずに加えて指定します。
❷「列数」「行数」を逆に減らしたい場合は、この部分をダブルクリックします。
❸ この部分は、作っている表のプレビューです。
（最上部の3種のタイプ選択は変更出来ません、現在は左端タイプのみに固定です）
表にデータ記入も可能ですが、ここでは「列数」「行数」の指定だけします。
❶❷ で必要な枠組みを設定し、最後にページ一番下のコードをコピーします。
ブログ編集画面の「HTML表示」にペーストする
下図は「4列 4行の表」のコードを「HTML表示」にペーストした結果です。 横幅がブログ本文いっぱいに拡がって表示されます。（横幅の調整は、後述します）
ブログ編集画面の「通常表示」でセルにデータを入力する
下図は、これに実際に表示させたいデータをセルに書き込んだ所です。
◎ 編集アイコン（特に中央寄せや文字修飾）が普通の文章と同様に使えます。
◎ セル幅がいびつになっても、後で修正できるので気にせずに記入します。
◎ 改行が可能で、中央寄せや「半角・全角スペース」で左右位置の調節をします。
| Chrome拡大率 | メイリオが文字欠けしない最小 line-height値 | Firefox拡大率 | メイリオが文字欠けしない最小 line-height値 |
| 100% | 0.999999962 | 100% | 0.950520784 |
| 110% | 1.079928933 | 110% | 0.892187447 |
| 125% | 1.099999962 | 120% | 0.981770784 |
◎ 1行目は、列幅が文字数によって自動的に適当に配分されています。「table」はデフォルトでは自動的なセル幅のバランスが働きます。「全角スペース」を上手く使うと、自動バランスを利用しながら適当な列幅を調節できます。 またHTML編集で、直接にセルごとの幅指定も可能ですが、これをこなすには「table」についてネットで情報を仕入れてください。（このページ末にリンクがあります）
◎ 1行目の文字列の改行は、自動的に改行された結果です。 ユーザー側で改行を入れて、改行位置をコントロール出来ます。
◎ 全体に「左寄せ」が指定されていますが、編集アイコンでセル単位で「中央寄せ」などを指定出来ます。 また、ブルーの「見出し枠」は「太字」ですが、これも編集アイコンで変更出来ます。
以下は、これらのレイアウト調整をした状態です。
| Chrome 拡大率 |
メイリオが文字欠けしない 最小 line-height値 |
Firefox 拡大率 |
メイリオが文字欠けしない 最小 line-height値 |
| 100% | 0.999999962 | 100% | 0.950520784 |
| 110% | 1.079928933 | 110% | 0.892187447 |
| 125% | 1.099999962 | 120% | 0.981770784 |
Chromeの列の枠線が消えてしまったのが予想外です。 これは、この列で「A→Aもどす」の編集アイコンを使って「太字」をキャンセルした時に、一緒に背景色指定と枠線指定が消えてしまった様です。
ブログ編集画面の「HTML表示」で表を修飾する
表の細かなデザインは、再び「HTML表示」の編集画面を開いて、タグコードを直接編集する事で調整します。
上の様な枠線消失の修正は、やはり「HTML表示」で行います。 ここまでの入力で、表のHTMLタグの内容は以下の様になっています。 一見複雑そうですが、<tr>の組に<td>が規則正しく整列した構造です。 それが判ると難しいものではありません。
上の太字の部分が問題の枠線が消えたセル（枠）です。 この3ヵ所に、他のセルを見習って「padding:10px;border: 1px solid #CCC;」を追加して修正します。
結果は以下の様に、枠線の消失を修復できました。
| Chrome 拡大率 |
メイリオが文字欠けしない 最小 line-height値 |
Firefox 拡大率 |
メイリオが文字欠けしない 最小 line-height値 |
| 100% | 0.999999962 | 100% | 0.950520784 |
| 110% | 1.079928933 | 110% | 0.892187447 |
| 125% | 1.099999962 | 120% | 0.981770784 |
表のデザインのポイント
各<td>が「セル」に相当しますが、<td>には「style=""」が書き込まれています。 このstyle属性で、各セルのデザインを調整出来ます。 修飾は、セルとセル内部の文字の修飾になり、bacground、color、padding、border、line-height、font-size、font-weight、など、普通の文章と同様に設定が出来ます。
● 例えば2行目の<tr>のpaddingを調節したい場合、基本は<tr>の全ての<td>のpaddingを同じ様に書換えます。 下の太字は2行目のpaddingを「padding: 10px;」から「padding: 6px 10px 3px;」に書き換えたものです。
結果は以下で、2行目のセルの上下の余白が調節されました。
セル数が多い場合は少し手間ですが、この様にして表のデザインを整形します。
| Chrome 拡大率 |
メイリオが文字欠けしない 最小 line-height値 |
Firefox 拡大率 |
メイリオが文字欠けしない 最小 line-height値 |
| 100% | 0.999999962 | 100% | 0.950520784 |
| 110% | 1.079928933 | 110% | 0.892187447 |
| 125% | 1.099999962 | 120% | 0.981770784 |
● 上の「padding」の様に、セルのデザインを表全体で変えたい場合が出て来ます。 アメーバ編集画面では多数箇所のコピペになりますが、一旦「メモ帳」に「table」コードをコピーして「検索→置換」を使うと、処理が早く正確になります。 遠回りに見えますが、セル数が多い場合や整形に拘る場合には、結局は早く処理できます。
● 修飾の優先順位で、<td>で修飾があるプロパティは<tr>から修飾出来ません。 しかし<td>に既修飾がないプロパティで文字の修飾などは、 <tr>での指定が内部の<td>に継承され、纏めて指定出来ます。 多数箇所の書換えの手間が省けるので、継承が使える場合は積極的に利用します。
下のコードは、1行目の行間隔「line-heoght: 1.2;」と文字色「color: red;」を <tr>で纏めて指定した例です。
ついでに 4行目の背景色「background-color: rgb(244, 248, 255);」も<tr>で指定しました。
| Chrome 拡大率 |
メイリオが文字欠けしない 最小 line-height値 |
Firefox 拡大率 |
メイリオが文字欠けしない 最小 line-height値 |
| 100% | 0.999999962 | 100% | 0.950520784 |
| 110% | 1.079928933 | 110% | 0.892187447 |
| 125% | 1.099999962 | 120% | 0.981770784 |
●「表作成ツール」によって生成されるタグコードはシンプルで、整形アレンジがし易いのですが、「セルの結合」の機能がありません。 しかし、セルの結合は以下の簡単なタグコードで実現出来ます。
アレンジは、理解するより実際に記入する方が早いです。 下は最初の「4列 4行」の表の最初の<td>に上の「colspan="2"」を書き入れた状態です。
| 水平方向の2個を結合 | ||||
「セルの結合」より「拡張」と言う感じで、右端で <td>が1個追い出されています。 この<td>に相当するタグコード行を削除すると、はみ出たセルが削除出来ます。
● 表作成ツールの生成コードは「<table style="width: 100%;">…</table>」という形で「table」全体がブログ本文幅に拡がる指定です。 表がコンパクトで、本文に中央寄せで表示させる場合は、「table」の style属性に以下のコードを追加します。 これは、同時に「width: 500px;」等の具体的な表幅を指定しないと、コードが意味をなしません。
以下は、ペーストしたばかりの表に上の指定をしたものです。
表のレイアウトで苦労する部分
表「table」のセル幅の調節は、一般の「block」の様には思い通りに行かない事があります。 表のセル幅は、行内の他のセル幅も含めて調節され、これが扱いづらい原因になる様です。 それを抑止する「table-layout」プロパティもあります。 必要なら以下のページなどを参考にしてください。