アプリ版：「スタンプのみでお礼する」機能のリリースについて

詳しい人求む！

Tableコーディング　widthがうまく設定できません。

解決済

  • 質問者：エビゾー
  • 質問日時：
  • 回答数：3件

Tableコーディングをしていますが、うまくwidthの設定ができません。


以下ソースコードのテーブル部分になります。(html4で組んでます。)
<table cellspacing="0" cellpadding="0" width="780">
<tr><td colspan="3"><img src="Banner_big.jpg" width="780" height="200"><td></tr>
<tr><td width="387"><img src="Banner_small.jpg" width="387" height="200"><td><td width="6"></td><td width="387"><img src="Banner_small.jpg" width="387" height="200"><td></tr>
</table>

したい事としては、780px内に正確に小さい画像を２つ入込みたいのですが、画像が添付画像のようにずれてしまい<td width="6"></td>が大きくしまっているようです。

<td width="6"></td>を取れば、うまく画像は並ぶのですが、勉強を含め理解したいという目的もあります。

解決方法や、論理的な説明、大変申し訳ございませんがどなたかお願いできないでしょうか？

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

「Tableコーディング　widthがうま」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞Yahooストアにバナーを貼る為に、tableを組んでいました。


　それを先に言ってくれなきゃ・・(^^)

　なら、単純にHTMLの書き間違い。
<table cellspacing="0" cellpadding="0" width="780">
　<tr>
　　<td colspan="3">
　　　<img src="Banner_big.jpg" width="780" height="200">
　　　<td>
　</tr>
　<tr>
　　<td width="387">
　　　<img src="Banner_small.jpg" width="387" height="200">
　　　<td>
　　　　<td width="6"></td>
　　　　<td width="387">
　　　　　<img src="Banner_small.jpg" width="387" height="200">
　　　　　<td>
　　</tr>
</table>

だとブラウザは
<table cellspacing="0" cellpadding="0" width="780">
　<tr>
　　<td colspan="3">
　　　<img src="Banner_big.jpg" width="780" height="200">
　　　<table>
　　　　<tr>
　　　　　<td>
　　　　　<td><!-- 補完 -->
　　　　</tr>
　　　　<tr>
　　　　　<td width="387">
　　　　　　<img src="Banner_small.jpg" width="387" height="200">
　　　　　<table><!-- 補完 -->
　　　　　　<tr><!-- 補完 -->
　　　　　　　<td width="6"></td>
　　　　　　　<td width="387">
　　　　　　　　<img src="Banner_small.jpg" width="387" height="200">
　　　　　　　　<table><!-- 補完 -->
　　　　　　　　　<tr><!-- 補完 -->
　　　　　　　　　　<td>
　　　　　　　　　　</td><!-- 補完 -->
　　　　　　　　　</tr>
</table>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

＞解決方法や、論理的な説明、


ということで・・

いや、ご存知だと思いますが、「(html4で組んでます。)」・・16年以上前、1999年にHTML4.01が勧告された最大の理由、目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」でしたね。

すなわち、
・テキストを画像に置き換えて表現する。
・ ページレイアウトの目的で表を用いる。
　は強く非推奨になりましたし。
　( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
また、
　「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

　ざっと見る限り、バナーを２種類（？）を並べたいだけですよね。わざわざ分けているところを見ると、リンクが張ってあるのじゃないかと。
　HTMLの設計で最も重要なことは、構造とプレゼンテーションの分離です。
　HTMLには文書構造しか書きませんから、

想像ですが、ナビゲーションリストじゃないかと・・
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
に従ってHTMLは、

<div class="nav">
　<ul><!-- 順不同リスト -->
　　<li><a href=""></a>
　　　<ul>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　</ul>
　　</li>

または､画像が、アルバムのように重要なコンテンツである場合は

<div class="nav">
　<ul>
　　<li><a href=""><img src="Banner_big.jpg" width="780" height="200"></a>
　　　<ul>
　　　　<li><a href=""><img src="Banner_small.jpg" width="387" height="200"></a></li>
　　　　<li><a href=""><img src="Banner_small.jpg" width="387" height="200"></a></li>
　　　</ul>
　　</li>
　</ul>
</div>

だけでよいですよ。
　これなら、点字端末やスクリーンリーダー、テキストブラウザのように画像が利用できないユーザーは無論、検索エンジン対策(SEO)も完璧。
「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

★HTML特にHTML4.01以降で最も守らなければならないポイントです。

下の例をもとに具体的なサンプル書いてみますが、これで、PCやスマホ、あるいは携帯電話やスクリーンリーダー、検索エンジンに対応できる。
　先で自在にデザインも変えられるし、メンテナンスも容易・・

★タブは_に置換してあるので戻してください。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　の[DATA]で検証済みのHTML4.01strict+CSS2.1です。
★幅の広い画面は無論、ウィンドウが小さい端末でも追随する。
★スマホ縦画面だとデザインが変わる。(PCでも・・)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<meta name="viewport" content="width=device-width; initial-scale=1.0">
＿<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen, projection">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:480px;max-width:1000px;margin:0 auto;padding:5px;}
div.header div.nav{
＿margin:0 auto;
＿padding:0;
＿width:80%;
}
div.header div.nav ul{font-size:0;}
div.header div.nav ul,
div.header div.nav ul li{
＿list-style:none;
＿margin:0;padding:0;
＿position:relative;
}
div.header div.nav ul li a img{
width:100%;
height:auto;
}
@media (min-width: 480px) {
div.header div.nav ul li ul li{
＿width:49%;
}
div.header div.nav ul li ul li+li{
＿position:absolute;
＿top:0;
＿right:0;
}
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="/books"><img src="Banner_big.jpg" width="780" height="200" alt="著書"></a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/books/1.html"><img src="Banner_small.jpg" width="387" height="200" alt="本Ａ"></a></li>
＿＿＿＿＿＿<li><a href="/books/2.html"><img src="Banner_small.jpg" width="387" height="200" alt="本Ｂ"></a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

丁重な回答ありがとうございます。
Yahooストアにバナーを貼る為に、tableを組んでいました。

CSSを別組にする事が出来ない状態で、自分にはハードルが高いかなと思っています。

ご教授いただいた内容は理解できるのですが、yahooストアに反映しようと思ったらどうすれば良いか・・・

通報する
お礼日時：2016/07/10 16:40

No.1

  • 回答者： de_viant
  • 回答日時：

単純な記載ミスならスルーしてください。



<td>の後ろのタグが閉じてないようなのですが、、、。

閉じて試したらとりあえず、収まるようですよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご指摘ありがとうございます。
思ったようにできました！！！！

通報する
お礼日時：2016/07/10 16:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報