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

2017.12.27 2018.05.09

WebCamp運営事務局

◆当サイトで人気のプログラミング教室のおすすめランキングはこちら！
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

WEBCAMP←【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール

1ヶ月通い放題・メンター常駐の教室環境でプログラミングを学びたい方！

　　WEBCAMPをオンラインで学びたい方はこちら

TechAcademy←オンラインで開講しているプログラミングスクール
オンラインでどこでも学べる！/教室に行くのが忙しい人でも安心！

Tech Camp←教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方！

WEBCAMP PRO←転職保証付き！エンジニアとして転職したい人におすすめ！
未経験からプロのエンジニアへ３ヶ月で転職する為のスクールです！

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

転職保証コースはこちら！

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

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

▼目次

1 連結するセルの垂直方向の数を指定する
2 書き方
3 サンプル(rowspan)
4 サンプル(colspanと連動)
5 まとめ

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

<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スキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！

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

転職保証コースはこちら！

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

無料説明会に申し込む(WebCamp)

▼ついに開講！オンラインでWebデザインを学びたい方はこちら！

オンラインコースに申し込む