アフィリエイトラボ

サイトを作る時に商品のランキングや比較表にテーブルを使いたくなる場面が出てくると思います。しかし思い通りのテーブルをHTMLで組むのは、慣れていない人にとっては大変。本当はテーブルを使いたいのに、諦めた経験はありませんか？

そんな方にピッタリの、簡単なテーブル作成法を知ったので紹介します＾＾

Table M+ / ohoo_

Excelで作成した表をHTMLに変換する方法

この方法はExcelを使用するので、Excelを持ってない人はごめんなさい。

まずはExcelでサイトに載せたい表をパパッと作ってしまいましょう。普段からExcelを
使い慣れている人なら複雑な表でも短時間で簡単に作れてしまうはずです。

今回はテストとして上のような表を作ってみました（これはエクセル画面をキャプチャした画像です）。この表をHTMLで作ろうと思うと、ちょっと嫌ですよね？

ではこの表をHTMLに変換していきたいと思います。

XLS2HTML Table アドオンをダウンロード

次にExcelにXLS2HTMLTableというアドオン（アプリケーションを機能拡張する
小さなプログラムのこと）をExcelに組み込みます。

10年以上前のフリーソフトで、動作環境がWindowsMe、Excel2000と書いて
ありますが、僕の環境（Windows7、Excel2007）でも動作しています。

XLS2HTMLTABLEはVectorからダウンロードできますよ。

XLS2HTMLTABLEの詳細情報 : Vector ソフトを探す！

ダウンロードしたデータを解凍し、フォルダーごと任意の場所に保存して準備完了です。
プログラムファイルフォルダの中でも、Cドライブ直下でもどこでもいいと思います。

XLS2HTMLTABLEの設定方法

ではダウンロードしたXLS2HTMLTableをエクセルに適用していきましょう。
まずはExcelのスタートメニューを開き、「Excelのオプション」をクリックします。

 

Excelのオプションウィンドウが開いたら、サイドにある「アドイン」をクリックし、
下部のプルダウンメニューから「Excelアドイン」を選択し、設定をクリック。

 

アドインウィンドウの中にある「XLS2HTMLTable」にチェックを入れてOKをクリック。

 

Excel画面でアドインタブを開き、メニューコマンドにXLS2HTMLTableが
追加されていれば、ここまでの作業は成功です。

 

実際にXLS2HTMLTableを使って表を作ってみる

それでは先ほど作成しておいたExcelの表をHTMLに変換していきます。
変換したい部分を範囲指定し、メニューコマンドの「XLS2HTMLTable」をクリック。

 

すると下のような設定画面が表示されます。
ちょっと分かりづらいかもしれませんが、基本このままの設定でOKです。

Widthの部分だけは、自分のサイトの横幅に合わせて調整しておきましょう。
設定が終了したら、「Execute!」をクリックします。

 

無事にExcelの表がHTMLに変換されました＾＾
このHTMLを全コピーし自分のサイトに張り付ければ、Excelの表を HTMLの
テーブルに変換する作業が完了です。

 

実際にHTMLに変換した表がこちら

上記の方法で実際に作成したテーブルがこちらです。
Excelで作成した表の背景に色を付けた列は、同じように背景色が付いています。

製品	ランキング	2位	4位	3位	1位
	製品名称	A	B	C	D
料金	初期費用	無料	無料	3,150円	2,100円
	月額費用	1,050円	315円	525円	420円
支払法	クレジットカード払い	○	○	○	○
	口座振替	×	○	○	○
	代金引換	○	×	○	○
評価	スペック	★★★★★	★★	★★★	★★★★
	料金	★★	★★★★★	★★★	★★★★
	総合評価	★★★★	★★	★★★	★★★★★

 

セルの幅が不ぞろいだったり完璧とは言えない状態ですが、ここまで完成していれば
あとは微調整をするだけでOKです。
テーブルタグが苦手な方にはこのXLS2HTMLTable、おすすめです。

以上、テーブルを手軽に使いたい方にも、テーブルの作り方を勉強したい方にも
おすすめの簡単テーブル作成術でした。

 

この記事は何かの参考になりましたか？

いつも応援ありがとうございます。宜しければポチッとお願いします。
あなたのクリックが明日も記事を書く活力になります。ヾ(^▽^ヾ)

にほんブログ村

最新記事の購読はRSSとTwitterが便利です

アフィリエイトラボの更新情報はRSSとTwitterでお届けしています。
当ブログをフォローして、最新情報をお読みいただけると幸いです。

@na_yujiさんをフォロー

※現在、当ブログのRSSフィードにエラーが発生しており、現状はRSSを受信いただけませんm(_ _)m
申し訳ありませんが更新情報はツイッターをご利用いただけると幸いです。