menu
閉じる
閉じる

アフィリエイトラボ

HTMLが分からないけど、複雑なテーブルを組みたい全ての人へ

サイトを作る時に商品のランキングや比較表にテーブルを使いたくなる場面が出てくると思います。しかし思い通りのテーブルを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をクリック。

XLS2HTML Tableアドインを選択

 

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

アドインにXLS2HTMLTableが追加されている

 

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

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

エクセルの範囲を選択しアドインにXLS2HTMLTableをクリック

 

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

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

テーブルの細かい仕様を決定

 

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

エクセルの表が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でお届けしています。
当ブログをフォローして、最新情報をお読みいただけると幸いです。

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

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ピックアップ記事

  1. 今日は初心者さん向けにパーソナライズド検索について紹介します。 パーソナライズド検索ってなに?という…
  2. サイトを作る時に商品のランキングや比較表にテーブルを使いたくなる場面が出てくると思います。しかし思い…
  3. あなたはキーワード選びに困っていませんか?アフィリエイトで成果を上げるには、ライバルサイトよ…
  4. 前回の記事「SEO内部対策は超重要!知っておきたい内的SEOの基本(前編)」に引き続いて内部SEO対…
  5. 「自分の作ったサイト(ブログ)を検索上位に表示させたい」と思っていますか?もし「検索順位なん…
ページ上部へ戻る