CSS rowspanなどを使って表のレイアウトをうまく表示したい

Question

よろしくお願いいたします。

CSS超初心者です。
現在、webアプリ開発の中でjsfを初めて使う事になり、それにあたってCSSの勉強もしながら下記画面を作っています。

この画面を、「分類」を左側にそのまま配置し、
・「部門」
・「品番」
・「商品名」
・「仕入先コード」
・「仕入先名」
を縦に並べて「分類」の左側に配置したいと思っています。
わかりにくくて汚いですが、以下の画像ような感じです。

ソースは下記に記してありますが、このままのコードではこれ以上の配置換えはできません。
そこで、**「分類」側に「rowspan="5"」などを配置すればうまくいくのでは？**と上司よりヒントをもらったのですが、どこに配置すればよいのかうまく理解が出来ずレイアウトが崩れるばかりです。
・以下ソース

						<tr>
							<th style="text-align:center;">分 類</th>
								<td style="width: 300px;">

							<table class="table-category" style="border-collapse: separate;">
								<tr>
								<th style="font-weight:lighter;">大分類</th>
									<td >
										<h:selectOneMenu id="cate1" styleClass="form-control" style="min-width:235px;"></h:selectOneMenu>
									</td>
								</tr>

								<tr>
								<th style="font-weight:lighter;">中分類</th>
									<td>
									<h:selectOneMenu id="cate2" styleClass="form-control" style="min-width:200px;"></h:selectOneMenu>
									</td>
								</tr>
								<tr>
								<th style="font-weight:lighter;">小分類</th>
									<td>
										<h:selectOneMenu id="cate3"  styleClass="form-control"  style="min-width:200px;"></h:selectOneMenu>
									</td>
								</tr>
								<tr>
								<th style="width:60px; font-weight:lighter;"> 細分類</th>
									<td>
										<h:selectOneMenu id="cate4"  styleClass="form-control"  style="min-width:200px;"></h:selectOneMenu>
									</td>
								</tr>
							</table>
							</td>
						</tr>

						<tr>

							<th style="text-align:center;">部 門</th>
							<td>
								<h:selectOneMenu  styleClass="form-control">
								</h:selectOneMenu>
							</td>
							<th style="text-align:center;">品 番</th>
							<td><h:inputText id="hinban" class="form-control"/></td>
							<th style="text-align:center;">商品名</th>
							<td><h:inputText id="hinmei" class="form-control" /></td>
							<td class="escape" colspan="2"/>
						</tr>
						<th style="text-align:center; width:100px; height:10px;">仕入先コード</th>
							<td><h:inputText id="suppliercd" class="form-control" /></td>
						<th style="text-align:center;">仕入先名</th>
							<td><h:inputText id="suppliernm" class="form-control"/></td>
							<td class="escape" colspan="2"></td>

						</table>

「rowspan」のやり方はもちろん、他の方法でも構いませんので有職者の皆様、実現方法のご教示の程お願いいたします。

Answer 1

rowspanはCSSではなくてHTMLの属性ですね。
イメージでいえばExcelのセル結合です。

質問の内容でいえば 4列5行の表ですね。

• 1列目 5行とも結合して「分類」
• 2列目
  各項目を1行にする場合、4行＋1行余り：結合なし
  1セルにしてしまってセル内で項目別に改行：5行とも結合　★下記のHTML例はこちらを想定
• 3列目 各行が項目名：結合なし
• 4列目 各行が項目データ：結合なし

と組めそうです。

大雑把にHTMLのテーブル部分だけをまとめると、

<tr>
<!-- 1列目 ： 5行結合 --><th rowspan="5">分類</th>
<!-- 2列目 ： 5行結合 --><td rowspan="5">大分類：[プルダウン]<br> 中分類：[プルダウン]<br>・・・・</td>
<!-- 3列目 ： 結合なし --><th>部門</th>
<!-- 4列目 ： 結合なし --><td>[部門のテキストボックス]</td>
</tr><!-- ここまでで1行目 -->

<tr><!-- セル結合した部分を無視して2行目を書く -->
<!-- 3列目 ： 結合なし --><th>品番</th>
<!-- 4列目 ： 結合なし --><td>[品番のテキストボックス]</td>
</tr>

（以下5行目まで繰り返し）

こういう構成になりますね。

Comments

[nekomura]

Suenaga様
お世話になっております。
いつも丁寧な解説&サンプルコード、ありがとうございます！
とてもためになりました！
サンプルコードをヒントに、うまく画面を作成することができました。
本当にありがとうございます。

>rowspanはCSSではなくてHTMLの属性ですね。
→勉強不足でお恥ずかしいです。ご教示ありがとうございます。
HTMLとCSSも始めたばかりなので、勉強になりました。併せて感謝です！