Dreamweaver でテーブルタグを使った表を簡単に作成する方法

[最新更新] 2022年02月11日

HTML で表を組む場合にテーブルタグを利用するが、タグを手入力すると手間と記述ミスが発生しやすいのでマウス操作でテーブルを作成したり、ウェブサイトや Excel の表を簡単に取り込む方法を紹介する。

このページの目次

Dreamweaver でマウスを使った表作成の方法
Dreamweaver でウェブサイトの表を取り込む方法
Dreamweaver で Excel の表を取り込む方法

1. Dreamweaver でマウスを使った表作成の方法

Dreamweaver でマウスを使って表を作成する方法は、まず Dreamweaver を起動して HTML ファイルを開き、上部メニューより「挿入 -> テーブル」を選択する。

「挿入 -> テーブル」を選択

「挿入 -> テーブル」を選択すると表を作成するウィンドウが表示されるため、行と列それぞれに配置するセルの個数やボーダー（枠線）を指定してボタン「OK」をクリックする。

表の仕様を指定してボタン「OK」をクリック

ウィンドウ「テーブル」で作成した表を指定するとデザインビューにブラウザで表示したときの様子が表示され、コード欄にはその表の HTML タグが挿入される。
デザインビューに配置された表はマウス操作で拡大縮小することができるので、大きさも容易に変更が可能である。

表が配置された様子

また、ウィンドウ「テーブル」で作成した表は行と列とそれぞれ指定したセルが作成されるため、セルの結合（マージ）や分割を行いたい場合は、デザインビューにある表を右クリックして表示されるメニューより「テーブル -> セルのマージ」を選択するとセルが結合される。

「テーブル -> セルのマージ」を選択してセルを結合

2. Dreamweaver でウェブサイトの表を取り込む方法

ウェブサイトのリニューアルで古いコンテンツから新しいコンテンツに表を移動させたい場合や、他のサイトから引用する際に表を Dreamweaver を使って簡単に取り込むことができる。

異なるウェブサイトから表をコピー

表を取り込む方法は、ブラウザに表示されている表をマウスでドラッグしてコピーし、そのまま Dreamweaver にペースト（貼り付け）する。
上図はあるウェブサイト上の表を Dreamweaver に取り込んだ様子で、HTML タグはコピーできているものの、CSS で設定されたデザインまではコピーされないため、別途デザインを行う必要がある。
また、ウェブサイトの表をコピーする場合は列または行だけをコピーしてもペーストすることができず、必ず表全体をマウスでドラッグしてコピーしなければならない。