質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaServer Faces

JavaServer Faces(JSF)はJavaをベースとしたコンポーネントベースのwebアプリケーション開発用のフレームワークです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

9261閲覧

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

nekomura

総合スコア132

JavaServer Faces

JavaServer Faces(JSF)はJavaをベースとしたコンポーネントベースのwebアプリケーション開発用のフレームワークです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/08/09 11:02

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

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」のやり方はもちろん、他の方法でも構いませんので有職者の皆様、実現方法のご教示の程お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

と組めそうです。

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

HTML

1 2<tr> 3<!-- 1列目 : 5行結合 --><th rowspan="5">分類</th> 4<!-- 2列目 : 5行結合 --><td rowspan="5">大分類:[プルダウン]<br> 中分類:[プルダウン]<br>・・・・</td> 5<!-- 3列目 : 結合なし --><th>部門</th> 6<!-- 4列目 : 結合なし --><td>[部門のテキストボックス]</td> 7</tr><!-- ここまでで1行目 --> 8 9<tr><!-- セル結合した部分を無視して2行目を書く --> 10<!-- 3列目 : 結合なし --><th>品番</th> 11<!-- 4列目 : 結合なし --><td>[品番のテキストボックス]</td> 12</tr> 13 14(以下5行目まで繰り返し)

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

投稿2016/08/09 11:18

編集2016/08/09 11:19
kaz.Suenaga

総合スコア2037

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nekomura

2016/08/10 08:39

Suenaga様 お世話になっております。 いつも丁寧な解説&サンプルコード、ありがとうございます! とてもためになりました! サンプルコードをヒントに、うまく画面を作成することができました。 本当にありがとうございます。 >rowspanはCSSではなくてHTMLの属性ですね。 →勉強不足でお恥ずかしいです。ご教示ありがとうございます。 HTMLとCSSも始めたばかりなので、勉強になりました。併せて感謝です!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問