Mac Webディレクターの仕事 Windows

Excelで作った表をウェブで使えるHTMLに書き出す方法

excel-web-html

Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。

Excelを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそんな便利な小技をご紹介。

ちなみにNumbersを使った方法もご紹介していますので、こちらも合わせてご参考にどうぞ。

Numbersで作った表をWeb用HTMLに書き出す方法

1まずExcelを使って表を作ります。背景色やフォントカラーなども反映できますのでデザインしてOK。

excel-web-html_1

2作成した表の中から書き出したい範囲を選択します。

excel-web-html_2

3メニューに「ファイル」から「名前をつけて保存」を選択。【Command + Shift + S】のショートカットを使ってももちろんOK。

excel-web-html_3

4ファイル形式を「Webページ(.htm)」にし、保存する対象を「選択範囲」にします。最後に「保存」を押して完了です。

excel-web-html_4

5保存したファイルを CotEditor などのテキストエディタで開きます。するとWebで使えるHTMLとして出力されているのが確認できるかと思います。

excel-web-html_5

class や style が割り当てられていますので、ここからデザインをカスタマイズするのも簡単です。
 

まとめ

Excelで表を作成し、作った表を範囲選択する。

ファイルを保存するさい、フォーマットを「Webページ」にする。

保存したファイルをテキストエディタアプリで開く。

bamka

テーブルデザインが苦手な人でも、これなら直感的に表を作れますね。
今回はMac版のExcelで説明しましたが、Win版でも基本は同じです。

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-Mac, Webディレクターの仕事, Windows
-, , , , , ,