テーブル作成機能と外部ファイルとの連携（１）
テーブル作成機能の基本部分はHtml_Design画面中にある追加タグに組み込まれている作成機能の一部なのですが、この単独機能ではテーブルへの入力は手動操作で行う必要があります。ExcelファイルやGoogle Sheet中などで外部ファイルとして作成したデータなどをMy Note上に組み込むことが出来れば、定期的なデータの更新を含む案内などをWebページの形式で配布するなど各種の応用に適用できそうです。そこで単独のテーブル作成機能についてと外部ファイルとテーブルとの連携機能を含む形で説明したいと思います。前半は単独のテーブル作成と編集機能そのものについて、後半は外部ファイルのMy Noteへの取り込みと作成済のテーブルへのCSVデータの取り込みについて説明致します。
１．My Noteのテーブル作成機能
①テーブル作成の準備 My Noteでのタグを形成する役割を担うのはHtml＿Designポップアップ画面で追加タグを押すと現れるタグリストの中の「テーブル tbl」を選択することから始まります。
図１．テーブル作成準備
②図１．の状態から「テーブル tbl」を押すと図２．に示すような追加タグの右側に表題行が必要か否かと列数と行数（表題行は含まず）の項目が表示されます。表題が不要ならば「有」を消し、必要な行列数を入力します。次に「追加」ボタンを押しますと図３．に示すテーブルが直前のGreen Lineの直ぐ下に現れ、新たなGreen Lineは作成したテーブルの直下に現れます。（Design画面の先頭行のtagを見ると全体を含むDIVタグ中にテーブルが作られていることが分かります。）上記の手順でテーブルを作成した後は項目値の入力やカラー化などはDesign画面の↑←→↓を使ってセルを移動しながらの修正となります。詳細な説明はこの後に行いますが、テーブル操作でのGreen Lineの移動の基本はセル項目を選択後にWebDesignボタンを押すと選択項目の下にGreen Lineが現れ現在位置が確定します。そこから←→で同じ行の左右セルへの移動が出来ること、及び ↑ でセルから行全体さらにはテーブル全体へとGreen Lineが移動することを認識して下さい。少し面倒なことですが、暫くすると慣れる思います。
図２．テーブル行列数などの指定と作成
図３．作成直後のテーブルとHtml＿Design画面
テーブル項目の修正作業についてもう少し詳しく説明いたします。
③罫線なしのテーブル作成 先ほどの図3．と同様ですが今回は罫線も手動で引く場合のことも含めて詳細に説明します。罫線を引かずにテーブルを作る場合は、図２．の状態でStyle表示を押すと図４．が現れます。table-borderの項目をBS（back space）キーなどで取り除いた後で図２．の追加キーを押してテーブルを作成すると図５．のテーブルが出力されます。
図４．罫線を引かない場合
図５．罫線を引かないテーブル
作成後のテーブルのセル上にカーソルを置いて右クリックを押すと図6．に示すようなContextメニューが現れます。行や列の追加や削除及びテーブル上のデータのcsvファイルへの出力などが可能です。 セル結合及び分解については最後に説明します。
図６．作成後のテーブルへの各種操作
④テーブル項目の編集とフォント変更 先ほど作成した図５．のテーブルでセル毎にカーソルを移動しながら項目値を順番に修正して行きます。図７．は修正の途中で図８．は項目値の修正が完了したものです。
図７．項目値の修正途中
図８．項目値の修正が完了したテーブル
更に見栄えのするテーブルにするために幾つかの項目に修正を加えます。全体レベルでのline-heightを1.5から2.0に変更またfontも変えて見ました。
図９．Table全域でのline-height及びfontの変更
上記の変更で余裕と格調が増した感じの図１０．となりました。
図10．line-height及びFont変更後
⑤テーブルの罫線引き 更にテーブルに罫線を追加してみましょう。線を引いて見ましょう。表題行のセルのどれかを選んだ後に↑キーを押すと図11．で示す行全体がGreen Lineとなり表題行全体を選択状態となった状態で図12．のTop境界とBottom境界の線を指定してSetボタンを押して下さい。その他の罫線も同様に指定すると 最終的には図13．に示すようなテーブルが出来上がります。
図11．line-height及びFont変更後
図12．表題行の境界線を指定する
図13．横の罫線を引いたテーブル
行毎の罫線の指定はテーブル定義の性格上比較的簡単なのですが、縦の罫線指定はセル個々の単位で指定する必要があり、少し面倒なので図２．で示すようにテーブル作成時に引く方が簡単です。
少し長くなりましたが、カラー化の方法とセル結合についてもう少し説明させて下さい。
⑥セルのカラー化 テーブルでは各セル毎に各種の属性値を持っていますので特徴を持たせた編集が可能です。セル毎でも可能ですし、行単位での変更も可能です。
図14．テーブルのカラー化の例
図15．表題行の背景色カラー化例
カラー化の場合は下端メニューのパレットを表示して色を選びその色コードをコピペすることも出来ます。
図16．パレットの利用例
⑦セル結合の使い方 セル結合の例として下記のテーブルを示します。３か所の赤枠で囲った部分は項目値が同じになっています。同じ値が連続しているのを一目で分かるように１つにして表示したい場合があります。この状態で図18．のようにセル結合を選択してクリックすることで図19．に示すセル結合したテーブルが出来ます。セル結合したものを逆に戻す操作がセル分解の機能です。
図17．セル結合前のテーブル
図18．セル結合の実行
図19．セル結合後のテーブル
結合したセルのカラー化は説明上のことです。
⑧セル幅の設定と文の折り返し テーブル作成の上で各項目の説明文などが多く使われます。説明文は項目ごとに短いものや長い文などマチマチであり、テーブル作成毎に調整が面倒です。Htmlのテーブルの列幅の長さは指定しなければテーブルが入っている全体幅をMaxとして折れ曲がらない形式で調整されます。図20．の例では項目Cの列の幅を図21．に示す様に200pxに設定した場合です。横幅を指定した場合は説明文は長ければ指定幅で折り返されます。
図20.セル内の項目文の折り返し例
図21.セル幅の設定
テーブル作成に関する説明は以上と致しますが、ここで説明した以外のStyle属性値を変更することは可能です。また、テーブル以外のその他のタグに関してもMy Note全体の仕様として一貫して採用しておりますので理解して慣れて頂けるものと思います。