html作成における、表の位置について
- 評価
- クリップ 0
- VIEW 879
退会済みユーザー
下記の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>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
0
今、試せる環境が手元に無いので具体的なコードを示せませんが･･･
単純に <tr>～</tr> と <td>～</td> の対応関係が崩れているだけだと思いますので、基本に立ち返って見直してみてはいかがですか？
ミドルウェアの所には、 <tr>～</tr> で括られていない <td>～</td> が存在しますよね？
他にもちょっと怪しい部分が有るように思われますので。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
check解決した方法
-1
調べて解決できました。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.36%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2016/05/23 14:10
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
kei344
2016/05/24 14:50
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。