スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第23回目の授業です。

皆さんはHTMLでテーブルを作成する際、どのような手順で作成しますか?

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

Dreamweaverの挿入パネルでtable枠を作成してから中身を入力するとか、タグを手打ちするとか、方法はいろいろですね。

今日は、テーブル作成にとっても便利なDreamweaverの機能について紹介します。

これは、「Webクリエイター能力認定試験」対策にもなりますので、受験される方は特に必見です!

目からうろこが落ちますよ!

[INDEX]

  1. テキストファイル(.txt)を読み込んで、HTMLのtableに変換する
  2. Excelファイルを利用して、HTMLのtableに変換する
  3. (おまけ)tableをテキストファイルに書き出して、Excelファイルに変換する

1.テキストファイル(.txt)を読み込んで、HTMLのtableに変換する

まずはてっとり早く、Dreamweaverの操作手順です。

次項でExcelファイルを利用する方法を紹介しますが、Dreamweaverの機能自体はExcelデータ(.xls、.xlsx)を直接読み込むことはできません。
Dreamweaverから読み込むことのできるのは、「区切られたテキストファイル」のみです。

試しにExcelファイルを読み込もうとすると、このようなダイアログが出てきます。
[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

では区切られたテキストファイルとはどのようなものかというと、メモ帳などで作られた
[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]
とか、
[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]
とか、こういうものです。

タブ、カンマ、コロンなどで項目を区切ります。
区切りまでが一つのセル(td要素)、Enterでの改行までが1行(tr要素)になります。

中身の無い空の項目も、表の行列数に合わせて区切りを挿入しておきます。
[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

Webクリエイター能力認定試験では、このようなファイルが「表素材.txt」などとして用意されていますね。

さて、ではDreamweaverでこれを読み込みます。

①HTMLファイルのtableを挿入したい位置にカーソルを置き、[ファイル]メニュー>読み込み>表データ をクリック

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

②「表データの読み込み」ダイアログで、データファイルの[参照]ボタンより該当のテキストファイルを選択する

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

③テキストファイルの区切りのタイプを選択する

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]
下部の「テーブルの幅」「セル内余白」「最上行のフォーマット」等の項目は、CSSで調整する場合特に設定は必要ないと思います。

④[OK]ボタンをクリック!プレーンなtable要素が挿入されました!

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

⑤見出しセル(th)の設定をしたいときは…

読み込んで変換されたテーブルは通常セル(td)のみになっていますので、見出し行の設定をしたいときは、さらにDreamweaverの便利機能を使います。

◆デザインビューに切り替えて、見出し行にしたいセルをドラッグで選択します。

◆その状態で、プロパティインスペクターの「ヘッダー」にチェックを入れます。
[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

◆tdがthに変わりました!
[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

⑥セルを結合したいときは…

これも、デザインビューからの作業が便利です。
結合したいセルをドラッグで選択しておいて、プロパティインスペクターの「選択したセルを結合」アイコンをクリックします。
[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

セルが結合されました!
[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

あとは、Webクリ試験ではたぶん指示のあるid属性、class属性、summary属性、scope属性などの追加は、ソースに自分で足すようになると思いますので、この作業をお忘れなく!
[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

2.Excelファイルを利用して、HTMLのtableに変換する

ボリュームが多いなど、表組の内容をあらかじめExcelで作っておくと楽だなぁという場合があります。
現場で制作されている方だったら、クライアントから資料をExcelで渡されるということもあると思います。

前項でも触れましたが、DreamweaverではExcelファイルは読み込めません。

なので、Excelからテキストデータに変換します。

①Excelで、データの入っているセルを選択し、コピーする

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

②メモ帳を開き、ペーストする

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

これで既に、各セル内容をタブで区切ったデータに変換されています!

あとはこのテキストファイルを適当に名前を付けて保存しておいて、1の手順で読み込みます。

簡単ですねー!

[補足]

読み込みをする際にデザインビューで作業をすると、[ファイル]メニュー>読み込み>Excelドキュメント という選択肢が出てきます。

これでExcelファイルを直接指定して読み込むこともできるのですが、必要のないセルまで余分に読み込まれます。
Excelの方で、データをごにょごにょしておくとかすると上手く読めるのかもしれませんが…

試された方、よかったら教えてくださーい。

3.(おまけ)tableをテキストファイルに書き出して、Excelファイルに変換する

これも、どこかで役に立つかもしれませんので。。

①HTMLのテーブル内に、カーソルを置いておき、[ファイル]メニュー>書き出し>テーブル をクリック

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]
カーソルを置くのはデザインビューでもコードビューでもいいです。

②「テーブルの書き出し」ダイアログで、区切りと改行を指定

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

③[書き出し]ボタンをクリックして保存先とファイル名を指定

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]
この時、拡張子を指定しなければ、ファイルはcsv形式になるようです。
拡張子を.txtと指定すればテキストファイルになります。

④テキストファイルのデータをコピーして、Excelにペースト

[Dreamweaver CS6]HTMLのテーブルをテキストやExcelファイルから簡単に作成する[Webクリエイター能力認定試験対策]

はい、出来上がり!

テーブルの作成は、外部ファイルとHTMLとを行き来しながらテキストのコピペの繰り返し…
という面倒な作業してたーという人も多いと思いますが、この方法を使えばかなり時短になりますね!

それでは、お疲れ様でした!

関連記事
このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

コメントの投稿

非公開コメント

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。