HTMLスキル - 第5章 Lesson5

隣り合う複数のセルを結合させるタグの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

テーブルタグを使って作った表組みの、隣り合う複数のセルを結合させる<rowspan>,<colspan>タグの書き方について、初心者向けに解説しています。



この動画で学べること

・隣り合う複数のセルを結合させる方法



隣り合う複数のセルを結合させるタグの書き方

テーブルの文章の長さによって見づらくなってしまったものを、セルを結合させて見やすくする方法を見ていきましょう。
まずは、フッター部分の横のセルを結合させてみます。
<td>タグの中に、colspan属性を追加します。
今回は、3つのセルを結合させたいので、値を「3」にします。



 <tfoot>
<tr>
<td colspan="3">2014年4月1日現在の情報です。2014年4月1日現在の情報です。2014年4月1日現在の情報です。2014年4月1日現在の情報です。2014年4月1日現在の情報です。2014年4月1日現在の情報です。2014年4月1日現在の情報です。2014年4月1日現在の情報です。2014年4月1日現在の情報です。</td>
</tr>
</tfoot>




一度保存してブラウザで見てみましょう。
3つのセルが結合されて文章が見やすくなりました。






次に、縦方向のセルの結合方法も見てみましょう。
「Webサイトコーディング」の部分を複製し、文章を変えていきます。
この複製した縦方向のセルを結合させます。
<th>タグの中に、rowspan属性を追加します。
今回は、2つのセルを結合させたいので、値を「2」にします。



<tbody>
<tr>
<th scope="row">Webデザイン</th>
<td>Photoshopを使用したWebサイトデザイン</td>
<td>50,000円〜</td>
</tr>
 <tr>
<th scope="row" rowspan="2">Webサイトコーディング</th>
<td>HTML,CSS,javascriptを使用したWebサイトコーディング</td>
<td>50,000円〜</td>
</tr>
 <tr>
<td>Wordpressを使用したWebsiteコーディング</td>
<td>100,000円〜</td>
</tr>
<span></span><tr>
<th scope="row">ロゴ制作</th>
<td>企業やウェブサイトのロゴ製作</td>
<td>50,000円〜</td>
</tr>
</tbody>




ここまでできたら 、保存してブラウザで見てみましょう。
このようにセルを結合させると、テーブルがとても見やすくなります。