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>を結合する方法をご紹介しました。
初心者の頃に躓きやすい部分なので、覚えておくと便利です。