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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

HTML

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

Q&A

解決済

2回答

1564閲覧

html作成における、表の位置について

退会済みユーザー

退会済みユーザー

総合スコア0

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

HTML

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

0グッド

0クリップ

投稿2016/05/23 04:22

編集2016/05/23 05:46

下記のhtmlを表示すると、
ミドルウェアの表だけズレてしまいます。
OSや言語の表と揃えて表示させたいです。
どのようにすればよいでしょうか?


<!-- ***HTML*** --> <html> <!-- ***header*** --> <head> <title>技術要素登録・変更画面</title> </head> <!-- ***body*** --> <body> <!-- ※ 共通ヘッダ ※ --> <div align="center" style="padding: 10px; margin-top: 10px; border: 1px dashed #333333;"> 共通ヘッダ</div>
<!-- 戻るボタンの配置 --> <table align="left"> <tr> <form action="backlist.do"> <td><input type="submit" value="戻る" style="WIDTH: 70px; HEIGHT: 25px; margin-top: 20px;"></td> </form> </tr> </table> <!-- ***table(技術要素登録・変更)*** --> <!-- 枠線の配置 --> <div style="border-style: solid; border-width: 1px; padding: 30px 50px 300px 50px; margin-top: 70px; margin-right; 5 px; margin-left: 5px;"> <!-- OSについての表 --> <table align="left" border=1 cellpadding="12"> <caption> <A Href="http://www.yahoo.co.jp/">OS</A> </caption> <col width="200"> <col width="400"> <tr style="background-color: #00ffff"> <th>技術名</th> <th>備考</th> </tr> <tr> <td align="left">Windows</td> <td><input type="text" name="windows" style="width: 300px; height: 15px;" size="21" value="Windows 7"></td> </tr> <tr> <td align="left">Linux</td> <td><input type="text" name="linux" style="width: 300px; height: 15px;" size="21" value="SUSE Linux Enterprise 9"></td> </tr> </table> <!-- DBについての表 --> <table align="center" border=1 cellpadding="12"> <caption> <A Href="http://www.yahoo.co.jp/">DB</A> </caption> <col width="200"> <col width="400"> <tr style="background-color: #00ffff"> <th>技術名</th> <th>備考</th> </tr> <td align="left">SQL Server</td> <td><input type="text" name="windows" style="width: 300px; height: 15px;" size="21" value="SQL Server 2014"></td> </tr> <tr> <td align="left">Oracle</td> <td><input type="text" name="linux" style="width: 300px; height: 15px;" size="21" value="Oracle 9i"></td> </tr> </table> <!-- 言語についての表 --> <table align="left" border=1 cellpadding="12"> <caption> <br> <br> <A Href="http://www.yahoo.co.jp/">言語</A> </caption> <col width="200"> <col width="400"> <tr style="background-color: #00ffff"> <th>技術名</th> <th>備考</th> </tr> <tr> <td align="left">Java</td> <td><input type="text" name="java" style="width: 300px; height: 15px;" size="21" value="Java 8"></td> </tr> <tr> <td align="left">C</td> <td><input type="text" name="c" style="width: 300px; height: 15px;" size="11" value="Visual C++ 2015"></td> </tr> <tr> <td align="left">PHP</td> <td><input type="text" name="c" style="width: 300px; height: 15px;" size="11" value="PHP 5.6"></td> </tr> </table> <!-- フレームワークについての表 --> <table align="center" border=1 cellpadding="12"> <caption> <A Href="http://www.yahoo.co.jp/"><br> <br>フレームワーク</A> </caption> <col width="200"> <col width="400"> <tr style="background-color: #00ffff"> <th>技術名</th> <th>備考</th> </tr> <tr> <td align="left">Apache Struts</td> <td><input type="text" name="windows" style="width: 300px; height: 15px;" size="21" value="Struts 2"></td> </tr> <tr> <td align="left">Apache Axis</td> <td><input type="text" name="linux" style="width: 300px; height: 15px;" size="21" value="Axis 2"></td> </tr> </table> <!-- ミドルウェア・その他についての表 --> <table align="left" border=1 cellpadding="12"> <caption> <A Href="http://www.yahoo.co.jp/"><br> <br>ミドルウェア・その他</A> </caption> <col width="200"> <col width="400"> <tr style="background-color: #00ffff"> <th>技術名</th> <th>備考</th> </tr> <tr> <td align="left">Seaser</td> <td><input type="text" name="windows" style="width: 300px; height: 15px;" size="21" value="Seaser 2"></td> </tr> <tr> <td align="left">Apache POI</td> <td><input type="text" name="linux" style="width: 300px; height: 15px;" size="21" value="Apache POI"></td> </tr> </table> <!-- 登録ボタンの配置 --> <table align="left"> <tr> <br> <br> <form action="backlist.do"> <td><input type="submit" value="登録" style="WIDTH: 70px; HEIGHT: 25px; margin-top: 25px;"></td> </form> </tr> </table> </div> <!-- 戻るボタンの配置 --> <table align="left"> <tr> <form action="backlist.do"> <td><input type="submit" value="戻る" style="WIDTH: 70px; HEIGHT: 25px; margin-top: 25px;"></td> </form> </tr> </table> <!-- ※ 共通フッタ ※ --> <div align="center" style="padding: 10px; margin-top: 80px; border: 1px dashed #333333;"> 共通フッタ</div>
</body> </html>

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

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

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

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

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

kei344

2016/05/23 05:10

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
kei344

2016/05/24 05:50

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。
guest

回答2

0

ベストアンサー

調べて解決できました。

投稿2016/05/24 05:03

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

今、試せる環境が手元に無いので具体的なコードを示せませんが・・・

単純に <tr>~</tr><td>~</td> の対応関係が崩れているだけだと思いますので、基本に立ち返って見直してみてはいかがですか?
ミドルウェアの所には、 <tr>~</tr> で括られていない <td>~</td> が存在しますよね?
他にもちょっと怪しい部分が有るように思われますので。

(ご参考)テーブル -- ごく簡単なHTMLの説明

投稿2016/05/23 05:17

pi-chan

総合スコア5936

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問