HTML
学習

【HTML初心者入門】rowspan 属性を使ってセルを結合する方法を解説！

【3月生募集中！】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP（旧WEBCAMP PRO）。
2月生は満員となっております。3月生募集に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
転職保証コースはこちら！

みなさんはHTMLの学習をしていませんか？

今回の記事では<rowspan>属性の使い方や注意点について紹介していきます！

連結するセルの垂直方向の数を指定する

<th>タグ、<td>タグにrowspan属性を記述すると、セルを縦方向に連結する（セルがまたがる行数）ことができます。

・学習におすすめの本を探している方は、「【初心者向け】htmlの学習におすすめの本12選！」の記事を参考にしてください。

書き方

rowspan属性の値には、「連結するセルの数」を数字で指定します。指定しない場合の初期値は 1 になります。（連結なし）

<td rowspan= "2">～</td>
・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

サンプル(rowspan)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>[TEST]rowspan属性</title>
</head>
<body>

<table border="1">

<tr>

<td rowspan="3">結合セル</td>


<td>セル</td>


<td>セル</td>

</tr>


<tr>

<td>セル</td>


<td>セル</td>

</tr>


<tr>

<td>セル</td>


<td>セル</td>

</tr>

</table>


<table border="1">

<tr>

<td>セル</td>


<td rowspan="3">結合セル</td>


<td>セル</td>

</tr>


<tr>

<td>セル</td>


<td>セル</td>

</tr>


<tr>

<td>セル</td>


<td>セル</td>

</tr>

</table>


<table border="1">

<tr>

<td>セル</td>


<td>セル</td>


<td rowspan="3">結合セル</td>

</tr>


<tr>

<td>セル</td>


<td>セル</td>

</tr>


<tr>

<td>セル</td>


<td>セル</td>

</tr>

</table>

</body>
</html>

サンプル(colspanと連動)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>[TEST]rowspan属性</title>
</head>
<body>

<table border="3">

<tr>

<td colspan="2" rowspan="3">6つのセルを結合</td>


<td>データ1-3</td>

</tr>


<tr>

<td>データ2-3</td>

</tr>


<tr>

<td>データ3-3</td>

</tr>


<tr>

<td>データ4-1</td>


<td>データ4-2</td>


<td>データ4-3</td>

</tr>

</table>

</body>
</html>

・多くのテンプレートを知りたい方は、「【初心者向け】おすすのhtmlのテンプレート7選！」の記事を参考にしてください。

まとめ

初心者の方向けに<rowspan>属性を紹介していきましたが、いかがでしたか？

headタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね！

１ヶ月でHTML・CSSができる！「WebCamp」とは？

WebCampは１ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です！

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです！

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！

【3月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP（旧WEBCAMP PRO）。
2月受入枠は満員となっております。3月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
転職保証コースはこちら！

▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら！

無料説明会に申し込む(DMM WEBCAMP ビジネス教養コース)

おすすめの記事