HTMLで「table」の結合はDreamweaverを使うと直感的に作れる WEBデザイン

HTML|tableタグの結合はDreamweaverを使うと直感的にできる

HTMLで<table>タグを使って表組を作る時、セルの結合ってややこしくて難しいですよね。

<th>要素と<td>要素に「colspan」「rowspan」を記述して結合させるのですが、どこのタグに書けば良いのか複雑でわかりづらい。。

AdobeのDreamweaverを使用すれば、どんなに複雑な表組であっても簡単に作れます。
HTML初心者の方には特におすすめの方法なので、ご紹介します。

スポンサーリンク

colspanとは

「colspan」とは、水平方向のセルを結合します。
<th>タグ、<td>タグに追加して使用します。

<table>
	<tr>
		<td colspan="3">data</td>
	</tr>
</table>

HTMLはこのように記述し、値は結合したいセルの数を入力します。

スポンサーリンク

rowspanについて

「rowspan」とは、水直方向のセルを結合します。
<th>タグ、<td>タグに追加して使用します。

<table>
	<tr>
		<td rowspan="3">data</td>
	</tr>
</table>

HTMLはこのように記述し、値は結合したいセルの数を入力します。

スポンサーリンク

Dreamweaverでの作り方

例えば以下のような表組を作りたい場合。
見るからに面倒臭そうですよね。

こんな複雑な表組も、Dreamweaverを使えば簡単に作れます。
ではやり方を説明していきます。

DreamweaverでHTMLを書く

Dreamweaverを起動します。

まずはこのような、すべてのセルが分かれた状態の表組を作ります。
<table>を使ってHTMLを作成しましょう。

HTML

<table>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
</table>

「プロパティ」パネルを表示

Dreamweaver画面の上部にあるメニューから、「ウィンドウ」⇒「プロパティ」をクリックして「プロパティ」パネルを表示します。

このようなパネルが表示されればOKです。

表示モードを「デザイン」に

メニュー下に表示モード「コード」「分割」「デザイン」と文字が並んでいます。

これを「デザイン」に切り替えます。

ブラウザとは若干見た目が変わりますが、表組のデザインが表示されるようになりました。

「プロパティ」パネルを使って結合

まずは、結合したいセルを選択します。
デザインビュー上でセルをドラッグすることで選択できます。

右上にある2つのセルを選択しました。

先ほど表示させた「プロパティ」パネルの左下あたりにある、「選択したセルを結合」アイコンをクリックします。

デザインビューを見てみると、セルが結合しています。
結合前のテキストは残ったままになるので、不要なテキストは手作業で削除します。

あとはこれの繰り返しです。

表示モードを「コード」に

セルの結合が終わったら、表示モードを「コード」に戻します。

メニュー下にある「コード」を選択。

ソースコードを見てみると、<td>タグに「colspan」と「rowspan」が追加されています。
生成されたコードは以下。

<table>
	<tr>
		<td>data</td>
		<td>data</td>
		<td colspan="2">data</td>
	</tr>
	<tr>
		<td rowspan="2">data</td>
		<td>data</td>
		<td colspan="2">data</td>
	</tr>
	<tr>
		<td>data</td>
		<td colspan="2">data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
</table>

とても簡単ですね。
これなら複雑な表組も怖くないですね。

スポンサーリンク

まとめ

Dreamweaverを使って<table>を結合する方法をご紹介しました。
初心者の頃に躓きやすい部分なので、覚えておくと便利です。