Excel・スプレッドシートをtableタグに変換

Excel・スプレッドシートをtableタグに変換の使い方

表をコピーして貼り付ける

表計算ソフトで、変換したいセルの範囲を選択してコピーします。「表計算ソフトからコピーしたデータ」へ貼り付けると、自動でHTMLへ変換されます。

手元に表がない場合は「入力例を使う」を押すと、変換後のコードとプレビューを試せます。

対応している表計算ソフト

コピーした表が、列をタブ、行を改行で区切ったテキストとして貼り付けられる表計算ソフトで使えます。

• Microsoft Excel
• Googleスプレッドシート
• Apple Numbers
• LibreOffice Calc
• Apache OpenOffice Calc

上記以外の表計算ソフトでも、コピーした内容がタブと改行で区切られていれば変換できます。アプリのバージョンやコピーするセルの内容によって結果が異なることがあるため、変換後のプレビューも確認してください。

見出しセルを設定する

通常の表では「1行目を見出しにする」を選びます。左端にも項目名が並ぶ表は「1行目と1列目を見出しにする」を選んでください。

見出しにはthタグを使い、1行目にはscope="col"、1列目にはscope="row"を付けます。表の構造が、画面読み上げソフトにも伝わりやすくなります。

空白セル・結合セルの扱い

空白セルは削除せず、元の位置を保ったまま、内容が空のthタグまたはtdタグへ変換します。空白セルが途中にある表でも、列の位置がずれません。

結合セルの範囲は、コピーした文字だけでは判別できません。そのため、このツールでは結合を解除した状態と同じ通常のセルとして変換します。セルを結合したい場合は、変換後のHTMLに列方向のcolspan属性、または行方向のrowspan属性を追加してください。

変換されたHTMLを確認する

変換後のコードは「変換されたHTML」に表示されます。「HTMLをコピー」を押し、WordPressなどのHTML編集画面へ貼り付けてください。

「表のプレビュー」では、変換後のHTMLが表としてどのように見えるか確認できます。Webサイトへ掲載する前に、行と列の位置や文字を見直してください。

表題・class・横スクロールの設定

表題を入力すると、tableタグの中にcaptionタグを追加します。何についての表なのかを短く入力してください。

WordPressへ貼り付ける場合は「WordPressのテーブルブロック用に変換する」にチェックを入れてください。tableタグをfigureタグで囲み、表題をfigcaptionタグとして出力します。WordPressのコードエディターまたはカスタムHTMLへ貼り付けて使えます。

WordPress用では、テーブルブロックの構造を保つため「横スクロール用のdivで囲む」は適用しません。横スクロールの表示は、使用しているWordPressテーマの設定に従います。

class名は、変換後の表へCSSを設定したいときに使います。横幅が大きい表は「横スクロール用のdivで囲む」を選ぶと、table-scrollというclass名を付けたdivタグで囲めます。

変換するときの注意点

セル内の&や<などは、HTMLの表示が崩れないよう自動で変換します。セル内改行はbrタグになります。

セルの色、罫線、文字サイズなど、表計算ソフトで設定した見た目は引き継ぎません。掲載先のCSSで調整してください。