PC活用術
パソコンを有効活用するための情報・自作PCパーツ情報・フリーソフト紹介解説。
大手レビューサイトとは違い、皆さんのお財布にやさしい情報発信をテーマにしています。
TOP > PC 活用 > Excel のデータを HTML タグに変換(タグバージョン)

Excel のデータを HTML タグに変換(タグバージョン)

Excel のデータを HTML タグに変換

筆者が自サイトの記事作成用に作成しオフラインで使用していたものですが、需要があるかもしれないので公開します。
こちらのバージョンは <TABLE> 関連タグに加えて、テーブル内でも使用頻度の高いタグ
(br・a・strong・span・img・align)は削除せずに出力します。
align に関してはかなり特殊な動作をしますので「補足説明」をご覧下さい。
このバージョンは筆者のサイト作成用に特化した仕様となっておりますので、シンプルにテーブル限定タグだけを出力したい場合は「シンプルバージョン」をご利用下さい。

このページは「Chrome・Firefox・Edge」での作業に最適化されており、「Opera・Safari」はテストしておらず、「IE」は表示が崩れ余計な操作も必要となり非推奨です。
またWEBサイト作成者がPC操作で使用する状況でしか用が無い内容なので、スマートフォンでの閲覧は考慮してないレイアウトとなっております。

使い方

Excelやその他テーブルデータから目的の範囲をコピーし、貼り付け欄に貼り付けます。
張り付けると「変換結果欄」に出力されますが、ブラウザによっては貼り付け後に適当な入力欄以外の箇所をクリックしなければ反映されません。
入力欄は編集が可能なので、未入力のセルだけを張り付けてテーブルデータ作成にも使え、変換結果欄はリアルタイムで反映されます。
但し途中でセルを追加削除などは出来ないので、その必要がある場合は一旦作業中の入力欄データをExcelに貼り付け、セルを変更してから再度貼り付け直すなどして使用して下さい。
「貼り付け欄のリセット」を押すことで入力欄がクリアされます。
設定ボタンで改行の有無やインデントの調整が可能です。

貼り付け欄

プレビュー

 ※当サイトのスタイルでのプレビューとなります。
  幅に影響のあるテーブル部分のスタイルは以下の内容です。
font-family
Verdana,"ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,"MS Pゴシック",Arial,Helvetica,sans-serif
font-size
body:62.5% table:1.2rem
max-width(スクロールバー含む)
680px

変換設定

改行とインデント設定


改行有の場合に有効

変換結果欄

補足説明

出力されるタグは筆者が日頃記述しているテーブルタグがベースとなっており、Excelのデータを変換した場合は以下の例の「出力結果」の部分に全て入力されます。
HTMLテーブルデータを変換した場合は、
<caption>に入力されていた文字列は削除されます。
<thead>と<tfoot>に入力されていたデータは<tbody>に移動します。

align に関しては一癖あります。
「align」は HTML5 では廃止されているので、構文チェックでエラーとなり減点となります。
「style」で「text-align:right;」などと指定するのが正解ですが、スタイルを大量に直接記述するのも歓迎されません。
筆者が自分用に作成したこともあり、「align」は「class」に置き換えられる仕様となってます。
つまり「align="right"」であれば「class="right"」に変換されます。
なので外部 CSS に「class="right"」を「text-align:right;」に設定することで、右寄せで表示されることになります。

「align」を設定する場合、「center」か「right」になると思いますが、引き継ぐのは「right」のみで「center」と「left」は削除されます。
「right」に関しても特殊な動作となっており、何も設定されていない「数字だけのセル」が自動で「class="right"」に設定されます。
つまり Excel はデフォルトでは、何も設定しなくても数字だけのセルは右寄せで表示されます。
この状態のセルを「class="right"」に設定するので、逆に不必要な「右寄せ」設定されたセルは「中央寄せ」と同様に削除されます。
筆者が自分用として最善の設定なので、この動作が好ましくない方は「シンプルバージョン」の方をご利用ください。

また意外と思われる方も居るかもしれませんが「colgroup」も削除されます。
これは一番左の縦列だけ色を変えるなどで <colgroup span="1"> のように使われる方は多いですが、5列のテーブルで左の一列だけ設定するとエラーで減点となり、無意味に残りの4行を標準のスタイルと同様の設定をしなければ正しい記述とはなりません。
毎回同じ大きさのテーブルを作成する人を除いては全く不便なタグなので、筆者はCSS3の疑似クラスを使っています
左一列の設定を行いたい場合は「tr td:nth-child(1) {background:#fbf5e0;}」このようにしています。

rss1 hatena Tweet facebook googleplus Line

コメント

TOP ▲ 400 ▲ 400 ▼ OLD ▶
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。