2016-4-14(Thu)
（このページは「Ecel→HTML」のヘルプです。）
これは簡単に表が作れる親切ウェブ・アプリに見えて（実際にそう使えなくもないかも）、じつのところはテーブル用の CSS 手書き支援のための仕組みなのかもしれない。
Excel や他の表計算ソフトの画面から、あるいは、ブラウザで開いたホームページ上から表のデータをコピーすると、たいがいタブ区切りのデータがクリップボードに入る。ようするに「Excel→HTML」はこのタブ区切りのテキストから HTML 表のために必要なコードを作成するわけだ。
もちろん、いったんデータをこのテキストエリアにペーストした後、そこでデータを編集してもいいが、困ったことが一つある。たいていのブラウザでは、テキストエリアにタブを入力することができないのだ。
そういうときは、「設定」を開いて「2 個以上連続するスペースをタブとして扱う」をオンにする。データ入力エリアで、スペース文字（いわゆる半角のやつ）をふんだんに使ってで位置決めをすればいい。
このような Excel の画面から、そのままデータを貼り付けて HTML の表にすると、次のようになってしまう。
そういうときは、いったん Excel に戻り、結合を解除する。
それから、左と結合したいセルに → だけを、また上と結合したいセルに↓だけを書く。
これをコピペして「変換」すると、次のように、セルが結合された HTML 表になる。
→や↓は、それぞれ連続して使うことができる。
なお、特別な意味を持っているのは→と↓だけであり、←や↑は一般の文字として扱われる。
もし、2x2 以上のセルを作りたいなら、→と↓と + （いわゆる半角のやつ）を使い
のようにすると、次のようになる。
文字通りに→や↓や + だけをセル中に表示したいときは、.→ とか .↓ とか .+ とか書く（「エスケープ）」参照。）
プレビューとして表示された表のセルをクリックすると、左、中央、右揃えが切り変わる。これは、すぐさま出力コードに反映される。
2 行以上に渡るセルの場合は、左上、中央上、右上、左中央、セル中央、右中央、左下、中央下、中央右、の順で切り替わる。
入力セルの文字列頭を # で始めると、そのセルは HTML の TH 要素となる。TH 要素は、たいがいの環境で強調表示されるので、固いこと（TH は装飾のためにあるわけじゃないぞプンスカ）を言わなければ、これで簡単な強調ができる。
本格的な装飾を施すには、「設定を開く」→「高度な設定」でフォームを開き、そこに追加 CSS を書く。（正確に再現するには 参照）
セルに「→」だけを表示させるには「.→」とする。
セルに「↓」だけを表示させるには「.↓」とする。
セルに「+」だけを表示させるには「.+」とする。
セル内の文字列先頭に「#」を表示させるときは「.#」とする。
セル内の文字列先頭に「.」を表示させるときは「..」にする。
一般に、セル中文字列先頭にある 「.」は削除されるので、「.」だけのセルは、空白のセルとなる。
TABLE 要素の id は、デフォルトでは自動的につけられる。「設定を開く」→「高度な設定」から、これを手動に変えることできる。
TR 要素の id と TD,TH 要素の id は、少なくともその TABLE 中でユニークになるようにつけられる。
「Excel→HTML」で作成した HTML のコードは、自分のブログ等に貼り付けたときしばしばプレビューとは外見が変わってしまう。これは、コードを貼り付けた先の設定が、あなたの設定を抑え込んで表の外見をあれこれ決めてしまうからだ。
たとえば、貼り付け先のページがセル単位でフォントの色を指定してきているならば、「Excel→HTML」の一般的な設定でフォントの色を指定しても効果がない（それはテーブル単位での指定だからだ）。がいして「Excel→HTML」の設定は、貼り付け先のページが何でもかんでも決めたがるときは、黙って引き下がる傾向がある。表の背景色に至っては、一般の設定項目では設定すらできない。
この結果をあらかじめ予測したいならば、「設定」→「高度な設定」にある「次の URL の CSS ファイルを読み込んだ後にプレビュー」という入力欄を使う。コードを貼り付ける予定のページが使っている CSS ファイル を発見して、その URL を欄内に書き込んでおくようにする。すると、表の外見が実際どのようになるかを知ることができる。
もし、何が何でも自分のデザインをコードの貼り付け先で再現したいならば、「高度な設定」を開いて「追加の CSS を手書きする」。フォントサイズを誰にも邪魔されずに決めたいならば、たとえば TABLE TD { font-size: 10.5pt; } と書き込む。セルの背景色を絶対にピンクにしたいならば、そこに TABLE TD { background-color: pink; } と書く。これらはプレビューに反映されるだけでなく、「Excel→HTML」が出力するコードにも反映される。
この入力エリアでただ TABLE と書くとそれは TABLE#id に置換される。つまり、この欄の TABLE は「ドキュメント中のすべてのテーブル」ではなく「このテーブル」を指す。（id があるとページ内にある他の表に影響をおよぼさないし、同じ種類の要素に対する設定が競合した場合には id のついた設定のほうが勝つ。）その他は、一般の CSS と変わりがない。
もちろん、CSS を手書きすることによって、かなり複雑なことが実現できるようになる。
いくつか楽しい例を挙げておく。これをそのまま「追加の CSS を手書きする」にコピペすると、かなり我を通すコードが出力される。（表の中の文字データは https://en.wikipedia.org/wiki/Doctor_Who から拝借）
/* Example 1 */
TABLE { /* テーブル要素とその子孫の */
all: initial; /* すべての属性をいったん初期値に戻す */
}
TABLE { /* テーブルの */
display: table; /* 要素タイプ */
font-size: 14px; /* フォント・サイズ */
border-style: solid; /* 罫線の種類 */
border-width: 1px; /* 罫線の太さ */
border-color: black; /* 罫線の色 */
border-collapse: collapse; /* セルの分離 */
}
TABLE TR { /* TR 要素の */
display: table-row ; /* 要素タイプ */
font-size: inherit; /* フォントサイズは: 継承 */
}
TABLE TR:first-child { /* 1 行目の */
background-color: lightskyblue; /* 背景色 */
font-weight: bold; /* フォントウェイト */
color: #101010; /* フォントの色 */
text-align: center; /* 左右文字そろえ */
}
TABLE TR:not(:first-child) { /* 1 行目以外の */
font-weight: normal; /* フォントウェイト */
text-align: left; /* 左右文字そろえ */
}
TABLE TR:not(:first-child):nth-child(2n+1) { /* 1 行目を除く奇数行の */
background-color: azure; /* 背景色 */
color: #101010; /* フォントの色 */
}
TABLE TR:not(:first-child):nth-child(2n+2) { /* 1 行目を除く偶数行の */
background-color: white; /* 背景色 */
color: #101010; /* フォントの色 */
}
TABLE TD, TABLE TH { /* TR, TH 要素の */
display: table-cell ; /* 要素タイプ */
font-size: inherit; /* フォントサイズは: 継承 */
font-weight: inherit; /* フォントウェイトは: 継承 */
color: inherit; /* フォントの色は: 継承 */
text-align: inherit; /* 左右文字そろえは: 継承 */
padding: 0.2em 3em; /* 上下・左右のパディング */
border-style: solid solid; /* 罫線の種類（上下・左右） */
border-width: 1px; /* 罫線の太さ */
border-color: gray; /* 罫線の色 */
}
/* テーブル枠線と重なるセル罫線を表示しない */
TABLE TR TD:first-child { border-left: none; } /* 1 列目のセル */
TABLE TR TD:last-child { border-right: none; } /* 最終列のセル */
TABLE TR:first-child TD { border-top: none; } /* 1 行目のセル */
TABLE TR:last-child TD { border-bottom: none; } /* 最終行のセル */
/* Example 2 */
TABLE * { /* テーブル要素とその子孫の */
all: initial; /* すべての属性をいったん初期値に戻す */
}
TABLE { /* テーブルの */
display: table; /* 要素タイプ */
font-size: 14px; /* フォント・サイズ */
border-style: none; /* 罫線の種類 */
border-collapse: collapse; /* セルの分離 */
}
TABLE TR { /* TR 要素の */
display: table-row ; /* 要素タイプ */
font-size: inherit; /* フォントサイズ: 継承 */
border-style: inherit; /* 罫線の種類: 継承*/
border-width: inherit; /* 罫線の太さ: 継承 */
border-color: inherit; /* 罫線の色: 継承 */
}
TABLE TR:first-child { /* 1 行目の */
background-color: transparent; /* 背景色 */
font-weight: bold; /* フォントウェイト */
color: #101010; /* フォントの色 */
text-align: left; /* 左右文字そろえ */
border-bottom: solid; /* 罫線(下側) */
border-width: 2px; /* 罫線の太さ */
border-color: black; /* 罫線の色 */
}
TABLE TR:not(:first-child) { /* 1 行目以外の */
font-weight: normal; /* フォントウェイト */
color: #101010; /* フォントの色 */
text-align: left; /* 左右文字そろえ */
}
TABLE TD, TABLE TH { /* TR, TH 要素の */
display: table-cell ; /* 要素タイプ */
font-size: inherit; /* フォントサイズ: 継承 */
font-weight: inherit; /* フォントウェイト: 継承 */
color: inherit; /* フォントの色: 継承 */
text-align: inherit; /* 左右文字そろえ: 継承 */
padding: 0.2em 1.5em; /* 上下・左右のパディング */
border-style: inherit; /* 罫線の種類: 継承*/
border-width: inherit; /* 罫線の太さ: 継承 */
border-color: inherit; /* 罫線の色: 継承 */
}
「設定を開く」→「高度な設定」から、「追加属性をセットする」にチェックを入れると、HTML の TR, TD, TH 要素に次の属性がセットされる。
じつは、これは大変有益な使用法のある属性なんだけど、だんだん説明書くのが面倒くさくなってきたぞい……
おわり